Education + Sensei Correct wrapper code for theme

Community Forums Forums Design Tips and Tricks Education + Sensei Correct wrapper code for theme

This topic is: not resolved

Tagged: ,

This topic contains 19 replies, has 6 voices, and was last updated by  Kellylise 3 months, 1 week ago.

Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #39905

    Susan
    Moderator
    Post count: 8962

    Terri – I didn’t see it as a slam on Woo; I felt it was appropriate to open it up so that the person who was assisting the original poster could get some insight into whether the issue had been resolved.

    Thanks for letting us know who assisted – it’s great to have referrals to resources who can help the StudioPress community.


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #39908

    Terri
    Participant
    Post count: 30

    Susan – I just don’t like saying negative things about anyone, or any product, that SP touts.  I’ve had a few folks from the Genesis/SP team offer solutions to this problem that also didn’t work.  David is, in my humble opinion, the Go To person for resolving Genesis issues, and especially for this one.

    #39915

    Anita
    Blocked
    Post count: 7712

    I tried to assist you Terri by asking to see the other files and setup since Sensei is a paid product and you need a product key to install it. The instructions were to add to the files structure that came inside the Sensei itself. I understand David provided you with a CSS fix but that wasn’t my goal. I was trying to do it the way of the instructions. David has helped me on one of my own projects as well as a lot of other more experienced Genesis developers.


    Web: http://cre8tivediva.com / Twitter: @thecre8tivediva

    #39918

    Terri
    Participant
    Post count: 30

    Yes; I know you did.  And I appreciated it.  As I mentioned, their instructions were useless…and pointless.

    I think I’ve been very fortunate over the years when it comes to All Things Genesis.  Very seldom, if ever, do I need any sort of fix.  Genesis — as well as all of  SP’s Child Themes — always seem to work without a hitch.  Unlike my personal experiences with WooStuff.

    #108799

    Kellylise
    Participant
    Post count: 385

    Genesis Magazine Pro/Genesis CSS from the WooThemes Sensei Forum Posted By Rob Cubbon:

    Sidebar dropping below content issue in Genesis Magazine Pro theme

    There’s a fix in the documentation for this issue of the sidebar dropping below content on the Sensei pages (Courses, Lessons, etc.) The fix (I can’t find it now) involves changing the /wrappers/wrapper-start.php and /wrappers/wrapper-end.php which seemed quite confusing at the time.

    Anyway, I found a nice CSS fix for this issue that will work on any theme with a quick identification of the correct selectors and declarations using Developer Tools.

    This how I did it with Magazine Pro theme.

    Go to a “normal” page like the home page here: http://learn.robcubbon.com/ go Cmd/Ctrl-Shift-I to get Developer Tools and select (with magnifying glass icon if you’re using Chrome) the content area. This shows the containing element’s style that gives it the proper width so it fits in with the sidebar and in Magazine Pro (and probably a lot of other Genesis themes) this is it:

    .content {
    float: right;
    width: 750px;
    }

    Now if you go to a Sensei course page, for example: http://learn.robcubbon.com/course/make-money-running-a-web-design-business/ and perform the same function with Developer Tools you won’t find the .content, you will find in it’s place a .col-left selector. So this is the containing div that Sensei puts in and needs to be styled in order to give the content area its proper width.

    .col-left {
    float: left;
    width: 750px;
    }

    All well and good. But it isn’t. Because Genesis Magazine Pro theme is responsive like all good themes should be, you have to add .col-left to the media queries everywhere .content is.

    Firstly, @media only screen and (max-width: 1139px) add .col-left to the .content declaration:

    .col-left , .content {
    width: 630px;
    }

    And secondly @media only screen and (max-width: 1023px) add .col-left to the .content declaration:

    .col-left ,
    .content,
    .content-sidebar-sidebar .content,
    .content-sidebar-sidebar .content-sidebar-wrap,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .home-middle .featured-content .entry,
    .sidebar-content-sidebar .content,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-primary,
    .sidebar-secondary,
    .sidebar-sidebar-content .content,
    .sidebar-sidebar-content .content-sidebar-wrap,
    .site-header .widget-area,
    .title-area {
    width: 100%;
    }

    … it looks complicated but it’s just three changes in the style.css of the Child Theme.

    I hope this helps somebody.

Viewing 5 posts - 16 through 20 (of 20 total)

You must be logged in to reply to this topic.