digitalFAQ.com Forum

digitalFAQ.com Forum (https://www.digitalfaq.com/forum/)
-   Website and Server Troubleshooting (https://www.digitalfaq.com/forum/web-tech/)
-   -   Overriding CSS from external stylesheet [solved] (https://www.digitalfaq.com/forum/web-tech/2297-overriding-css-external.html)

admin 07-06-2010 05:35 AM

Overriding CSS from external stylesheet [solved]
 
You'll notice the "Notices" box towards the top of all forum pages, which is now a peach/orange color, to get more attention. Previously, it was a drab gray, based off stylesheet elements used on other areas of the forum. (Those other areas are all now light blue, such as the bar containing UserCP, FAQ, etc., at the top of the forum.)

Rather than write new CSS, and alter the PHP/HTML code of the forum, I simply added some overrides into the code.

I did some experiments, and then to be sure I wasn't wasting my time on something that would not work, I did a Google search on the phrase "override external css" and found this page in the second link: http://www.yourhtmlsource.com/styles...vancedcss.html

That page confirmed my method was sound.

For example:

PHP Code:

<if condition="$show['notices']">
    <
table class="tborder" cellpadding="$stylevar[cellpadding]cellspacing="$stylevar[cellspacing]border="0" width="100%" align="center">
    <
tr>
        <
td class="thead" style="background: url(http://www.digitalfaq.com/images/forum-notices.gif) repeat-x; color:#000000;">$vbphrase[notices]</td>
    </
tr>
    <
tr>
        <
td class="alt1" style="background:#eee6de;">$notices</td>
    </
tr>
    </
table>

</if> 

Notice the thead and alt1 classes, default vBulletin classes, now have added style code. Also note that the style code comes AFTER the call to the class from the external style sheet. Order is important!

By adding the style= code, I changed the notices titlebar (tablehead / thead) to a different external image, as well as changed the color of the text to black. It was a gray image with white text, when using the unaltered stylesheet entry. For the body of the notices table (alt1), I changed the background color.

I've not yet tested in a full battery of browsers, but it seems to be fine in Firefox 3.5, Chrome 4, IE8, Safari 4/Win, Opera 9 and K-Meleon 1.5.x. That's probably 90% of site traffic. The last 10% is IE7 and IE6 (mostly IE7), but IE7 should be fine. I don't care about IE6 -- it's a decade old browser, and should be upgraded.

Hope that helps somebody. :)


All times are GMT -5. The time now is 12:11 AM

Site design, images and content © 2002-2024 The Digital FAQ, www.digitalFAQ.com
Forum Software by vBulletin · Copyright © 2024 Jelsoft Enterprises Ltd.