Would the following CSS conflict with Custom Community?

[Number_6]

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

[WPyogi]

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

[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)

[konradS]

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

[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)

[konradS]

hmm no idea..