Sidebar Box making
-
Hi there. I am curently a new user of WordPress and CSS.
On my site ,I have Rara Clean Theme installed. On my right side, the sidebar is not integrated in a box , as the one in the center,as I would like it to be.
Thing is that I don’t know where(in what file and where in it), and what to take, specifically to edit, copy and paste the code for the sidebar to be in a box.Thank you!
-
Hey manubmxnsb !
Welcome to WordPress then π
Will do my best here to succeed with your WordPress site
Ok here we go. Go to your dashboard -> appearance -> editor and open the style.css file and paste the following there#sidebar { background: white; padding: 20px; }and the result will be http://imgur.com/jWSwasc
if you want every section alone of the sidebar
do the same but paste the following code
.widget { margin: 0 0 1.5em; background: white; padding: 20px; }and the result will be http://imgur.com/uHgjDuA
let me know how it goes and I will be happy to provide you more help π
Cheers
Hey codeManiac. Thank you for your help! It works! π
I though i have to put it somewhere specific in the code , but it seems to work perfectly.
I have another thing. how can I make my header, upside bar a static one , like a sticky one. Ex. facebook.comThere are many ways but let’s see if the simplest and easiest one will work for you :
try this plugin : Sticky Menu
It works for another theme of mine(although not as expected because it is not constant, it only shows after a bit more scrolling and in other color), but unfortunately not for Rara Clean Theme ,which I’m using at the moment.
hmm ok then , see your style.css file?
look for this section of code
#header { width: 100%; background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14); position: relative; }simply change the relative value with fixed
then add some padding to #main by pasting the following :
#main {
padding-top: 90px;
}90px seemed good value to me, ofc you can change it π
Cheers !
Seems to work for the Rara Clean Theme, although tested on the other theme (ironic) , is not working. I have let that theme on for you to see. It’s the Sparkling Theme. Any idea of what might be the problem?
Every theme has its own classes and IDs , a solution that works on 1 may not work on the other even because of a simple reason which is difference in class names.
The 2nd theme uses bootstrap framework and in order to get a fixed top header open header.php and look for
<nav class="navbar navbar-default" role="navigation">then add navbar-fixed-top class to make it look as follow
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">and in your style.css add
site-content { padding-top: 50px; }Seems to be working! Thank you! π
Where did you learn all those stuffs? I would like to be able , in time, to modify and edit the code on my own.
If I have any further questions, could I ask you ?Although, the header becomes white on scrolling if the comment section is bigger, as i tested now. How do I fix this?
http://mysedart.comlu.comI do this everyday as work am a freelancer and I learnt that with hard work :-). You can learn too , its easy but takes time and practice :).
The header problem can be solved with the following in style.css.myfixed { background : #363636; }and yeah feel free to ask. I would be happy to help you succeed with your online presence π
Oh, okay,well I admire you for that! It would have taken me days to realise what I have to do here π
Seems that it is not fixing it, the colour remains the same. Link Hereok just add !important which means it becomes like that
.myfixed { background : #363636 !important; }and here is the result http://imgur.com/EIZVWkI π
Seems like it’s not working,even with that ..hmm
Do you still have the sticky menu plugin on the website we r dealing with now? if so uninstall it because this 2nd case has a completely different approach from the 1st one of the plugin.
remove it and see if it works now only with the css codeYep. Without the sticky menu it is working π Thank you so much!
The topic ‘Sidebar Box making’ is closed to new replies.