PDA

View Full Version : Question on css


jfxcube
03-22-2012, 12:47 AM
There is a way to execute a certain code inside a css file rather than another code?
For example i have in additional.css

.......
......
code
......
.......

i want to switch between code and code1 with a condition such as if(THIS_SCRIPT=="index")
{code} else code1

There is some trick to do that?

TheLastSuperman
03-22-2012, 01:05 AM
Create a new plugin:

Product: vBulletin
Hook Location: parse_templates
Title: Custom Style Changes
Code:
if (THIS_SCRIPT != 'index') {
$switchmycss = '<style type="text/css">
.body_wrapper {
background:#FF0000;
}
</style>';
}
$template_hook[headinclude_bottom_css] .= $switchmycss;
Active: Must be set to YES.

You can specify more definitions but don't use for example {vb stylevars} actually type out the code in your css definition(s). Of course you can do tons of other things here and even add more code to run this in certain styles only etc.

:cool:

Edit: Here's a more complex albeit rough example:
if (THIS_SCRIPT != 'index') {
$switchbackground = '<style type="text/css">
#footer, .footer {
background:#FFFFFF url(images/main_content_BG_footerWhite.png) right top repeat-y !important;
border:none !important;
margin-left:-10px !important;
/*margin-right:-10px !important;*/
-moz-box-shadow:none !important;
-webkit-box-shadow:none !important;
box-shadow:none !important;
}
.mainContent_containerBottom {
width:1020px;
height:10px;
margin-left:auto;
margin-right:auto;
/*text-align:center;*/
background-image: url(images/mainContent_BGbottomWhite.png);
background-repeat: no-repeat;
background-position: bottom center;
}
</style>';
} else {
$switchbackground = '<style type="text/css">
#footer, .footer {
background:#FFFFFF url(images/main_content_BG_footer.png) right top repeat-y !important;
border:none !important;
margin-left:-10px !important;
/*margin-right:-10px !important;*/
-moz-box-shadow:none !important;
-webkit-box-shadow:none !important;
box-shadow:none !important;
}
.mainContent_containerBottom {
width:1020px;
height:10px;
margin-left:auto;
margin-right:auto;
/*text-align:center;*/
background-image: url(images/mainContent_BGbottom.png);
background-repeat: no-repeat;
background-position: bottom center;
}
</style>';
}
$template_hook[headinclude_bottom_css] .= $switchbackground;

Also please note I was using != 'index' on the site I was customizing so you will want to change to == 'index' or other script name etc.