PDA

View Full Version : How can I use {vb:raw vboptions.xxx} within CSS template??

EquinoxWorld
08-07-2011, 03:58 PM
Hello everyone, I currently have a slideshow to which I created a couple of options in the admin panel for the admin to be able to control it's width and height easily from the product options, instead of having to go edit style-vars.

The slideshow's width and height are controlled by CSS attributes. I created a custom CSS template and inlciuded it within my page with the slideshow making a call to said template. My problem is apparently it's not reading the CSS correctly using {vb:raw vboptions.xxx} as a replacement for actual values.

Here's what I am trying to do:


#slide {
position:relative;
width:{vb:raw vboptions.cotw_sotw_max_width}px;
height:{vb:raw vboptions.cotw_sotw_max_height}px;
background:url(images/loading.gif) no-repeat 50% 50%;
}


If I do just this:


#slide {
position:relative;
width:500px;
height:200px;
background:url(images/loading.gif) no-repeat 50% 50%;
}


The slideshow changes to those dimensions if I do it the previous way it does not change size, it just adapts it's size to the image that's showing. Anyone have any ideas why or how I can't get this to work being able to use those custom options to control width and height? Any info anyone can provide will be appreciated. Thanks for your time everyone.

Note: I was unsure whether to place this thread here or in Design so if any mod wants to move it by all means. Sorry for the trouble in advance if you do. :)
Lynne
08-07-2011, 04:26 PM
I used options in my css template for one of my modifications and it worked just fine. What "Data Validation Type" did you select for your option? Is it an Integer?
EquinoxWorld
08-07-2011, 04:29 PM
I used options in my css template for one of my modifications and it worked just fine. What "Data Validation Type" did you select for your option? Is it an Integer?

Positive Integer... Would it make a difference?

Edited: Doesn't..I checked :)
Badshah93
08-07-2011, 04:40 PM
{vb:raw vboptions.xxx} is working well. try adding ur css code to additional.css template and see if that works
EquinoxWorld
08-07-2011, 04:47 PM
{vb:raw vboptions.xxx} is working well. try adding ur css code to additional.css template and see if that works

OK it does work when I use the code in additional.css ... How can I use it on my own css template then? It would be a pain to have to ask whoever it is installing this to have to edit their additional.css template right?
Lynne
08-07-2011, 04:49 PM
Are you adding it to a template that is called xxxx.css? I created my own .css template and I use the settings in there.
EquinoxWorld
08-07-2011, 04:53 PM
Are you adding it to a template that is called xxxx.css? I created my own .css template and I use the settings in there.

Yup, to COTW_Adittional.css to be exact. The options work fine in the default additional.css template but not in my own for some reason. Maybe there's some rendering that needs to be done somewhere to get the option to render in my custom css template? :confused:

--------------- Added 1312739772 at 1312739772 ---------------

And I am using this to link it in the template:

<link rel="stylesheet" type="text/css" href="{vb:raw vbcsspath}COTW_Adittional.css" />
Badshah93
08-07-2011, 05:06 PM
i just created a new css template and its working well..

where you using this code ?

<link rel="stylesheet" type="text/css" href="{vb:raw vbcsspath}COTW_Adittional.css" />
EquinoxWorld
08-07-2011, 05:10 PM
i just created a new css template and its working well..

where you using this code ?

<link rel="stylesheet" type="text/css" href="{vb:raw vbcsspath}COTW_Adittional.css" />


Yeah I am. Is it correct?
Badshah93
08-07-2011, 05:14 PM
Yeah I am. Is it correct?

ya code is correct, but you are placing this code in which template ?

i placed my code in headinclude template
EquinoxWorld
08-07-2011, 05:28 PM
ya code is correct, but you are placing this code in which template ?

i placed my code in headinclude template

I placed the code in the template which I am using the slideshow between the <head></head>, in this case in a custom template called "COTW_SOTW" which calls the custom page I crated cotw_sotw.php.

Would it may have to do with the order in which this style sheet is called within the head tags?
Badshah93
08-07-2011, 05:34 PM
I placed the code in the template which I am using the slideshow between the <head></head>, in this case in a custom template called "COTW_SOTW" which calls the custom page I crated cotw_sotw.php.

Would it may have to do with the order in which this style sheet is called within the head tags?

actually i think it is cache issue..

try in another browser.
EquinoxWorld
08-07-2011, 05:43 PM
actually i think it is cache issue..

try in another browser.

:D You are correct my friend!! :p

Thank goodness! Thanks for the help everyone. Glad we got this resolved. For future references everyone knows now, clear your cache when in doubt. ;) I should add some small footnote for that option to suggest the user to refresh their cache after changing this option. (just in case you know). Thanks for your time everyone.

Best Regards,

Nox.

P.S.:Would there be a way to force a cache clear of the user changing this option?? Would be better to force this upon the user submitting the change, would make it more idiot-proof ;) . Whatever the case placing a footnote I think should do the trick too.
Badshah93
08-07-2011, 05:54 PM
:D You are correct my friend!! :p

Thank goodness! Thanks for the help everyone. Glad we got this resolved. For future references everyone knows now, clear your cache when in doubt. ;) I should add some small footnote for that option to suggest the user to refresh their cache after changing this option. (just in case you know). Thanks for your time everyone.

Best Regards,

Nox.

P.S.:Would there be a way to force a cache clear of the user changing this option?? Would be better to force this upon the user submitting the change, would make it more idiot-proof ;) . Whatever the case placing a footnote I think should do the trick too.


Problem is not resolve yet mate..

Try changing the value of that option and tell me if there is effect of that change ? (it will not i think)


Solution:

Create New Plugin

Plugin Hook: parse_templates

Code:

$templater = vB_Template::create('templatename');
$template_hook['headinclude_css'] .= $templater->render();



Create a new Template called templatename

Code:

<style type ="text/css">

//Your css code

</style>



It was interesting and i was also confused. But when i saw css.php file, i got my answer.

header('Cache-control: max-age=31536000');
header('Expires: ' . gmdate("D, d M Y H:i:s", TIMENOW + 31536000) . ' GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s', $style['dateline']) . ' GMT');
EquinoxWorld
08-07-2011, 06:22 PM
:eek: It did but after I cleared the cache and logged in again...

This works A LOT better, it instantly changes the size of the slider without having to clear cache, of course because now it is automatically rendered with heainclude as soon as the page loads, very smart solution my friend. I wasn't even aware either that you could have a template as CSS and not have to name it like one. Thank you very much for your help. Now it is truly resolved.