9 replies to this topic

[gcmprior]

I am trying to add a background image to the call out section and continue using the standard button. I do not want to have the entire image be the button. How can I go about doing this?

[catrina]

You’ll need to use Custom CSS (in Site Options > Custom Code > Custom CSS). CSS that changes the style of a page element consists of two parts: the selector and the attribute.

Selector: Used to select the page element you want to change (in this case, the page element you want to change is your callout section).
Attribute: Property that determines what kind of change you want (you’re changing the background image, so the attribute you want to use is background-image).

To find the selector for the callout section, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please read and follow these instructions:

Please Login or Register to see this Hidden Content

For help with the background-image attribute, please see these instructions: http://w3schools.com/css/css_background.asp

[gcmprior]

Can you be more specific?

.call-out {
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Is this what your talking about?

[catrina]

Yes, but if the selector (in this case, .call-out) doesn't work, you'll need to adjust it (and it needs to be more specific so it would be like #page .callout)

Please Login or Register to see this Hidden Content

^ In this line, you need to use the FULL image URL (

Please Login or Register to see this Hidden Content

)

For further reference:

Please Login or Register to see this Hidden Content

[gcmprior]

#page .callout {
background-image:url('

Please Login or Register to see this Hidden Content

')
}

Tried my original way and the way above. Neither worked?

[catrina]

Are you using Firebug to inspect the callout section for the correct selector?

[gcmprior]

Firebug doesn't work on pagelines like it did on standard themes. I can't even look at style.CSS Files

[Rob]

I'm not so sure. I use Firebug every day on PL based sites. What are you finding that it's doing or not doing?

[gcmprior]

Like i said before, I can't see the style.css

[catrina]

Are you trying to look at the style.css and edit it?