WebsiteBaker Support (2.8.x) > Templates, Menus & Design

calling WB url in CSS

(1/2) > >>

viercent:
does anyone now how to call the wb url in your css??

Let me explain my problem a bit more (A)

i want to have a header with 3 or 4 images in it (as a background-image), to do so i will add something like this in the index.php

--- Code: ---<div id="header"><div class="img1"></div><div class="img2></div><div class="img3></div><div class="img4></div></div>
--- End code ---

and the css will look something like this


--- Code: ---#header {
position: relative;
height: 141px;
background-color: transparent;
width: 50%;
float: left;
}

#img1 {
background: url('images/img1.jpg') no-repeat;
float: left;
width: 150px;
}
#img2 {
background: url('images/img1.jpg') no-repeat;
float: left;
width: 150px;
}

etc..etc..

--- End code ---

what i wanna do is make a folder inside of the media directory and put the images in there
so if i want to call an image from the "media" folder in my index.php I will put

--- Code: ---<?php echo WB_URL; ?>/media/header/img1.jpg
--- End code ---
but how can i use the "WB_URL" call in my CSS-file??


--- Code: ---background: url('<?php echo WB_URL; ?>media/template/header1.jpg') no-repeat center left;
--- End code ---
the code above doesn't work....

Vincent:
Hi Viercent,

Put the background images in a folder Images of your template folder. Now replace


--- Code: ---background: url('<?php echo WB_URL; ?>media/template/header1.jpg') no-repeat center left;

--- End code ---

with


--- Code: ---background: url('images/header1.jpg') no-repeat center left;

--- End code ---

Moreover: this should work for your logo (make it clickable). In the index.php:


--- Code: ---<div id="header"><a href="<?php echo WB_URL; ?>"><img src='<?php echo TEMPLATE_DIR; ?>/images/logo.gif' alt=logo' title='anything' style='border:none'  /></a></div>

--- End code ---

Hope it helps.
Regards,
Vincent

viercent:
well, that was the first option, but then i heard that "the guy i'm making the website for" wanted to change the photo's in there...
since i don't want him to have full FTP acces (he always messes things up), i wanted it to be in the media folder :P

but thanks anyway =D

kweitzel:
If you want to use the WB functions in the CSS File you need to run it through PHP, so you'd need to call it screen.css.php (or something like that). Then it should work.

cheers

Klaus

viercent:
oh >.<'

i'm thinking to difficult...

just making it like this:

--- Code: ---background: url('../../media/header/header1.jpg') no-repeat center left;

--- End code ---
works fine >.<'

Navigation

[0] Message Index

[#] Next page