Hi.
I'm having a 'developers brain block'.
Could you please look at this website www.charmingbead.com and tell me what code to add to the stylesheet to:
add a simple vertical line “border” on each side of main content area of the site, like so | | in Forest/Olive Green 646753; keeping the thickness the same size as all of the borders of each item in the SHOP.
Thanks for your help!
-Dhara
adding a narrow border to the background
-
- AllPro Expert
- Posts: 66
- meble kuchenne Mikołów Knurów Czechowice-Dziedzice
- Joined: Wed Mar 16, 2016 1:06 pm
- Website: www.webrose.net
- JohnB
- Support Team
- Posts: 1022
- Joined: Wed Nov 04, 2015 3:57 pm
- Website: www.allprowebtools.com
Re: adding a narrow border to the background
It looks like you will want to use this selector to select the main content area:
Then I would check either what W3Schools or Mozilla has to say about borders. W3Schools has a section about adding a left border, which can be used to also add a right border.
Please let me know if you have any more questions!
Code: Select all
#main-content-area
Please let me know if you have any more questions!
-
- AllPro Expert
- Posts: 66
- Joined: Wed Mar 16, 2016 1:06 pm
- Website: www.webrose.net
Re: adding a narrow border to the background
Thanks for info, John.
I added this code on line 92 under the 3 column layout area of the style sheet:
#main-content-area {
border-left: 5px solid #646753;
border-right: 5px solid #646753;
}
but no border appeared.
Any suggestions?
Thanks!
www.CharmingBead.com
I added this code on line 92 under the 3 column layout area of the style sheet:
#main-content-area {
border-left: 5px solid #646753;
border-right: 5px solid #646753;
}
but no border appeared.
Any suggestions?
Thanks!
www.CharmingBead.com
-
- AllPro Expert
- Posts: 66
- Joined: Wed Mar 16, 2016 1:06 pm
- Website: www.webrose.net
Re: adding a narrow border to the background
Okay, I worked it out.
It was pretty simple, after all!
The W3School info was the key element.
Thanks for your help.
It was pretty simple, after all!
The W3School info was the key element.
Thanks for your help.
- JohnB
- Support Team
- Posts: 1022
- Joined: Wed Nov 04, 2015 3:57 pm
- Website: www.allprowebtools.com
Re: adding a narrow border to the background
Awesome! Glad you got it worked out!
-
- AllPro Expert
- Posts: 66
- Joined: Wed Mar 16, 2016 1:06 pm
- Website: www.webrose.net
Re: adding a narrow border to the background
Hi again.
I'm still struggling a bit with this site www.charmingbead.com and hope you can tell me what I'm doing wrong.
The Client wants to change their "category list" box in their store to have another background color (from yellow to 'putty').
I have inputted the code where the 'inspect element' showed to make the change and it did actually make the color change in the preview.
But when I put in that color code in the style sheet, nothing happened.
I have 'caching' turned off and other color changes I am making take effect immediately.
I made the change yesterday and came back this morning and it hasn't changed. I am completely stumped.
Here's the code
}
.productsidebar {
margin: 10px 10px;
border: 1px solid #477725;
color: #d4d1b2;
}
Thanks for your help!
I'm still struggling a bit with this site www.charmingbead.com and hope you can tell me what I'm doing wrong.
The Client wants to change their "category list" box in their store to have another background color (from yellow to 'putty').
I have inputted the code where the 'inspect element' showed to make the change and it did actually make the color change in the preview.
But when I put in that color code in the style sheet, nothing happened.
I have 'caching' turned off and other color changes I am making take effect immediately.
I made the change yesterday and came back this morning and it hasn't changed. I am completely stumped.
Here's the code
}
.productsidebar {
margin: 10px 10px;
border: 1px solid #477725;
color: #d4d1b2;
}
Thanks for your help!
- JohnB
- Support Team
- Posts: 1022
- Joined: Wed Nov 04, 2015 3:57 pm
- Website: www.allprowebtools.com
Re: adding a narrow border to the background
Can you check again and see if your changes have taken effect?
Whenever you make CSS edits, you have to be aware of local browser caching which will often prevent your changes from appearing right away.
One way around this is to go into Settings->DNS Records and runing off caching. It will allow you to work and see your CSS changes instantly (you may still need to refresh a few times after you edit the stylesheet), and the caching will automatically turn back on after 3 hours, so you don't have to worry about turning it back on when you are finished.
Whenever you make CSS edits, you have to be aware of local browser caching which will often prevent your changes from appearing right away.
One way around this is to go into Settings->DNS Records and runing off caching. It will allow you to work and see your CSS changes instantly (you may still need to refresh a few times after you edit the stylesheet), and the caching will automatically turn back on after 3 hours, so you don't have to worry about turning it back on when you are finished.
-
- AllPro Expert
- Posts: 66
- Joined: Wed Mar 16, 2016 1:06 pm
- Website: www.webrose.net
Re: adding a narrow border to the background
Hi.
The product box color has not changed, even though when I do an 'inspect element' in that area, the coding shows that the color I am wanting it to be has registered.
Thanks for helping me figure this out.
Here's the box on the page. https://charmingbead.com/SHOP-b1/
Thanks!
The product box color has not changed, even though when I do an 'inspect element' in that area, the coding shows that the color I am wanting it to be has registered.
Thanks for helping me figure this out.
Here's the box on the page. https://charmingbead.com/SHOP-b1/
Thanks!
- JohnB
- Support Team
- Posts: 1022
- Joined: Wed Nov 04, 2015 3:57 pm
- Website: www.allprowebtools.com
Re: adding a narrow border to the background
Ok, looking closer it appears this is what is happening:
With the ".productsidebar" selector you are selecting the ul element, and adding a background color to that. However, all the list items also have their own background color, and since the items appear on top of the list, that is the color we are seeing.
So, if you use the selector ".productsidebar > .list-group-item" that will let you change the bakground color of each of the items in that product sidebar list.
Try this and let me know how it works:
With the ".productsidebar" selector you are selecting the ul element, and adding a background color to that. However, all the list items also have their own background color, and since the items appear on top of the list, that is the color we are seeing.
So, if you use the selector ".productsidebar > .list-group-item" that will let you change the bakground color of each of the items in that product sidebar list.
Try this and let me know how it works:
Code: Select all
.productsidebar > .list-group-item {
background-color: #d4d1b2;
}
-
- AllPro Expert
- Posts: 66
- Joined: Wed Mar 16, 2016 1:06 pm
- Website: www.webrose.net