CSS Backgrounds

« 
Previous topic
|
Setup & design
|
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.
Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.

eZ debug

Timing: Jan 19 2025 03:24:29
Script start
Timing: Jan 19 2025 03:24:29
Module start 'layout'
Timing: Jan 19 2025 03:24:29
Module start 'content'
Timing: Jan 19 2025 03:24:29
Module end 'content'
Timing: Jan 19 2025 03:24:29
Script end

Main resources:

Total runtime0.0136 sec
Peak memory usage2,048.0000 KB
Database Queries3

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0049 590.1641152.6094
Module start 'layout' 0.00490.0028 742.773439.4297
Module start 'content' 0.00770.0040 782.2031101.4141
Module end 'content' 0.01170.0019 883.617242.3047
Script end 0.0136  925.9219 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.002317.0709140.0002
Check MTime0.00107.3787140.0001
Mysql Total
Database connection0.00107.427710.0010
Mysqli_queries0.002518.114830.0008
Looping result0.00000.080610.0000
Template Total0.001511.310.0015
Template load0.00086.075610.0008
Template processing0.00075.245510.0007
Override
Cache load0.00064.408310.0006
General
dbfile0.00021.656880.0000
String conversion0.00000.052540.0000
Note: percentages do not add up to 100% because some accumulators overlap

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1print_pagelayout.tpl<No override>extension/community/design/community/templates/print_pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0001 secs