Would the following CSS conflict with Custom Community?

  • Hi folks,

    I’ve got a good chunk of CSS I need to implement, and it’s not doing it’s magic, so I wonder if Custom Community might be halting it with other CSS.

    .p1 {display:block; width:100px; text-decoration:none; background:#fff; border:0; margin:20px 0 0 50px; float:left; position:relative; z-index:50;}
.p1 img {display:block; border:0;}
.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;}
.p1 b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;

 border-radius:3px;
 box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);

-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
-ms-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
}

.p1:hover b {top:-120px; left:110px; padding:10px; border:1px solid #ddd; background:#fff; opacity:1.0;}

    And where in the theme is it best that I drop this?

    Thanks muchly

Viewing 5 replies - 1 through 5 (of 5 total)

  • Does CC have those classes (i.e. “p1”); Hard to help with CSS without seeing the page in question.

    Thread Starter Number_6

    (@number_6)

    It’s within the image output template of Buddypress Activity Plus. Had it working in another installation before.

    Here’s the page:

    <div class="bpfb_images">
<?php $rel = md5(microtime() . rand());?>
<?php foreach ($images as $img) { ?>
	<?php if (!$img) continue; ?>
	<?php if (preg_match('!^https?:\/\/!i', $img)) { // Remote image ?>
        <span class="p1" ><img src="<?php echo $img; ?>" width="400" /><b><img class="large" src="<?php echo $img; ?>" /></b></span>
	<?php } else { ?>
		<?php $info = pathinfo(trim($img));?>
		<?php $thumbnail = file_exists(bpfb_get_image_dir($activity_blog_id) . $info['filename'] . '-bpfbt.' . strtolower($info['extension'])) ?
			bpfb_get_image_url($activity_blog_id) . $info['filename'] . '-bpfbt.' . strtolower($info['extension'])
			:
			bpfb_get_image_url($activity_blog_id) . trim($img)
		;
		$target = 'all' == BPFB_LINKS_TARGET ? 'target="_blank"' : '';
		?>
		<a href="<?php echo bpfb_get_image_url($activity_blog_id) . trim($img); ?>" class="<?php echo $use_thickbox; ?>" rel="<?php echo $rel;?>" <?php echo $target; ?> >
			<img src="<?php echo $thumbnail;?>" />
		</a>
	<?php } ?>
<?php } ?>
</div>

    You can see the CSS in action on this HTML here: https://nagualgrove.com/img-test.html (rollover image)

    CC doesn’t have the class .p1, but when it appears somewhere in the html it should work, except some other CSS is stronger… but that we could find out then..

    first, i would drop all the CSS into the CSS overwrite section of the theme, which is the strongest as it comes loaded “at last”..

    go to THEME SETTINGS -> CSS tab and drop it there..

    let us know, konrad

    Thread Starter Number_6

    (@number_6)

    The CSS worked in the CSS editor.
    However, I am getting a strange effect. The second image that appears on rollover is resized to a tiny width. Is this something in CC?

    For right now my solution is to add a fixed with in the CSS (width:800px;) (which doesn’t work, either. grr)

    hmm no idea..

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Would the following CSS conflict with Custom Community?’ is closed to new replies.