Moving recent articles section next to featured post slider

  • Unknown's avatar
    gigaboutblog · Member ·

    I’m using the Oxygen theme and have just used custom css to make the featured post slider smaller. However, in this process it has created a large space on the right hand side, and I was wondering if I could move the recent articles section of the website into this space using css?

    I’m currently using a trial version of WordPress premium.

    Thank you in advance!

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

  • Unknown's avatar
    designsimply · Member ·

    It’s possible to move it, but I think it would take a bit of work. For example, the space to the right of the slider is a fixed height, but the recent articles section has a variable height. That means that it will overlap with other things if you move it.

    Here is a basic example you can try out to see what I mean:

    .recent-articles {
	position: absolute;
	top: 225px;
	right: 0px;
	width: 250px;
}

    I think it’s doable to move it, but I also think it would take some work to get everything sorted out into set, fixed width/heigh places.

    In addition, you have to watch out for how the site looks on mobile. For example, setting the #featured-content width to 65% actually breaks the responsive design for the mobile view of Oxygen.

    You could avoid that by using media queries though:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    Hopefully this info won’t discourage you, but I do think to make the changes you’ve described so far that it will take more work to get right.

  • Unknown's avatar
    gigaboutblog · Member ·

    Thank you very much for your help.

    Would the same still apply by trying to move the secondary widget area on the right up to the top, and is it possible to do this?

    Thanks again

  • Unknown's avatar
    designsimply · Member ·

    That might work better! They would both be possible btw—just some layout changes are not as easy as others.

    Here is an example I worked on for you that you can try out by adding it to your Appearance > Customize > CSS editor:

    @media only screen and (min-width: 767px) {
	.page-template-showcase-php .featured-wrapper {
		width: 63%;
	}

	.page-template-showcase-php #content-wrap {
		position: relative;
	}

	.page-template-showcase-php #tertiary {
		position: absolute;
		top: 0px;
		right: 0px;
	}
}

    This example only applies to the home page in the Oxygen theme if it is setup as a static front page using the Showcase Template.

    What’s important to note about the layout for a change like this is that when you absolutely position something using CSS, it takes that element out of the normal “flow” of the document. That means other elements could flow into it or overlap with it if you’re not careful.

    If you re-position the sidebar using the CSS above, as long as the content in the middle area (slider + recent articles + more articles) has a height that is taller than whatever is in the sidebar area then it will work.

    If the sidebar became taller than the main content, then there would be an overlap. Here is an example to illustrate: https://cloudup.com/cM1xCyf_egt

    I would also recommend reading this article about how absolute positioning works as a starting point: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

  • The topic ‘Moving recent articles section next to featured post slider’ is closed to new replies.