Custom sidebar width in Prose Theme

Community Forums Forums Design Tips and Tricks Custom sidebar width in Prose Theme

This topic is: resolved

Tagged: , ,

This topic contains 17 replies, has 3 voices, and was last updated by  Ajitelev 12 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #44272

    kellytuohey
    Participant
    Post count: 8

    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

     

    http://www.wholeheartedmomtog.com
    #44327

    rfmeier
    Participant
    Post count: 596

    Kelly,

    You would have to make an adjustment to your css file. Since you are using the Content-Sidebar layout, you can adjust following css.

    [css]
    /* style.css */
    .content-sidebar #content,
    .sidebar-content #content {
    width: 590px; /* edit the width */
    }[/css]

    [css]
    .sidebar {
    display: inline;
    float: right;
    font-size: 14px;
    padding: 10px 0 0;
    width: 280px; /* edit the width */
    }[/css]

    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.


    #44417

    kellytuohey
    Participant
    Post count: 8

    Thank you! Ryan.  That worked perfectly!  I just had to remember to take the bracketed css stuff out…

    #44418

    rfmeier
    Participant
    Post count: 596

    You are welcome. Glad I could help.


    #45250

    kellytuohey
    Participant
    Post count: 8

    Hi 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

    #45256

    rfmeier
    Participant
    Post count: 596

    Kelly,

    Is this still happening? I checked different sizes with the browser and checked it on the phone and it looks just fine.


    #45268

    kellytuohey
    Participant
    Post count: 8

    Hi 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

     

    #45269

    kellytuohey
    Participant
    Post count: 8

    screen shot
    Trying that again…

    #45270

    rfmeier
    Participant
    Post count: 596

    Kelly,

    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?


    #45276

    kellytuohey
    Participant
    Post count: 8

    I 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:

    [css]
    /** 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 */
    }
    [/css]

    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!

    #45278

    rfmeier
    Participant
    Post count: 596

    Kelly,

    Is this how the css really is within your style.css file?

    [css]@import url(<a href="http://fonts.googleapis.com/css?family=Cardo&quot; rel="nofollow">http://fonts.googleapis.com/css?family=Cardo</a&gt;|Cabin:700);[/css]

    If so, that is most likely an issue.


    #45279

    kellytuohey
    Participant
    Post count: 8

    Hi Ryan,

    Yes, that is exactly the problem.  Now to figure out what I’ve done wrong in the custom font part…

    Thank you!

    Kelly

    #45280

    rfmeier
    Participant
    Post count: 596
    #45282

    rfmeier
    Participant
    Post count: 596

    Never mind. Its the message boards trying to filter the link.


    #45288

    kellytuohey
    Participant
    Post count: 8

    :)  No worries.  I noticed that too.  I’m off to do some research now!

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.