Need CSS help for Oxygen theme

  • Unknown's avatar
    cuttingedgecreativity · Member ·

    Hi, not entirely sure if all of the following is possible on the Oxygen theme, but here is what I am hoping to be able to do:

    1. Is there a way to increase the width of the site while still keeping everything centered?

    2. Is there a way to be able to add at least one more link to the main navigation menu without causing additional options to nest underneath what is already there? (I’ve found it does the whole wrapping thing if there’s not enough space.)

    3. Is there a way to bring up the secondary column of widgets (which has my blog stats, subscription, and Twitter feed) up to the right side of the slider?

    4. If the above is possible, then can I increase the width of the recent articles section to match the width of the slider?

    Any assistance anyone can provide for these would be greatly appreciated. Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    ogurel · Member ·

    Hi there,

    I will try to answer your questions piece by piece.

    1. You can use the below custom CSS code in order to increase the width of the page. However, this will displace some items and might not be the most desirable behavior.

    #page
{
    max-width: 1240px; /* Modify this as you see fit */
}

    You can even use things like :

    @media only screen and (min-width:1600px)
{
    #page
    {
        max-width: 1240px; /* Modify this as you see fit */
    }
}

    Which will ensure that the width of the page increases to 1240px only if the minimum resolution requirement (min-width:1600px) is met.

    This width increase will also partially solve your main navigation menu issue as it gives you more space to add extra items to the navigation.

    2. You can solve this issue with the following custom CSS code:

    .main-navigation li
{
/* Play with these values to have the desired distance between the menu items in order to fit more as the maximum width of the main navigation is limited by the max-width value of the page.  */
    padding-left: 1.2em;
    margin-right: -0.8em;
}

    3. This is trickier and will cause issues at smaller resolutions, which is why I recommend using it like this, you can modify the widths to fit your needs however:

    @media only screen and (min-width:940px)
{
    .featured-wrapper {
        width: 66% !important;
        float: left !important;
    }
    #tertiary {
        float: left !important;
        position: absolute;
        right: 0;
        width: 27% !important;
    }
}

    4. This won’t look well as the right sidebar is much longer than the slider height which will cause empty space between the content and the slider. However, please let me know if you still want this.

    I hope these modifications will be what you needed and please let me know if you need anything else.

    Take care,

    Onur

  • Unknown's avatar
    cuttingedgecreativity · Member ·

    Thank you for your response!

    The last box of code you provided is closest to what I was envisioning, but I was wondering, is there a way for the site to:

    1. Remain centered;
    2. Keep the slider images the default size; and,
    3. Increase the width of the recent articles section to match the slider width?

  • supernovia · Staff ·

    Hi @edgeofcreativity,

    I’m looking over your requests here. Are you asking if there is a way to increase the width of the site while keeping the slider images the default size?

    The slider images are 750px wide and span two “columns” of the site. So to keep those at 750px while making the entire site wider, all of the extra space would go into that left column. Is that your intent?

  • Unknown's avatar
    ogurel · Member ·

    Hello again,

    Since, what you’re asking will come into play at high resolutions, I have done the below changes that you can use which will only work at resolutions higher than 1320px.

    @media only screen and (min-width: 1320px) /* the below css codes will only be used if the width of the page is 1320px or higher to avoid breaking */
{
    .page-template-showcase-php #content {
        margin: 0 ;
    }
    #page {
        max-width: 1260px; /* max page width that can be modified depending on your needs*/
    }
    .featured-wrapper {
        width: 750px !important; /* Setting a max width on the slider so it doesn't resize itself */
        float: left !important;
    }
    .site-content {
        float: left;
        width: 750px; /* Max width of the Recent Articles section */
    }
    #tertiary {
        float: left !important;
        position: absolute;
        right: 0;
        max-width: 250px !important; /*maximum width of the right sidebar */
    }
    .section-title h1 {
        width: 720px !important; /* width of the Recent Articles bar */
    }
}

    Let me know if this is what you had in mind, we can tweak the resolution and other sizes depending on your needs.

  • Unknown's avatar
    cuttingedgecreativity · Member ·

    That’s almost perfect! Now all I need is help making the featured images for the recent articles section wider, if that makes sense. Right now the images are the theme’s default size, so it looks cut off.

  • Unknown's avatar
    cuttingedgecreativity · Member ·

    Actually, now I see one more problem. When you click on an entry, all of a sudden the left menu disappears, and the entry itself seems very scrunched and pushed to the left. I suspect this is a side effect of the code I will have to live with if I wish to keep it?

  • Unknown's avatar
    ogurel · Member ·

    Hello again,

    You can limit these changes to be on the home page only by changing the code I had provided above to this:

    @media only screen and (min-width: 1320px) /* the below css codes will only be used if the width of the page is 1320px or higher to avoid breaking */
{
    .home.page-template-showcase-php #content {
        margin: 0 ;
    }
    .home #page {
        max-width: 1260px; /* max page width that can be modified depending on your needs*/
    }
    .home .featured-wrapper {
        width: 750px !important; /* Setting a max width on the slider so it doesn't resize itself */
        float: left !important;
    }
    .home .site-content {
        float: left;
        width: 750px; /* Max width of the Recent Articles section */
    }
    .home #tertiary {
        float: left !important;
        position: absolute;
        right: 0;
        max-width: 250px !important; /*maximum width of the right sidebar */
    }
    .home .section-title h1 {
        width: 720px !important; /* width of the Recent Articles bar */
    }
    .home .featured-image img
    {
        width: 100%;
    }
}

    Please reply if you need any other modifications.

    Thanks,

    Onur

  • Unknown's avatar
    cuttingedgecreativity · Member ·

    Thanks Onur!

    Now looking at the recent articles modification, I guess the images associated with each entry under that section look kind of funny stretched out like that. Is there a way to two-column the recent articles like the “more articles” section does, while still keeping the thumbnails, and with the code only affecting the front page? I just want to see what that looks like. It’s okay if the thumbnails are smaller so that they can be equal in size in the two-column format.

    I’m thinking it would look something like:

    [Image] [Image]
    Date Date
    Entry Preview Entry Preview
    Leave a Comment Leave a Comment
    Edit (Admin view) Edit (Admin view)

    If that’s not possible, that’s okay. I just decreased the height of the images so that the images don’t look as enormous as they did before on the page.

  • Unknown's avatar
    cuttingedgecreativity · Member ·

    Sorry, there should be space between the two columns when I wrote out the text above. It didn’t come out the way I typed it in, but hopefully what I said makes sense.

  • Unknown's avatar
    cuttingedgecreativity · Member ·

    Also is there a way to make the recent posts and tag cloud columns (which are right above the theme credits) to fit in the same width as the line above the theme credits?

  • Unknown's avatar
    ogurel · Member ·

    It’s my pleasure.
    I understand what you would like to do, however, since modifying the underlying HTML and PHP code is not possible, the recent articles section cannot be in a two-column format.

    For your second question, the below code will reduce the width of the recent posts and tag cloud columns.

    #supplementary {
    width: 940px;
    margin: 0 auto;
}

    If you want, you can also go the other way around and modify the theme credits width with the below code:

    #colophon {
    max-width: 100%;
}

    Please make sure that these changes are inside the @media only screen and (min-width: 1320px) { } code.

  • Unknown's avatar
    cuttingedgecreativity · Member ·

    PHENOMENAL!! THANK YOU!!

    I appreciate your patience and willingness to address all my questions. Hopefully this topic can help anyone else with the same/similar questions as I did! :)

    One last question—do you think then, if I increase the size and resolution of my featured image to each post, it would improve the definition of the image under the recent articles section? If so, I’ll make sure to keep that in mind in the future when I post.

  • Unknown's avatar
    ogurel · Member ·

    No problem at all. Like you said, I hope this can benefit others, we always learn new things.

    For your question, I would definitely recommend increasing the resolution of the images to a resolution of 750px by 140px to make it fit perfectly.

    As always, please reply if you need anything else.

  • The topic ‘Need CSS help for Oxygen theme’ is closed to new replies.