WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Thirteen Sidebar Overlapping Footer (13 posts)

  1. seattlesurpher
    Member
    Posted 11 months ago #

    Hi there,

    I've searched through the forums here and can't find any specific code to adjust the height on the sidebar for the Twenty Thirteen theme. I realize this is part of the the design, but I'd rather not have the sidebar (showing the Secondary Widget Area content) overlap the footer like it is. It seems like a simple fix, but I've been spending a ton of time scanning the forums and racking my brain thinking of a way to prevent this from happening. I'd just like to the capability of specifying the height I want or forcing the footer area to go below the sidebar content.

    Here's a link to the page I'm trying to fix: http://thescotchpine.com/support/

    Side note: I installed a plugin I found out about in one of the forums that allows me to display the sidebar content on whatever page I want (this was a huge time saver as I was going to try and figure out how to create a custom template so it wouldn't show on the home page). I'm using a plugin called Content Aware Sidebars.

    Anyway, any help would be greatly appreciated. And, if it just doesn't look like there's an easy CSS or .PHP code fix...we'll either live with the sidebar overlapping the footer as is or just do away with the sidebar altogether and place that info in the main content section. Just trying to customize this cool WordPress theme a little ;-)

    Thanks,
    -Josh

  2. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    You need to use a child theme to make any modifications to the default theme - otherwise your changes will all be lost when WP is updated.

    http://codex.wordpress.org/Child_Themes

    It's also imperative to have an unmodified default theme for troubleshooting purposes.

  3. Jose Castaneda
    Member
    Posted 11 months ago #

    What's really funny this was an issue that was brought up while in development. If anything I would really suggest that you try using the 2012 theme and go from there. They are fairly close in layout but the sidebar won't extend well into the footer.

  4. seattlesurpher
    Member
    Posted 11 months ago #

    WPyogi - I just followed the instructions you linked to for creating a 'Child Theme' and I believe I've successfully created the child theme for the site.

    Let me know if there's any info you can give me that would help my issue with the sidebar overlapping the footer.

    Thanks.

    Jose - Thanks for the tip - I may switch to Twenty Twelve, but I'm just trying to see if I can work it out with this theme. As I mentioned in my post above I'm happy to just bag the whole sidebar thing and take that content and put it in the main column. Switching to Twenty Twelve is a good idea though...that's what I run my personal website (http://www.joshrawlings.com/) on.

    Thanks guys,
    -Josh

  5. Jesin A
    Member
    Posted 11 months ago #

    Add the following CSS code to the style.css of your child theme

    #main {
      margin: 0 auto;
      min-height: 2950px;
      width: 1000px;
    }

    You'll have to modify the min-height value if you add or remove widgets in the sidebar.

    You have an inline CSS code on the footer, remove that

    <footer role="contentinfo" class="site-footer" id="colophon" style="margin-top: 1673px;">

  6. seattlesurpher
    Member
    Posted 11 months ago #

    Jesin - thanks for the code, but ideally I'm looking for something that will tell the sidebar widget container to tell the footer container to go directly below it. It seems like it should be a simple fix, but I'm still scratching my head as to how to do it. I like your code because it provides a workaround to add extra height to a page based on how much room you need in the sidebar - but...then it forces the footer way down every page and makes each page very tall.

    That said, I found a workaround for myself...

    Looking at the CSS with Firebug in FireFox I was able to find the line where the color of the sidebar widget area was defined. I discovered it was using code for RGBA color. Well - messing around with it I realized the last number in the color code informed what level transparency the color should be. I made that number 1 (which I believe means no transparency at all) and now it's a solid color making the text much easier to read when overlapping the footer section. I'm pleased with this even though it's not exactly what I wanted. The end result looks like this:

    http://thescotchpine.com/support/

    And here's the CSS code I used on my child theme:

    /* Sidebar Widget */

    .widget {
    background-color: rgba(241, 241, 241, 1);
    font-size: 14px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    margin: 0 0 24px;
    padding: 20px;
    word-wrap: break-word;
    }

    If anyone discovers how to inform the sidebar container to NOT overlap the footer, please let me know, but at this time I'm happy with the alternate fix I came up with.

    Thanks,
    -Josh

  7. Jose Castaneda
    Member
    Posted 11 months ago #

    Do you need it for just that one page? If so, then you could ultimately target that page with body_class

  8. andym
    Member
    Posted 11 months ago #

    The position of the footer is determined by the main content. The sidebar is absolutely positioned so exerts no influence over the rest of the page. Thus if the sidebar is taller than the main content it will overlap (and go beyond) the footer. Setting a minimum height for the main content greater than the height of the sidebar is one solution. You could use javascript to dynamically calculate and apply this (not for small screens which display a single column!!)
    Looking at your page the difference in height is too great for a good looking solution - I suggest you re-arrange the page layout or choose a different theme!

  9. seattlesurpher
    Member
    Posted 11 months ago #

    Andym - Thanks for your input.

    I'm happy with how things are now adjusting the transparency of the sidebar. With my lack of Java Script and overall coding knowledge - I think it's safe to just lay this issue to rest. I'm going to mark this topic as resolved.

    Looks like I'll have a fun project later learning how to dive deeper into the code and customize this theme more down the road -- or create my own..there's a novel idea!

    Thanks all,
    -Josh

  10. seattlesurpher
    Member
    Posted 11 months ago #

    Whoops - forgot to check the box.

  11. Manoj Karmocha
    Member
    Posted 8 months ago #

    Hi All,

    I am using Twentythirteen theme, there is an inline CSS code on the footer which when viewed through firebug shows something like this...

    <footer role="contentinfo" class="site-footer" id="colophon" style="margin-top: 1673px;">

    I tried searching pages in twentythirteen theme but, all my effort in vein, I tried every tactic to remove this inline style but i am not getting the page.

    Can please anybody help me out with this issue. Any help will be appreciated.

    Thanks All,
    Manoj

  12. Manoj Karmocha
    Member
    Posted 8 months ago #

    Hi seattlesurpher, remove the class called "sidebar-container" from sidebar.php, because in twentythirteen default sidebar is having position absolute.

  13. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    @Manoj Karmocha - modifying theme files is not a good idea- all of your changes will be lost when WP is updated. Please start a new thread if you need help.

Reply

You must log in to post.

About this Topic