Oxygen Theme – Featured Pictures for Posts

  • Unknown's avatar
    thefelicia · Member ·

    Hi, I have purposed the CSS Custom Design upgrade and was wondering if it’s possible to edit the position for the “Featured Picture” for each blog post in a way that it will appear on the left side of the blog tittle and excerpt of each post instead of on top… I would also like to crop it into a square shape, not horizontal shape if possible!

    Another question.. I would like increase the page width for my blog.. I did it for the single blog entry with this code:

    .single #page {
    max-width: 1200px;
    }

    But I would like all of the pages to be of the same width at 1200px, but the home page to remain as default. Any idea how should I go about?

    Thanks in advance for the help!

  • Unknown's avatar
    thefelicia · Member ·

    I meant purchased*

  • Unknown's avatar
    designsimply · Member ·

    was wondering if it’s possible to edit the position for the “Featured Picture” for each blog post in a way that it will appear on the left side of the blog tittle and excerpt of each post instead of on top…

    That’s actually quite a tricky request because of how the Oxygen theme is designed and how the media queries for it are setup. I took a crack at it though. I used http://oxygendemo.wordpress.com/ for in-browser testing. Here’s what I came up with:

    body.page-template-showcase-php .hentry .featured-image {
	width: 140px;
	height: 140px;
	overflow: hidden;
	position: relative;
	float: left;
}

body.page-template-showcase-php .hentry .featured-image a img {
	position: absolute;
	left: -120%;
	max-width: 470px;
	border: 1px dashed blueh;
	height: 140px;
}

body.page-template-showcase-php .hentry .entry-header {
	margin-left: 5%;
}

body.page-template-showcase-php .hentry .entry-summary {
	float: left;
	margin-left: 5%;
	padding-left: 0;
}	

@media only screen and (min-width: 767px) and (max-width: 999px) {
body.page-template-showcase-php .hentry .entry-summary {
	width: 56.5%
}
}

@media only screen and (max-width: 490px) {
body.page-template-showcase-php .hentry .entry-summary {
	width: 56%
}
}

    Definitely test it.

    I would also like to crop it into a square shape, not horizontal shape if possible!

    Note that it’s not really a crop in the example above. It just sets the featured image container to a square shape and hides the overflow.

  • Unknown's avatar
    designsimply · Member ·

    But I would like all of the pages to be of the same width at 1200px, but the home page to remain as default. Any idea how should I go about?

    Here’s an example of a post:
    http://oxygendemo.wordpress.com/2012/02/13/in-hac-habitasse-platea-dictumst/

    I see that the sample code you included worked there.

    Do you mean you also want to expand the site container width to 1200px on pages too?

    Here is an example of a page:
    http://oxygendemo.wordpress.com/2012/02/13/in-hac-habitasse-platea-dictumst/

    You can target both posts and pages by updating your CSS to this:

    .single #page,
.page #page {
	max-width: 1200px;
}

    There are other types of pages, such as category pages:
    http://oxygendemo.wordpress.com/category/featured/

    But it looks like those would be better staying and the original width.

  • Unknown's avatar
    thefelicia · Member ·

    Sorry but I don’t really get it…

    I’ve tried putting this code that you suggested:

    body.page-template-showcase-php .hentry .featured-image {
    width: 140px;
    height: 140px;
    overflow: hidden;
    position: relative;
    float: left;
    }

    body.page-template-showcase-php .hentry .featured-image a img {
    position: absolute;
    left: -120%;
    max-width: 470px;
    border: 1px dashed blueh;
    height: 140px;
    }

    body.page-template-showcase-php .hentry .entry-header {
    margin-left: 5%;
    }

    body.page-template-showcase-php .hentry .entry-summary {
    float: left;
    margin-left: 5%;
    padding-left: 0;
    }

    @media only screen and (min-width: 767px) and (max-width: 999px) {
    body.page-template-showcase-php .hentry .entry-summary {
    width: 56.5%
    }
    }

    @media only screen and (max-width: 490px) {
    body.page-template-showcase-php .hentry .entry-summary {
    width: 56%
    }
    }

    But nothing changes at all, and I don’t know where to start editing.. Am I doing something wrongly?

  • Unknown's avatar
    designsimply · Member ·

    That example was based on the demo site at http://oxygendemo.wordpress.com/ because you didn’t provide a link to your site.

    To setup your site the same way, you could follow the instructions in the “Showcase page template” section at http://theme.wordpress.com/themes/oxygen/

    In that example, the part of the CSS selectors that are targeting the showcase template is:

    body.page-template-showcase-php

    If you changed all instances of that to “.home” instead, then it would make that example work for any posts on the home page and not just ones in the showcase template.

    .home

    Here is an adjusted example:

    .home .hentry .featured-image {
	width: 140px;
	height: 140px;
	overflow: hidden;
	position: relative;
	float: left;
}
.home .hentry .featured-image a img {
	position: absolute;
	left: -120%;
	max-width: 470px;
	border: 1px dashed blueh;
	height: 140px;
}
.home .hentry .entry-header {
	margin-left: 5%;
}
.home .hentry .entry-summary {
	float: left;
	margin-left: 5%;
	padding-left: 0;
}
@media only screen and (min-width: 767px) and (max-width: 999px){
	.home .hentry .entry-summary {
		width: 56.5%;
	}
}
@media only screen and (max-width: 490px){
	.home .hentry .entry-summary {
		width: 56%;
	}
}

    You should also keep in mind that it’s a starter example and you may still find issues with it in testing. I checked it at several browser widths, and it looked okay to me, but it took a lot of work to make that example and it’s not simple CSS so you should test it as well.

  • Unknown's avatar
    thefelicia · Member ·

    Thank you, that’s what I needed… One thing though, I noticed that the featured picture turns out to be really “zoomed in”, any way to fix that?

  • Unknown's avatar
    designsimply · Member ·

    There isn’t. The cropping of the image is decided by the theme. The CSS just moves what’s given by the theme around on the page.

  • The topic ‘Oxygen Theme – Featured Pictures for Posts’ is closed to new replies.