CSS Backgrounds

Next topic

Author	Message
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
Andy Boston	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
Andy Boston	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?
André R.	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') 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
Andy Boston	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?
Andy Boston	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.