Second Border in Different Color

johnchasnoff · Member · Jan 30, 2014 at 11:12 pm
Copy link

Add topic to favorites
I have a narrow border running around my entire page, and would like to add a second one, somewhat thicker and a different color, inside the first. If there a way to set the margin the right width and assign it a color, or some other way? Thanks.

The blog I need help with is: (visible only to logged in users)
johnchasnoff · Member · Jan 30, 2014 at 11:39 pm
Copy link
I tried this to put a border around the area below the menu:
#main {
border-style: solid;
border-width: 15 pt;
border-color: #111111;
}
It didn’t do anything. This would be the ideal placement of the second border if possible. I’m operating with twenty eleven.
thesacredpath · Member · Jan 31, 2014 at 8:02 pm
Copy link
Hi there, I’m seeing a green border around the #page element in your site. If you wish to add the border to the white content/sidebar area only, give the following a try and edit as desired.
```
#main {
    padding-top: 0;
}
#primary {
    outline: 5px solid #CC0000;
    outline-offset: -9px;
}
#secondary {
    margin-top: 20px;
}
#content nav, .singular .entry-header .entry-meta, .archive .page-title {
    padding-top: 5px;
}
```
If you want to add a border outside of the one you already have, you could change what you have now to the following. The border set using the “outline” declaration floats outside over the top of your background image.
```
#page.hfeed {
    border: 5px solid #28A82C;
    outline: 8px solid #CC0000;
    outline-offset: 5px;
}
```
johnchasnoff · Member · Jan 31, 2014 at 11:45 pm
Copy link
I used your second suggestion and put it around the outside. Worked like a charm. Thanks so much for your help!
thesacredpath · Member · Feb 1, 2014 at 3:47 pm
Copy link
You are welcome.

No items found.