Support » Fixing WordPress » Sidebar border

  • [ Moderator note: moved to Fixing WordPress. ]

    I’m using the Midnightcity theme (unfortunately it is no longer supported by the developer who was brilliant with providing assistance)

    I would like to insert a thin yet clearly visible vertical blue line separating the right sidebar from the main content.

    Could someone provide a custom CSS for this please…?

    http://www.quantumliving.com.au

    thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • 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 2 years, 7 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

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @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://wordpress.org/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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sidebar border’ is closed to new replies.