Jump to content


Photo
- - - - -
Resolved

Background Color for Boxes

Boxes

This topic has been archived. This means that you cannot reply to this topic.
7 replies to this topic

#1 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 02 October 2012 - 05:26 PM

Hello, I am trying to add a box set to a page and have a background color appear around the set of boxes.

ie: 3 boxes in a row but instead of the area of the whole row being the same background of the page, it is a different color.

How can I accomplish this.
The site url is CityCentric.com and the boxes are on the index at the top of the page.

Thanks,

Matt

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 02 October 2012 - 05:52 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 box set background color).
Attribute: Property that determines what kind of change you want (you’re changing the box set background color, so the attribute you want to use is background-color).

To find the selector for the box background, 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-color attribute, please see these instructions:
http://w3schools.com/css/css_background.asp

#3 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 02 October 2012 - 06:55 PM

I have added the code below to the css and it has worked, but I don't have the background that is only around the boxes, it is the entire width, how do we move on to the second lesson in CSS.

#boxes {background-color: #B6F7AD; }

Thanks for your help.

Matt

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 02 October 2012 - 07:21 PM

If you need to select or a specific area of the box set, you'll need to inspect the elements within that area using Firebug and find the right selector for the area you need to adjust (it takes some playing around).

#5 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 02 October 2012 - 07:26 PM

Can you explain that another way.

The element in firebug is not the full width but when I use the background, it does turn the entire thing the selected color.

Feel free to take a look at citycentric.com

Thanks,

Matt

#6 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 03 October 2012 - 07:47 PM

I see an area in firebug but can't get the class area to respond to the CSS.

The PPRow grid row is the area I want to have a background but it is not working as expected.

How can I fix this?

Thanks,

Matt


<section id="boxes" class="container no_clone section-boxes fix">



<div class="texture">



<div class="content">



<div class="content-pad">



<div class="fboxes fix">



<div class="plgrid ">



<div class="plgrid-pad">



[color=#FFFFFF !important]<div class="pprow grid-row fix ">

[color=#000088]

<[color=blue]div[/color] class="[color=#FF0000]grid-element pp3 img_grid [/color]">
[/color][color=#000088]

<[color=blue]div[/color] class="[color=#FF0000]grid-element pp3 img_grid [/color]">
[/color][color=#000088]

<[color=blue]div[/color] class="[color=#FF0000]grid-element pp3 img_grid pplast[/color]">
[/color]
[/color]

#7 mmandell

mmandell

    Member

  • Members
  • 15 posts

Posted 03 October 2012 - 08:25 PM

I found the solution, just need to throw a lot more code in there, hope this helps someone else.

Best,

Matt


Please Login or Register to see this Hidden Content



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 04 October 2012 - 02:08 AM

The topic was marked as resolved.