Community Forums › Forums › Archived Forums › Design Tips and Tricks › Custom sidebar width in Prose Theme
- This topic has 17 replies, 3 voices, and was last updated 10 years, 8 months ago by Ajitelev.
-
AuthorPosts
-
June 6, 2013 at 12:58 am #44272kellytuoheyMember
Total newbie to Genesis but I vaguely understand css, php and hooks. I am using the prose theme and have done a bit of googling but can't seem to find an answer. Could someone please show me how to change my sidebar width? I realize this probably entails changing custom code somehow...
Thanks
Kelly
Bare bones website: http://www.wholeheartedmomtog.com
June 6, 2013 at 9:29 am #44327rfmeierMemberKelly,
You would have to make an adjustment to your css file. Since you are using the Content-Sidebar layout, you can adjust following css.
/* style.css */ .content-sidebar #content, .sidebar-content #content { width: 590px; /* edit the width */ }
.sidebar { display: inline; float: right; font-size: 14px; padding: 10px 0 0; width: 280px; /* edit the width */ }
You will have to adjust the #content and #sidebar sizes so they work well together in the layout. Just remember if you will be using more sidebar layouts to consider editing those too.
I hope this will help or point you in the right direction.
June 6, 2013 at 2:35 pm #44417kellytuoheyMemberThank you! Ryan. That worked perfectly! I just had to remember to take the bracketed css stuff out...
June 6, 2013 at 2:36 pm #44418rfmeierMemberJune 11, 2013 at 8:46 am #45250kellytuoheyMemberHi Ryan,
Not sure if you are still checking up on this, but I just realized that setting that custom sidebar width has made my entire site non-responsive. It can't be viewed on a mobile device. 🙁 Any work around that you know of?
Thanks!
Kelly
June 11, 2013 at 9:00 am #45256rfmeierMemberKelly,
Is this still happening? I checked different sizes with the browser and checked it on the phone and it looks just fine.
June 11, 2013 at 9:46 am #45268kellytuoheyMemberHi Ryan,
I just checked on my phone - iPhone 4s, using the default Safari browser and it looks like this:
<a href="http://www.wholeheartedmomtog.com/wp-content/uploads/2013/06/image.png">screen shot</a>
It's all zoomed in and I can't pinch it out!
Hopefully that link works...
Kelly
June 11, 2013 at 9:47 am #45269kellytuoheyMemberscreen shot
Trying that again...June 11, 2013 at 9:49 am #45270rfmeierMemberKelly,
I got the screenshot. That is odd. Changing the width should not have affected the mobile view because the media query will override the browser version.
Did you happen to append the new widths to the bottom of the style.css file?
June 11, 2013 at 9:56 am #45276kellytuoheyMemberI added them in the custom code box only. I also am trying to add in custom google fonts and change the h1, h2, h3 styles, so I the code in there to do that (which I copied from my old site). The @import currently isn't working (boo!).
The code looks like this:
/** Do not remove this line. Edit CSS below. */ @import url(http://fonts.googleapis.com/css?family=Cardo|Cabin:700); /* Customize the "Heading 1" text in pages and posts: */ h1 { font-family: "Cabin:700", sans-serif; color: #29598a; font-size:24px; font-weight:bold; line-height:105%; } /* Customize the "Heading 2" text in pages and posts: */ h2 { font-family: "Cabin:700", sans-serif; color: #29598a; font-size:20px; font-weight:bold; line-height:105%; } /* Customize the "Heading 3" text in pages and posts: */ { font-family: "Cardo", sans-serif; color: #00000; font-size:16px; font-weight:bold; line-height:105%; text-Transform:none;} /* style.css */ .content-sidebar #content, .sidebar-content #content { width: 670px; /* edit the width */ } .sidebar { display: inline; float: right; font-size: 14px; padding: 10px 0 0; width: 200px; /* edit the width */ }
What's weird is that the little "reader" button comes up in my address bar on my phone. When I click on it, I get the mobile version WITH the correct fonts. Maybe it has something to do with the custom fonts and not the sidebar customization?
I will try it without the font customization but it's odd that it works on your phone, but not mine!
June 11, 2013 at 9:58 am #45278rfmeierMemberKelly,
Is this how the css really is within your style.css file?
@import url(<a href="http://fonts.googleapis.com/css?family=Cardo" rel="nofollow">http://fonts.googleapis.com/css?family=Cardo</a>|Cabin:700);
If so, that is most likely an issue.
June 11, 2013 at 9:58 am #45279kellytuoheyMemberHi Ryan,
Yes, that is exactly the problem. Now to figure out what I've done wrong in the custom font part...
Thank you!
Kelly
June 11, 2013 at 9:59 am #45280rfmeierMemberKelly,
Try this instead;
@import url(http://fonts.googleapis.com/css?family=Cabin:700);
June 11, 2013 at 10:00 am #45282rfmeierMemberJune 11, 2013 at 10:11 am #45288kellytuoheyMember🙂 No worries. I noticed that too. I'm off to do some research now!
June 11, 2013 at 10:12 am #45290rfmeierMemberKelly,
For giggles, try clearing out your cache in Safari. I was able to test on another device and it still looks fine.
June 11, 2013 at 10:19 am #45291kellytuoheyMemberI tried clearing my cache on my phone, but it didn't work. So weird....
I'll just leave the custom fonts off for now.
August 25, 2013 at 3:38 pm #58775AjitelevMemberHello rfmeier,
i just tried the code for my site, the sidebar and content width nothing change,
have prose theme and site link http://bloggingsaga.com -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.