Remove right column in oxygen and reclaim width for posts?

  • Author
    Posts
  • #1366596

    amsteloost
    Member

    Hi,

    I would like to remove the right column in the Oxygen theme to make more room for my posts, both on the main page as well as on all other pages. I have the CSS upgrade. When I experimented with

    #content {
    margin-right: 0;
    }
    #tertiary {
    display: none;
    }

    the column area was gone, but the post area on the main page remained the same width. Is it possible to change this?

    And is it also possible to have pix that would fit the entire space in the new width? (I have tried by uploading a pic with 750 px width, but on the page it was still cropped to 470.)

    Since the result looked ugly, I changed everything back.

    Thanks for your help!

    The blog I need help with is amsteloost.com.

    #1366747

    Hi there, you had a good start, we just need to add a few more things, but make sure and take a look at the image quality when we do this. This solution relies on the browser to rescale the images, and browsers don’t do that good of job. It would require some editing of the PHP script files to keep the images sharp and crisp at the new size, and we cannot edit those files here at WordPress.com.

    Let’s start with the below and see what you think, and then we will work from there.

    #tertiary {
    display: none;
    }
    #content {
    margin-right: 0 !important;
    }
    .attachment-archive-thumbnail, .entry-header, .entry-summary {
    width: 100%;
    }
    
    a.read-more, a.read-more:visited {
    right: 25px;
    }
    
    .hfeed-more .hentry.even {
        margin-left: 150px;
        width: 45%;
    }
    
    .hfeed-more .hentry.odd {
    width: 45%;
    }

    One other issue is that the image that shows at the top of the single post pages such as on http://amsteloost.com/2013/07/16/pepper-mango-leidt-de-rozengrachtrevolutie/ , will still be the smaller size. The reason is that on the single post pages, there isn’t a unique class or ID in the CSS for those images, so if we widen those, it will widen all images in the posts.

    #1366756

    amsteloost
    Member

    That is starting to come together how I would love to have it! Just a few more questions about this:

    * This now resizes the featured images proportionally. That’s why they also become longer in height. The ‘read more’ arrow however is still in the same place as it used to be, so now half way in the image instead of neatly at the bottom. Would this be solved if I would upload new images, 780 wide but still 140 high?

    * And would this also solve your last comment about the picture on a single post page still be smaller? If yes to the first bullet question and no to this second one because of the lack of a unique class issue – can I still widen that class (how?)? I understand it would widen all pix in the posts, but they are now capped at 470 anyway whereas I can of course make new once at 780 wide. Or do I not understand this issue properly? I do have all image files, so I can make them any size I want. Other than some hard work it might not be such an issue, if indeed the result would be as I intent (basically, with top images using the entire length whilst keeping the same height), and similar to all other pix used in posts. So basically I propose to update the images, so that browsers would not have to resize them.

    * There’s a lot of white space below the post title and the summary. That’s probably because I am not displaying the category labels. Is there a way to move the content summaries up to just below the title?

    * And also add more white space below the summaries, so that it would seem less confusing to which post what belongs?

    * Now that we’ve created more space be extending the post width, the text summaries may be longer. They are now only 1.25 lines or something. Three would be still ok, I guess. Can I enlargen this? Or maybe add a border if that looks better?

    * For some reason the post titles under ‘more articles’ are not aligned. I am showing 6 of them, 5 are displayed perfectly in line, the 6th one (bottom right) is being pushed down. Any idea why?

    * Finally, can I add content summaries underneath the ‘more articles’ posts? I like the feature and see the difference from the featured and recent articles, but still,would be good to be able to show a bit more what readers can expect.

    Hope I am not asking for too much – you are helping me in a great way and I feel we’re on the right track to customise it just how I would like it – so thanks for that!

    #1366777

    The ‘read more’ arrow however is still in the same place as it used to be, so now half way in the image instead of neatly at the bottom. Would this be solved if I would upload new images, 780 wide but still 140 high?

    Find this in the example from earlier:

    a.read-more, a.read-more:visited {
    right: 25px;
    }

    And update it to this:

    a.read-more, a.read-more:visited {
    right: 25px;
    top: 130px;
    }

    Adjust the 130px value to move the link around until it appears where you want.

    #1366778

    So basically I propose to update the images, so that browsers would not have to resize them.

    Because you’re changing the width for the main content, you’ll want to adjust the “Content Width” setting in the Appearance > Customize > CSS panel. For this example, 750 might work well for you but adjust it if needed.

    It always helps to have a specific set example. Here is a link to a recent post from your blog we can look at:
    http://amsteloost.com/2013/07/16/pepper-mango-leidt-de-rozengrachtrevolutie/

    In that post, the image at the top of the post is embedded in the post itself. After you’ve set the content with properly in the Appearance > Customize > CSS panel, just edit the post to remove the image and re-insert it at full width.

    #1366779

    Is there a way to move the content summaries up to just below the title?

    Let’s include a link with every question. That way, someone trying to help you will know exactly where to look. For this question, I’m looking at http://amsteloost.com/ and I see you have used this custom CSS to hide part of the post meta data such as the comments and edit links:

    .entry-header .entry-meta {
    	visibility: hidden;
    }
    
    .entry-header .entry-meta .entry-date {
    	visibility: visible;
    }

    Using visibility: hidden will keep the spacing for an element. If you want to get rid of the space for the element and hide it completely, you can use display: none instead.

    So, for this example, remove the CSS from above, and use this instead:

    .entry-header .byline,
    .entry-header .comments-link,
    .entry-header .edit-link {
    	display: none;
    }
    #1366780

    And also add more white space below the summaries, so that it would seem less confusing to which post what belongs?

    Looking at http://amsteloost.com/ you could add more space below the posts on the showcase page template of the Oxygen theme by using this CSS:

    body.page-template-showcase-php .hentry {
    	padding-bottom: 2em;
    }

    Adjust value for “padding-bottom” as needed.

    #1366781

    Now that we’ve created more space be extending the post width, the text summaries may be longer. They are now only 1.25 lines or something. Three would be still ok, I guess. Can I enlargen this? Or maybe add a border if that looks better?

    Try using excerpts:
    http://en.support.wordpress.com/splitting-content/excerpts/

    #1366782

    Now that we’ve created more space be extending the post width, the text summaries may be longer. They are now only 1.25 lines or something. Three would be still ok, I guess. Can I enlargen this? Or maybe add a border if that looks better?

    I’m not sure what you mean, could you be more specific and include the exact title and describe where to find it and make sure you’ve applied the CSS you’re using when you see that issue happening?

    #1366783

    Finally, can I add content summaries underneath the ‘more articles’ posts? I like the feature and see the difference from the featured and recent articles, but still,would be good to be able to show a bit more what readers can expect.

    That’s not something that can be done with CSS; it cannot be used to add dynamic content to a theme where it doesn’t exist.

The topic ‘Remove right column in oxygen and reclaim width for posts?’ is closed to new replies.