Forums / Setup & design / CSS Backgrounds
Andy Boston
Wednesday 28 November 2007 8:38:20 am
Can anyone tell me how to add CSS background images to a custom div class.
I know how to do it in CSS but I don't know how to do it through eZp
Any help would be appreciated :-)
paul bolger
Wednesday 28 November 2007 11:02:20 pm
Hi Andy
Do you mean that you want to add an inline CSS declaration to the custom tag template?
Something like:
<div style="background-image: url ({"images/myimage.jpg"|ezdesign} )">
should do it - but personally I'd be putting it in your stylesheet.
Paul Bolger
Thursday 29 November 2007 5:02:34 am
It's probably easier to show you what i mean...
Here is my eZp 4.0beta website (currently being populated and developed)
http://www.streetracersuk.com/
I want to use the "Welcome" image as a background image and have a styled text div over the top. Ordinarily I'd do it as CSS styles in a stylesheet.
What I'm asking is how do I apply a CSS style using the eZp admin?
André R.
Thursday 29 November 2007 6:15:27 am
eZ Publish does not let you define inline style in the content, this is because it seperates the content from style / design.
So in this case you can: 1: Define a class for the tag you want to style (look in content.ini for how to set up classes pr tag, for instance [paragraph] aka <p> in html ) 2. Use <literal class="html"></literal> tag, this will allow you to put anything inside that tag. But you need to enable it first in content.ini under [literal], it is disabled by default for security reasons (so be sure you only let trusted people edit any class with xmlBlock datatypes after you enable this)
eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription @: http://twitter.com/andrerom
Thursday 29 November 2007 8:12:23 am
Thanks guys. So let me get this right.
Once I enable HTML i can use inline styles within a literal tag
eg:
<literal class="html"> <div style="background-image: url(images/image.bg); background-repeat:no-repeat;background-color:#000000;width:300px;height:450px;"> <div style="font-family:tahoma;font-size:1em;color:#ffffff;padding:30px 10px 10px 10px;"> Just a bit of text </div> </div> </literal>
Would that work?
Thursday 29 November 2007 10:38:39 am
No. but that is because you use relative urls in the background image. If this is on page: http://ezsite.com/aboutus/thispage then your browser would think the image is here:http://ezsite.com/aboutus/thispage/images/image.gif
So you need to set it to something like this (depending on where you place the image of course): url('/design/my_design/images/image.gif')
Thursday 29 November 2007 4:25:36 pm
Ok so it has to be something like...
<literal class="html"> <div style="background-image: url(http://www.streetracersuk.com/var/ezwebin_site/storage/images/media/images/welcome/960-1-eng-GB/Welcome.jpg); background-repeat:no-repeat;background-color:#000000;width:621px;height:120px;"> <div style="font-family:tahoma;font-size:1em;color:#ffffff;padding:30px 10px 10px 10px;">This is Street Racers UK. An indepedant webzine about car modifying and the surrounding culture. </div> </div> </literal>
I think I'm doing something wrong enabling html in the content.ini through the admin because it comes up with this error...
Center column: Class 'html' is not allowed for element <literal> (check content.ini).
What do I type in the box to make it change?
Tuesday 04 December 2007 1:05:35 pm
Found it, Fixed it, Done it :-)
www.streetracersuk.com
Still a few alignment tweaks to do but the idea is there. Thanks Andre & Paul, your help was much appreciated.