WordPress.org

Ready to get started?Download WordPress

Forums

Oxygen
Full Width Post for Oxygen Theme (13 posts)

  1. @katklopp
    Member
    Posted 9 months ago #

    I am trying to keep the left sidebar, but remove the right margin/column so my posts can be wider. I am not using the right column for everything and right now it is making my photos too narrow, as you can see here:

    http://hyperreal.us/category/music/

    How can I widen the posts and keep the left sidebar?

  2. RoamingPro
    Member
    Posted 9 months ago #

    To start with, I would create a child-theme.


    http://codex.wordpress.org/Child_Themes

    Then start playing with the styling. The #content id is currently set to 62.667%, if you change that to 100%, your content area extends all the way to the right, but other elements shift, so you'll have to also look at re-styling class "entry-header" "byline" , etc.

  3. @katklopp
    Member
    Posted 9 months ago #

    Thanks @RoamingPro

    Here's a dumb follow-up question. When creating my child theme, do I retain the author, author url, and theme url from the original oxygen theme?

    Like this:

    Theme URI: http://alienwp.com/oxygen-child/
    Author: AlienWP
    Author URI: http://alienwp.com

  4. @katklopp
    Member
    Posted 9 months ago #

    Nevermind I figured that out. Now I just need to figure out where and how to change the #content id to 100%. Sorry, new at this!

  5. RoamingPro
    Member
    Posted 9 months ago #

    It's a little technical, and you need to know some about css. Review this page & some great links at the end of the article:
    WordPress-CSS

    You can check out these tutorials:
    A beginners guide to customizing a WordPress site

    But basically you create a style.css for your child theme, import the original css file (convered in the Child_Themes codex).

    Then any element you want to modify, you list in your new child style.css file, and modify that style:

    Regarding your content width: The original style for the #content id looks like this

    #content {
      float: left;
      width: 62.66666666666667%;
      margin: 0 0 30px 0;
    }

    to change the width to 100%, you would place this in your child theme:

    #content {
      width: 100%;
    }

    Again, this is just a start, lots of trial and error before things fall into place and you get comfortable with custom css styles. Good Luck!!

  6. @katklopp
    Member
    Posted 9 months ago #

    When I just change the #content width to 100%, it makes the post header bar and text full width, but not the photos, which are my main concern. I'm assuming I need to locate that line in the code and change it to 100% too? Or should I adjust the pixel dimensions. I opened style.css from my parent theme in dw and the #content is currently like this:

    #content {
    	float: left;
    	width: 62.66666666666667%;	/* 470 / 750 = 0.6266666666666667 */
    	margin: 0 0 30px 0;
    }

    am I on the right track? Think I'm looking at the wrong lines of code to change the photo width?

  7. @katklopp
    Member
    Posted 9 months ago #

    Actually I figured out it's just the post header photos that are not full width. Everything else is good. Excuse me while I go find a needle in a haystack.

  8. @katklopp
    Member
    Posted 9 months ago #

    Found it!

    Alright, so for anyone with Oxygen theme trying to make their posts full width and retain the left sidebar. Just stick this in your CSS and you're good.

    #content {
    	float: left;
    	width: 100%;
    	margin: 0 0 30px;
    }
    .entry-header {
        float: left;
    	width: 100%;
    }
    .hentry .featured {
        margin-bottom: 15px;
        width: 100%
    }
  9. gabrielsolomon7
    Member
    Posted 8 months ago #

    @katklopp,

    That's great! Can you figure a way to do that only on a certain page? Say, a page with a custom template that you can specify in the functions.php file?

    Many thanks, Gabriel

  10. esmi
    Forum Moderator
    Posted 8 months ago #

    @gabrielsolomon7: As per the Forum Welcome, please post your own topic.

  11. interiorvoyeur
    Member
    Posted 7 months ago #

    Thank you for sharing that piece of code!!!

    I notice that the header above the picture doesn't go all the way to the end (it's 738px and the pic is 750px, I think).

    Any fix for that?

  12. nexbelgium
    Member
    Posted 5 months ago #

    Thanks a lot for that piece of code @katklopp.

    I am not used to tweak CSS stylesheets. Could you detail where I need to put that code in order to have full width posts? I now got something like this in style.css:

    .page-template-fullwidth .content-wrap { width: 100%; }
    #content {
            float: left;
           width: 100%;
          margin: 0 0 30px;
    }

    with the rest of you code under .entry-header.

    And I am sure that's not the right way to go :)

  13. artisticc
    Member
    Posted 5 months ago #

    Hello! I have actually another question:
    i want to get rid of the whole left menu so i have more space for content
    as i also want a slideshow on my home page.
    But How do I get rid of the menu left, or.. Make left menu really small. just like
    http://hyperreal.us/category/music/

    I know a bit of css.
    I hope someone can help me out :-)

    i.e. this page u can see that its cramped and doesnt allow me to make it bigger.
    http://www.suzettehuwae.com/fashion

Reply

You must log in to post.

About this Theme

About this Topic