Your theme seems to use ‘generic’ classes like ‘span-16’ and ‘span-8’, so it is not clear if changing those will affect only the main content and sidebar.
You can try adding these lines to the end of style.css:
.span-16 { width: 730px; }
.span-8 { width: 210px; }
but it may change something that you don’t want changed.
Also, the ‘SkyHiKids’ logo will need to be resized as it overflows the smaller sidebar.
so I added the codes to the end, check out how it looks like.
It seems to have moved the contents on the page I just wanted it to stay in the “white” part of the page and just make the sidebar a little smaller and where the posts go, a little bigger
is there a way I can do that?
I really appreciate all the help!
Please explain. The area for the posts is .span-16, and the area for the sidebar is .span-8. Both of those changed as you said you wanted.
Unfortunately, the faint grey line that used to separate the content from the sidebar is in a background image, so that didn’t move.
I think you might be stuck with the original sizes unless you can change that background.
Yea the faint grey lines, is there a way I can remove them and just have a blank white background?
Also the magnifying glass has moved down form the search box.
Or maybe if you know of a code for the layout I am trying to accomplish, I can just remove the current one and add the new one?
You can remove the grey lines with this:
#contentwrap { background: none; }
The magnifying glass can be moved up with this:
#s {
float: left;
width: 150px;
}
The line ‘Abi Photography on facebook’ can’t be fixed with CSS as far as I can tell. If you can edit the line, maybe it will let you put in a break, like this:
Abi Photography<br />on facebook
You are the best! thank you so much!! I really appreciate all the help!
messed around with the sizes a bit, but it worked out really nicely!
For the facebook thing, here is the code for it:
<br/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/abiphotographyy" data-width="240" data-show-faces="false" data-stream="false" data-header="false"></div>
<br/>
It didn’t have the “Abi Photography on Facebook” written out but it did have a width, so I just changed that and it worked out good, even though the “like” button is a little cropped off, I guess I can live with that.
A quick question, I know I am probably starting to get annoying, but I am barely starting out and learning this coding stuff, please bare with me /:
How can I center out the Ads? like the ‘SkyHiKids’ and is it possible to add a dashed line to separate the sidebar form the other side, like where the blog posts are?
Also if there is anything that you think could be fixed please let me know.
Thank you again!
For your line to separate the sidebar, change your span-16 to this:
.span-16 {
border-right: 4px solid #EEF3F6;
width: 696px;
}
I was trying to play around with the sidebar, but you were apparently working on it at the same time, so I will wait and try later.
