Jump to content
mmandell

Background Color for Boxes

Recommended Posts

mmandell    1
mmandell

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

Share this post


Link to post
Share on other sites
catrina    103
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 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: http://www.pagelines.com/wiki/Custom_CSS.

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mmandell    1
mmandell

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

Share this post


Link to post
Share on other sites
catrina    103
catrina

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).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mmandell    1
mmandell

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

Share this post


Link to post
Share on other sites
mmandell    1
mmandell

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">

<div class="pprow grid-row fix ">

<div class="grid-element pp3 img_grid ">

<div class="grid-element pp3 img_grid ">

<div class="grid-element pp3 img_grid pplast">

Share this post


Link to post
Share on other sites
mmandell    1
mmandell

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

Best,

Matt


#boxes { background-color: #B6F7AD; 

    border-style:solid;

    border-size: 1px;

    border-color:#53AB4B;

    padding:2%;

    -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    border-radius: 15px;

    display:block;

    margin:auto;

    width:60%;

    margin-top:2%; }

  • Like 1

Share this post


Link to post
Share on other sites
Rob    547
Rob

The topic was marked as resolved.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Audun MB
      By Audun MB+

      Here:http://attac.no/global-ulikhet/
      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • Susan
      By Susan+
      Everything was fine with my site.
      Suddenly, strange characters are appearing in Boxes. See image. Site page is here. I even tried to add a new Boxes section but the same thing keeps happening, so I deleted the new section.
      How can I resolve this?
      Your help is greatly appreciated.
      Thank you.
       
       

    • claudedagenais
      By claudedagenais+
      Hi,
      Could it be possible to add to the boxes an option so that if an Item has an optional link that we can also optionally make it open in a new windows.
      Thank you :-)
×