adding a narrow border to the background

Need help? Please give a detailed explanation of your problem.
Post Reply
Dhara1937
AllPro Expert
AllPro Expert
Posts: 66
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

adding a narrow border to the background

Post by Dhara1937 »

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
User avatar
JohnB
Support Team
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: adding a narrow border to the background

Post by JohnB »

It looks like you will want to use this selector to select the main content area:

Code: Select all

#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!
Dhara1937
AllPro Expert
AllPro Expert
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

Re: adding a narrow border to the background

Post by Dhara1937 »

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
Dhara1937
AllPro Expert
AllPro Expert
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

Re: adding a narrow border to the background

Post by Dhara1937 »

Okay, I worked it out.
It was pretty simple, after all!
The W3School info was the key element.
Thanks for your help.
User avatar
JohnB
Support Team
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: adding a narrow border to the background

Post by JohnB »

Awesome! Glad you got it worked out!
Dhara1937
AllPro Expert
AllPro Expert
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

Re: adding a narrow border to the background

Post by Dhara1937 »

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!
User avatar
JohnB
Support Team
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: adding a narrow border to the background

Post by JohnB »

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.
Dhara1937
AllPro Expert
AllPro Expert
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

Re: adding a narrow border to the background

Post by Dhara1937 »

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!
User avatar
JohnB
Support Team
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: adding a narrow border to the background

Post by JohnB »

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:

Code: Select all

.productsidebar > .list-group-item {
  background-color: #d4d1b2;
}
Dhara1937
AllPro Expert
AllPro Expert
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

Re: adding a narrow border to the background

Post by Dhara1937 »

Thanks, John.
That did the trick.
Post Reply