WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: viercent on March 22, 2010, 12:42:37 PM

Title: calling WB url in CSS
Post by: viercent on March 22, 2010, 12:42:37 PM

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: [Select]

<div id="header"><div class="img1"></div><div class="img2></div><div class="img3></div><div class="img4></div></div>
and the css will look something like this

Code: [Select]

#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..

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: [Select]

<?php echo WB_URL; ?>/media/header/img1.jpgbut how can i use the "WB_URL" call in my CSS-file??

Code: [Select]

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

Title: Re: calling WB url in CSS
Post by: Vincent on March 22, 2010, 12:54:16 PM

Hi Viercent,

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

Code: [Select]

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

with

Code: [Select]

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

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

Code: [Select]

<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>

Hope it helps.
Regards,
Vincent

Title: Re: calling WB url in CSS
Post by: viercent on March 22, 2010, 12:59:05 PM

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

Title: Re: calling WB url in CSS
Post by: kweitzel on March 22, 2010, 02:15:01 PM

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

Title: Re: calling WB url in CSS
Post by: viercent on March 22, 2010, 03:46:57 PM

oh >.<'

i'm thinking to difficult...

just making it like this:

Code: [Select]

background: url('../../media/header/header1.jpg') no-repeat center left;
works fine >.<'

Title: Re: calling WB url in CSS
Post by: marathoner on March 23, 2010, 02:46:27 AM

Don't forget that you could simply put that part of your CSS directly in the template header section rather than a CSS file.

Something like this (not tested)

Code: [Select]

<STYLE type="text/css">
#img1 {background: url('<?php echo WB_URL; ?>media/template/header1.jpg') no-repeat center left;}
</STYLE>


Title: Re: calling WB url in CSS
Post by: viercent on March 24, 2010, 10:00:39 PM

allready solved, but still, thnx for the suggestion ;)