Support » Theme: Customizr » Side Bar color and Translucency options

  • Resolved Stephen Myall


    I want to add a hint of a specific color to my sidebars. I have discovered how to change the sidebar color in other questions but not with translucency. This is my site and i am using a child of customizr. I am new to this theme and new to CSS

    The color I want is #3399ff but with an opacity value of only 10%

    I apologize if this is a simple question but I genuinely could find an answer
    Best wishes

Viewing 11 replies - 1 through 11 (of 11 total)
  • Try this:

    .tc-sidebar {
      background-color: rgba(51, 153, 255, 0.1);

    You can add .left and/or .right if not needed on both sidebars.

    This is exactly what I wanted, thank you very much. I am new on this site also, how do I give you credit?

    Also, I am not a web designer my SME is in the content. Changing this color has highlighted something else. The text on the sidebars is tight to the edge. How do I resolve this (I think its called padding”)?

    I know this is subjective but in your opinion do the sidebars need a thin border (slightly darker than the background color)?

    Do I need to mark this as resolved and add my new queries in a seperate post

    The Forum is voluntary so your thanks are well-received. As @nikeo has put the effort into building the Theme, you could make a donation to him – link.

    I agree about the padding. So try:

    .tc-sidebar {
      background-color: rgba(51, 153, 255, 0.1);
      padding: 10px;
      width: 20%;

    Add border: 1px solid blue (change blue to whatever #nnnnnn code you want.

    I had to set the width to stop the right sidebar moving. You’ll now need to adjust the Vimeo frame to a smaller size or maybe move it elsewhere.

    Is there a way to reduce the width of the text and title blocks in the sidebar while keeping the element width unchanged? When a sidebar background colour is applied, the width change breaks the alignment with the right edge of a slider.

    I’ve never used it, but try letter-spacing?

    I added the code as suggested by rdellconsulting (ref: padding)but I dont think it resolved anything. I am delighted with the color of the sidebar though.

    Chappie: If changing the width of text blocks is an option I am willing to give it a go with one provision. My titles are quite long and I wouldnt want any of them wrapping to a third line.

    I am open to the idea of having one sidebar and making it wider if that solves the issue.

    I’ll give letter-spacing a go, Dave but I will be pleasantly surprised if it affects line length. What I think I’m looking for is a small indent both left and right to bring the text away from the sidebar boundary on both sides (if a coloured sidebar background) or left side only if no background colour.

    @stephen Myall – I too would like the option of a wider sidebar…as long as the text could be indented.

    I have read all the links above. My CSS skills are nil.

    Before i start thinking of wider sider bars and letter spacing I have holistic issues with my post excerpts (I have identified these in another question here). I have spent some time today researching what my options are but Im not confident enough yet of making the changes I want or need. Its a learning curve and I may have bit off more than I can chew with CSS. I also tried some plugins with disasterous effects to resolve and have featured images showing where I dont have any in the post.
    I love this theme but Im thinking of reverting to weaver 2. Hopefully I will get my other question resolved as that will give me more options

    I am marking this as resolved as the original question is concluded about color of the sidebar. I added a new question to the thread that I will ask from another angle in a new question. Thanks for your support during my inductioin to customizr. I have learned so much

    Keep at it. Once you get the hang of it, you’ll find CSS easy 95% of the time. But always something new to learn.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Side Bar color and Translucency options’ is closed to new replies.