Side Bar color and Translucency options
-
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 http://www.reboot2elementary.com 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
Stephen
-
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 optionsI 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.
- The topic ‘Side Bar color and Translucency options’ is closed to new replies.