CSS Backgrounds

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.

Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.