right sidebar 320px at least & 600px post images

Discussion in 'NomNom Theme' started by CarolineG69, Jul 8, 2012.

  1. CarolineG69

    CarolineG69 New Member

    Hi,

    I love the NomNom theme, comes with great features.
    Only trouble I'm having, and what makes me not use it, is the fact that I need a sidebar that can show 300x250 ads and images in the posts that are 600px wide.
    I'm a beautyblogger, and those are the settings that are best for showing product images and widgets in the sidebar.
    Could you help me achieve that?
    Any help would be greatly appreciated.

    Thanks in advance,
    Caroline
     
  2. Zeaks

    Zeaks Author Staff Member

  3. CarolineG69

    CarolineG69 New Member

    Hi Zeaks,
    I'm trying to ad my code to the custum css section but it's not picking it up...

    Thanks for the help, I just got NomNom 2.0. Just to support a little :D
     
  4. Zeaks

    Zeaks Author Staff Member

    Hi Caroline,

    Twenty Eleven and NomNom both use % not px to determine the width of the sidebars and layout. I would suggest (if using a 2 column layout) to use the one of the 2 layouts with less padding in Appearance > Theme Options, then modifying that so your ads fit.

    If you want me to take a look, activate your ad in the sidebar, and send me your URL and I'll try and work out the proper CSS with firebug for you.
     
  5. CarolineG69

    CarolineG69 New Member

  6. Hozey

    Hozey New Member

    Changing the widths of the left and right sidebars in NomNom 2 has been giving me fits. Zeaks, the info in the link, you mentioned above doesn't work in NomNom, which you pointed out to me in a private eMail. I've tried two different methods found here in the forums. This one gives the correct widths but the left margin is too far to the right.

    .three-column #page { max-width: 1000px;}
    .three-column #content {
    margin: 0 34% 0 15%; /*decreased margin to 15%*/
    width: 55%; /*increased */
    }
    .three-column #extra-sidebar {
    float: left;
    margin-left: -70%;
    position: relative;
    width: 15%; /*decreased*/
    }
    .three-column #secondary {
    float: right;
    margin-right: 2.6%;
    width: 23%; /*increased width to 23%*/
    }
    This one gives the extra width to the right sidebar, but doesn't decrease the left sidebar and the outside margins are too wide.
    .three-column #primary {
    float: left;
    margin: 0 -27.6% 0 0;
    width: 100%;
    }
    .three-column #content {
    margin: 0 23% 0 24.6%;
    width: 41.4%;
    }
    .three-column #content {
    margin: 0 23% 0 24.6%;
    width: 43.4%;
    }
    .three-column #extra-sidebar {
    float: left;
    margin-left: -70%;
    position: relative;
    width: 20.8%;
    margin-right: 2.6%;
    }
    left too far right.jpg right side ok except margins.jpg right side ok except margins.jpg
    Please tell me what I'm doing wrong.
     
  7. Zeaks

    Zeaks Author Staff Member

    I can't tell how much you've increased and decreased your margins and widths by looking at this without comparing it to the original code and trying it myself.
    Going by your screenshots it looks like the content needs to be moved over in one, and the right margin decreased in another (or the right sidebar width increased)

    It would really help not just me, but if in the future you wanted to make adjustments, if where you made the comments /* increased */ you added by how much or what the original number was since other sections will need to be increased or decreased by the same amount.

    Link your site and I'll take a look, using FireBug it shouldn't be hard to fix. If you can't link your site, send me a copy of your current CSS to my email.
     
  8. Hozey

    Hozey New Member

    Unfortunately I'm working on this on a local server. These two examples were from other threads on this board. I just plugged them in to custom css. The first example gives me exactly what I need. The original code was how you had them set in NomNom

    /* Three Column layout - left and right sidebars
    -------------------------------------------------- */
    .three-column #page { max-width: 1000px;}
    .three-column #primary {
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
    }
    .three-column #content {
    margin: 0 34% 0 26.4%;
    width: 46.4%;
    }
    .three-column #secondary {
    float: right;
    margin-right: 2.6%;
    width: 20.8%;
    }
    .three-column #extra-sidebar{
    position:relative;
    float: left;
    width: 20.8%;
    margin-left: -70%;
    }

    How this additional info will help, The comments in/*--*/ are not mine; they're from the example I copies.
     
  9. Zeaks

    Zeaks Author Staff Member

    Yeah I figured the original code was from NomNom, but it saves me from opening the CSS file and comparing it in a text editor and figuring out what was changed.
    I received your email though I'll try and take a look in the morning.
     

Share This Page