Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adjusting content and sidebar widths on News theme
- This topic has 9 replies, 3 voices, and was last updated 10 years, 9 months ago by Metamorpheus.
-
AuthorPosts
-
July 18, 2013 at 8:00 am #51298MetamorpheusMember
Hi all,
I recently purchased the Genesis framework and I'm generally finding the code quite easy to tweak.
However, I'm having trouble adjusting the widths of the content and the single, primary sidebar on my website (which uses the News theme, and is linked in my signature).
I can change the sidebar width from 305px to 250px (which is roughly the size reduction I'm seeking)...
.sidebar {
display: inline;
line-height: 1.5;
width: 250px;... but, of course, the content width and the border image require relative adjustments.
Any ideas?
Thanks!July 18, 2013 at 11:30 am #51324StewartMemberHi,
Ok first you will need to adjust the content css, open your style.css file and go to around line 806 and adjust the width of the following:
.content-sidebar #content, .sidebar-content #content { width: 580px; }
Next for the borders, they are actually a background image called inner-cs.png, which should be found in your child themes images folder. The corresponding css for the background image is the following on around line 637:
.content-sidebar #inner { background: url(images/inner-cs.png); }
Hope this helps
Stewart
WordPress Developer – Need help upgrading to Genesis 2.0? – My Blog
Follow me on TwitterJuly 18, 2013 at 5:39 pm #51371MetamorpheusMemberThanks for your swift reply, Stewart.
I adjusted the width of the content by editing this code:
.content-sidebar #content, .sidebar-content #content { width: 580px; }
But the front page remains completely unaffected, since it is organized according to widgets (home top, home middle left, etc.). I'm guessing I'm going to have to change the width of each widget separately....
Also, I've located the corresponding CCS for the border image:
.content-sidebar #inner { background: url(images/inner-cs.png); }
But I'm not sure what to do with it. Adjusting it through the ways in which I am familiar (width, padding, margin) seems to move everything except the border itself, lol.
July 18, 2013 at 10:09 pm #51392AnitaKeymasterOn your background image you need to add this to all of the images marked cs, sc, ssc, css, scs..png. This will shift the background image over towards the middle. Keep in mind that there will be a little bit of a gap. Just change the number lower if you want it.
background: 40px;
Love coffee, chocolate and my Bella!
July 19, 2013 at 3:57 am #51412MetamorpheusMemberHi Anita,
Thanks for your response.
I'm interested in moving the sidebar border to the right to accommodate the increased size of the content.
Adding the CSS you suggested to the cs, sc etc. images only inversed the gray and white colors (so the content and widget backgrounds became gray rather than white, and the image borders became white rather than gray).
July 19, 2013 at 5:29 am #51417StewartMemberHi Metamorpheus,
If you have changed the values of your sidebar to 250px like you have suggested above, try replacing the inner-cs.png with this one that i have adjusted for you:
Please make a backup of your original first just incase anything goes wrong.
Stewart
WordPress Developer – Need help upgrading to Genesis 2.0? – My Blog
Follow me on TwitterJuly 21, 2013 at 2:47 pm #51750MetamorpheusMemberHi Stewart,
Thanks for the image. It works well, but there are so many other factors that need to be adjusted (including the other borders, which are now too short) that it's probably best if I hire someone to do it for me. 😀
July 21, 2013 at 3:52 pm #51755AnitaKeymasterI just edited this for another client. If you use the contact box on my site, I can email you the site I worked on.
Love coffee, chocolate and my Bella!
July 21, 2013 at 3:54 pm #51756AnitaKeymasterPart of the border is an image and part is an actual color.
Love coffee, chocolate and my Bella!
July 22, 2013 at 5:41 am #51821MetamorpheusMemberHi Anita,
Thanks for that. I've sent you a message.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.