WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Naturefox theme Expanding text to full content box (5 posts)

  1. clhendricks
    Member
    Posted 7 months ago #

    Hi there,

    I'm not a CSS or PHP whiz, but I can figure enough out to be dangerous. I've been able to edit my theme template to prevent the sidebar from showing up on one page (http://www.troop416bsa.org/calendar/) but I can't figure out how to stretch the content (an AJAX calendar plugin) all the way across the content box.

    I am assuming this is either something I would need to add to the style.css for the theme, or make changes to the page.php for the theme.

    I would appreciate any ideas.

    Thanks!

  2. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    Looks like the width is constrained by this CSS:

    .main {
        float: left;
        padding: 0 40px 0 20px;
        width: 603px;
    }

    If you removed the sidebar, you typically have to modify the CSS to adjust for that missing element.

    BTW, are you aware that any changes you make to theme files will be overwritten and lost when the theme is updated? It's generally recommended to modify themes using a child theme -

    http://codex.wordpress.org/Child_Themes

  3. clhendricks
    Member
    Posted 7 months ago #

    Ah, I missed that. I was looking at the cbox and content elements, which were 952px. Thank you for pointing that out.

    So then if I want to make this one page use a different width, I could make a copy the main class, using the width I want, and then change the class that is called. Sound right?

    I was kind of aware of the child themes but was going to be lazy and not update the theme. I guess I should do it the right way. ;-)

    Thanks so much for the quick reply!!

  4. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    If you don't update the theme, you may run into compatibility or security issues - not a good approach.

    You can't easily change the class. The way to target one page with CSS is to use the page specific class (look at the generated HTML in the body tag) in the CSS selector - so in this case something like:

    body.page-id-13 .main {
       width: 900px;
    }

    Looks like you may also need to adjust the calendar CSS after adding the above.

    But yes, I'd strongly recommend you move your changes to a child theme.

  5. clhendricks
    Member
    Posted 7 months ago #

    I did get it figured out. I essentially copied the .main class entries into the child, called the class something else, and then adjusted the width.

    Then where the class is called in the header, had an if statement echo out the appropriate class for the page I needed a different width, otherwise I used the standard class.

    I did push everything into a child template too. I could understand why to do it, and it wasn't complicated.

    Thanks again for your help!

Reply

You must log in to post.

About this Topic