Page 1 of 1

adding a narrow border to the background

Posted: Mon Oct 30, 2017 1:43 pm
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

Re: adding a narrow border to the background

Posted: Mon Oct 30, 2017 2:07 pm
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!

Re: adding a narrow border to the background

Posted: Wed Nov 01, 2017 7:50 pm
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

Re: adding a narrow border to the background

Posted: Wed Nov 01, 2017 8:13 pm
by Dhara1937
Okay, I worked it out.
It was pretty simple, after all!
The W3School info was the key element.
Thanks for your help.

Re: adding a narrow border to the background

Posted: Thu Nov 02, 2017 9:16 am
by JohnB
Awesome! Glad you got it worked out!

Re: adding a narrow border to the background

Posted: Fri Nov 03, 2017 6:25 am
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!

Re: adding a narrow border to the background

Posted: Fri Nov 03, 2017 9:13 am
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.

Re: adding a narrow border to the background

Posted: Fri Nov 03, 2017 2:40 pm
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!

Re: adding a narrow border to the background

Posted: Fri Nov 03, 2017 4:28 pm
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;
}

Re: adding a narrow border to the background

Posted: Tue Nov 07, 2017 10:37 am
by Dhara1937
Thanks, John.
That did the trick.