WordPress.org

Ready to get started?Download WordPress

Forums

Attitude
[resolved] Sidebar/ Content Width (20 posts)

  1. drive4corners
    Member
    Posted 9 months ago #

    Hi there,

    I was happy with this theme so far, but was curious how I could modify the theme slightly to widen my content area and either push the sidebar outward, or if I could slightly reduce the width of the bar.

    I think I found where the code is determining the width, but have not yet confirmed:

    /* Sidebar */
    #secondary {
    float: left;
    margin-left: 3.06%;
    width: 31.28%;
    }

    Is it as simple as changing the width value in my child theme??

    Thanks In Advance-- definitely contemplating the premium version Attitude Pro!

  2. Laura Hartwig
    Member
    Posted 9 months ago #

    Yes, that looks like the width of the sidebar, but you might have to also change the size of the main content area. Just give a link to your site if you need more help.

    Also, be sure to make changes through Custom CSS so your changes won't be overwritten with any updates!

  3. drive4corners
    Member
    Posted 9 months ago #

    Thanks for the response Laura,

    The website is:
    http://drive4corners.com/

    I added the following to Theme Options -> Custom CSS but have not noticed any changes on my main blog feed(homepage) or my post pages.

    #secondary {
     width: 21.28%;
     }
     #primary {
     width: 75.64%;
     }
     @media only screen and (max-width: 1078px) {
     #primary,
     #secondary {
     width: 100%;
     }
     }
  4. Laura Hartwig
    Member
    Posted 9 months ago #

    Hi,
    Please try refreshing your browser and look again. That is definitely affecting your site. To see what I mean, change that 75.64% to 25% and you will see a big change. It is affecting all the pages that I see.

    If it looks okay, please mark as resolved. Thanks!

  5. drive4corners
    Member
    Posted 9 months ago #

    Ok, I see what you mean, Laura.

    My intent was to increase the total width so that content width becomes closer to 1000pixels maximum as opposed to the current ~750pixels. Therefore, when the page is enlarged, my posts and such (mainly images) display larger - as opposed to so much blank whitespace.

    Maybe this has to do with the following parameter I found in functions.php?? What css code would I add to change this?

    $content_width = 700;

  6. Laura Hartwig
    Member
    Posted 9 months ago #

    Hi,
    Maybe I'm confused about what you want. Your total site width is 978px wide (for regular desktop displays). Is that what you want to change? Your content can't be 1000px if your total site is only 978. That is controlled by

    .container {
     width: 978px;
     margin: 0 auto;
    }

    After changing that, you can make your #primary and #secondary larger or smaller depending on what you want. Of course, it looks like you have most of your images cropped to around 670px, so if you want those to expand, you will have to put in larger images. Does that make sense?

  7. drive4corners
    Member
    Posted 9 months ago #

    You are correct, the goal is to widen the total container so content width is wider, (and now I know I can size the sidebar to the appropriate % that I want).

    I added your code from above with 1278px and am not getting a change.
    I apologize for the illiteracy, but does that section of code need to be nested below the #primary line?

    PS- I hope my browser cache isn't throwing me off again.

  8. Laura Hartwig
    Member
    Posted 9 months ago #

    My fault. Please try
    #container
    instead of
    .container

    no, it doesn't matter where it is in your Custom CSS.

  9. drive4corners
    Member
    Posted 9 months ago #

    Gotcha!

    Ok that worked, but now it looks like the content is spaced to the right starting at the same location as before. AKA what would be the left sidebar is pushing the content out towards the right.

    Any way to reduce this imaginary left-page whitespace?
    I am sticking to right sidebar only.

  10. Laura Hartwig
    Member
    Posted 9 months ago #

    Okay, let's try this:

    .container, #container {
      width: 1278px;
    }
  11. drive4corners
    Member
    Posted 9 months ago #

    That did something different.

    Now the content is is sized appropriately but the sidebar is extending past the main header (on the right side).

    Is there a margin value controlling this?

  12. Laura Hartwig
    Member
    Posted 9 months ago #

    Okay, this is pretty confusing because I don't see your .container at all and you have #container set to 1078px instead of the 1278px you talked about before. If you are really okay with it being a little smaller, perhaps try this:

    #container, .container {width: 1078px}

  13. drive4corners
    Member
    Posted 9 months ago #

    I tried it Laura, but it did not do what I was looking for.

    For now, it seems like the following is satisfactory, thanks for your help!

    #container {
     width: 1078px;
     margin: 0 auto;
    }
  14. drag0n70
    Member
    Posted 9 months ago #

    Laura,
    i see that you are a lot prepared.
    I need 1 thing.
    I need that the sidebar dosn't go down when the size of browser is 1024px (width). Now for this dimension of windows's browser the sidebar go down.
    It's possible to change something in attitude css for change this?

    Plese tell me how made this.
    Thank you!!

  15. Laura Hartwig
    Member
    Posted 9 months ago #

    Hi @drag0n70
    A link to your site would be helpful. Have you changed the size of the container, primary, or secondary? You do realize that the theme is responsive and the sidebar is supposed to drop down on smaller screens, right? Send me the link to your site and I can figure out what changes you need to make.

  16. drag0n70
    Member
    Posted 9 months ago #

    The problema is simple.

    I set narrow layout.

    The attitude theme resize its width below certain thresholds.
    For example under 1079px resize le with a lot and the sidebar go down.
    Why 1079px and not 1023px or smaller?

    So for those who still have the screen set to 1024px (a lot of peaple) can't see the sidebar at the side but these sidebar moves under at the bottom of the page.

    It's possible to change the thresold of 1079px to another more smaller that 1024px?

    There is other solution to visualize the sidebar however?

  17. Laura Hartwig
    Member
    Posted 9 months ago #

    Hi @drag0n70
    You need to find this line in your style.css file and change it to the width you want:

    /* =Responsive Structure
    ----------------------------------------------- */
    /* All Tablet Portrait size smaller than standard 1079 (devices and browsers) */
    @media only screen and (max-width: 1078px) {

    If you don't want this to be overwritten if you update your theme, you will need to use a Custom CSS plugin and copy and paste that whole section into it with your new width size.

    Hope this helps!

  18. vishalkambli
    Member
    Posted 4 months ago #

    Hi Laura, Thanks a million. I was struggling with the same problem as mentioned by drag0n70 above and your suggestion has done the job for me.
    BTW, any idea on how to create custom pages from existing ones?
    I am trying to create a new custom page/template without sidebar (full width, no sidebars), and it should not display the page title. I want to use it for a custom homepage i am playing around with.
    Any help will be highly appreciated ;-)

  19. Laura Hartwig
    Member
    Posted 4 months ago #

    Glad I could help! As to custom page templates, it can be a little tricky, but I basically copy the page.php file and change the template name as well as the file name to whatever is appropriate, ie custom-page.php. This file will have to be uploaded through ftp/cpanel. Generally to remove the sidebar, you take out the line that is something like

    <?php get_sidebar(); ?>

    NOTE:BACK UP YOUR FILES. Changes to php files can take down your whole site, so you need to be careful and have a backup.

    I'd have to see the page.php code to see if you can remove the title from the template or not. It may be a line something like this that needs to be removed:

    <?php the_title(); ?>

  20. vishalkambli
    Member
    Posted 4 months ago #

    Thanks Laura. I am able to do the changes easily to other themes but this Attitude theme is proving to be a little tricky. And yes, I ALWAYS backup my files before making any changes.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.