Sidebar border

Hi,
Please go through the Admin Dashboard > Appearance > Editor > Here you will get the style.css file by default to edit. Here paste the given below of code at end of style.css file and update. Hope it will help you. Let me know the feedback.

#sidebar {
border-left: 1px solid blue !important;
padding-left: 5px !important;
}

Thanks
Mohammad

Hi,
Try this code. I adjusted left margin and added some left padding. Without tweaking the margin your side bar gets thrown below the content. You can add this in the customiser > additional CSS if you prefer not to edit your style.css file.

Try and avoid using the !important tag if at all possible as it can have unintended impact elsewhere in the css cascade:

#sidebar {
float: right;
margin: 35px 0 0 10px;
padding-left: 10px;
width: 290px;
border-left: 1px solid blue;
}

I hope this works for you
HUgues

• This reply was modified 7 years, 8 months ago by Hugues. Reason: changed colour to blue

Thank you Hugues and mdshak – I have tried both solutions and they purshed my sidebar down to the end of the content on the page – not good.

I’d like to update my objective.

Since I have a light grey background on the whole page, I’d like to make my sidebar background colour about 2-3 shades Lighter so that it stands out without borders as such, and without being pushed down the page.

I would be most grateful for a custom CSS that would do that ??

many thanks !

Hi,
My code is perfect and tested so please keep it at style.css and inform me. I will check live and resolve it.
Thanks
Mohammad

@magicpowers, Just be aware that when the theme is updated, any modifications made to the theme’s files will be erased.

Hi,
I would suggest to use the child theme first to make any changes. Or you may use this plugin https://www.ads-software.com/plugins/simple-custom-css/ for custom css. It will prevent the code from theme update.
Thanks
Mohammad

thank you all for your replies.

as I said in my previous post, I have decided to change the background colour of the sidebar, rather than adding a vertical line as it doesn’t have the effect I want.

I will not muck about with the theme (it goes beyond my level of web coding knowledge), and will work only with custom css (safe!). If this can’t be done by custom css, I will get a pro to fix it for me.

many thanks

Hi,
Try this code it should work – just replace the “blue” value with whatever hex colour you’d like, I tweaks padding and margins too:

#sidebar {
float: right;
margin: 20px 0 0 10px;
width: 290px;
background-color: blue;
padding: 10px 10px 0 10px;
}

I would recommend adding the CSS in the customiser as it’s a simple change, here:

View post on imgur.com

I hope this helps you.
Hugues

Hi Hugues

thank you – however this custom css has made my ENTIRE sidebar disappear…..! so can’t use it.