[INFORMATION] Use CSS instead of Skin Modifier

[SubDevo]

Since .hr is so popular in this discussion, I'll throw my two cents in.
PB doesn't give the class hr to all hr elements. The profile page is one example.
So by using hr, .hr {} it covers all HR elements.
One more thing, Safari and Chrome will not color the hr with the default "color and background-color" values. They need a border statement.

So, to cover all HRs and major browsers, I use this CSS:

hr, .hr { color: #FF0000; background-color: #FF0000; border: 1px solid #FF0000;}

Regards,
SubDevo

[Charles Stover]

Safari and Chrome use background-color just like Firefox does. It just bugs the Hell out at 1px height, or something like that. I had the problem before, and I don't remember how I solved it. I wish I could remember what project it involved so I could look it up.
Nonetheless, I got it to work with background-color instead of border in Chrome (maybe I set border-width to 0?), but if the problem was only with 1px height [and you would thus need border with 1px HRs], then you would need to set the border without setting the background color.

hr { border : #ff0000 solid 1px; color : transparent; background-color : transparent; height : 1px; } /* I wonder if height : 0 would work in this situation */

[Michael]

hr {
    background-color: #000;
    border: 0;
    height: 1px;
}


Should work fully CB!

[Malagrond]

I have a couple thoughts to throw in here

As far as .group# goes, someone might want to use CSS over the admin settings if they use more than one skin. That way, if one skin looks best with a certain set of colors, while another skin looks best with different colors, one can simply set different group colors in each skin's stylesheet.

As Michael said before, use !important within a CSS attribute to override the previously set styles. This applies to all CSS attributes and will definitely make your customization work.

Remember that the :first-child pseudo-class can be quite helpful.

~Mala

[SubDevo]

Jul 18, 2010 8:10:32 GMT -8 Michael said:

hr {
    background-color: #000;
    border: 0;
    height: 1px;
}


Should work fully CB!

Close Wrighty. Works in FF, Opera, Safari and Chrome.
Still doesn't color the HR in IE7.
I don't use IE8. Maybe it worked in there?
I had to add color: to get your CSS to work in IE7.


hr {
    color: #000;
    background-color: #000;
    border: 0;
    height: 1px;
}


Regards,
SubDevo

[seymourtubes]

Jul 17, 2010 15:13:14 GMT -8 Jordan said:

Edit: Trill deleted his post.

I think Thrill was, as well as I am (now) after images in place of hr.

There is a code that will give you a image in threads at SZ but not Profile.

Thanks!

[Charles Stover]

I've never tested anything in IE8, but I know it uses color instead of background-color in all versions prior to 8. background-color just doesn't do anything at all for HR in IE7-.

[SubDevo]

Jul 18, 2010 17:02:53 GMT -8 @seymourtubes said:

I think Thrill was, as well as I am (now) after images in place of hr.

There is a code that will give you a image in threads at SZ but not Profile.

Thanks!

I experimented with that about six months ago.
I came up with this.
It works in IE(7), FF, Opera, Safari and Chrome.

<style type="text/css" media="screen">
<!--
hr, .hr {
   border : 0;
   height : 13px;
   width : 557px;
   background : url(http://i27.tinypic.com/2mzmfb7.png) 0 0 no-repeat;
   margin : 5 0 11 0;
}
-->
</style>

<!--[if lt IE 8]>
<style type="text/css" media="screen">
hr, .hr {
   display : list-item;
   list-style : url(http://i27.tinypic.com/2mzmfb7.png) inside;
   filter : alpha(opacity=0);
   width : 0px;
   margin: 2px 0px 0px;
}
</style>
<![endif]-->

Regards,
SubDevo

[Trill]

Jul 18, 2010 17:02:53 GMT -8 @seymourtubes said:

Jul 17, 2010 15:13:14 GMT -8 Jordan said:

Edit: Trill deleted his post.

I think Thrill was, as well as I am (now) after images in place of hr.

There is a code that will give you a image in threads at SZ but not Profile.

Thanks!

Sorry Jordan, I think I may have deleted my post just after you had posted, or vice versa. I didn't notice if there were any replies, as they would have been on the other page. Your response was helpful, though. Thank you!