Jump to content


Photo
- - - - -

Add Background To Call Out Section

call outbackground css

  • Please log in to reply
9 replies to this topic

#1 gcmprior

gcmprior

    Advanced Member

  • Members
  • 69 posts

Posted 26 October 2012 - 05:30 PM

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?

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 October 2012 - 05:35 PM

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

#3 gcmprior

gcmprior

    Advanced Member

  • Members
  • 69 posts

Posted 26 October 2012 - 06:10 PM

Can you be more specific?

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

Is this what your talking about?

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 October 2012 - 06:32 PM

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



#5 gcmprior

gcmprior

    Advanced Member

  • Members
  • 69 posts

Posted 26 October 2012 - 07:06 PM

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

Please Login or Register to see this Hidden Content

')
}

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

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 October 2012 - 07:07 PM

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

#7 gcmprior

gcmprior

    Advanced Member

  • Members
  • 69 posts

Posted 26 October 2012 - 07:26 PM

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

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 26 October 2012 - 11:16 PM

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?

#9 gcmprior

gcmprior

    Advanced Member

  • Members
  • 69 posts

Posted 31 October 2012 - 06:25 PM

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

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 31 October 2012 - 06:34 PM

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





Also tagged with one or more of these keywords: call outbackground, css