Featured Content Section

To set up Superhero’s Featured Content area:

Navigate to Settings → Reading.
Scroll down to the section labeled “Featured Content”.
Enter the name of a tag.
Click the blue “Save Changes” button at the bottom.
Create a post with a featured image that’s at least 960px wide.
Give the post the tag you declared under Settings → Reading → Featured Content.

I hope this clarifies!

I got something going on with featured images now. But the screen-broad slider isn't explained in the superhero theme page.

http://theme.wordpress.com/themes/superhero

First I'd like to thank you for your support and making having a beautiful website available for everyone!
When I saw the new Superhero theme I immediately switched from my old one. And one of the things I liked most were the beautiful big images between the header and the body of the website. Now my question is; how do I get images up there? Is it some kind of widget?

Thanks in advance,
Remco Gerritsen

I did some work on the header to make it full-width (the blue bar set to 100%, with header content centered over the main content). It works well in all browsers other than IE (of course!). But on mobile browsers, the header is small and truncated with no text. Here is what it looks like: http://adventuresincubing.files.wordpress.com/2013/03/photo.png

I'm guessing the full-width header isn't playing well with the responsive layout. Any suggestions on how to make them play nicely together?

Thanks.

Joe

#main,
#main:after,
.site-footer {
	width: 100%;
	background: #fff;
}

.page #content,
.single #content,
.error404 #content {
	float: left;
}

#left-col {
	margin: 0;
	padding: 0 2%;
	width: 18%;
}

#content {
	background: #f1f2f1;
	margin: 0;
	padding: 0;
	width: 75%;
}

It makes the main content area on the home page stretch to full width. It uses percentages for each main block area of content. Note that you can adjust the numbers as needed, but be aware of different possible screen sizes—not everyone has the same view of a site.

In the example I started you with, the width for posts and pages was left as is. This is because if you try to stretch the size of the featured images (which appear at the tops of those pages), it will distort the images.

Try out the CSS and experiment with the numbers to see if you can get the result you're looking for.

I'm new to CSS. I want to eliminate the space on the right hand side of the theme, so that the post area in the centre goes to the edge of the screen - hope that's clear. What do I need to put in the CSS field please.

Thanks,

Joe

Anna Amelie

Does anyone know if this will be fixed/updated?

Thanks again!
michelle
michelleswift.com

Thank you!
Anna Amelie

Thanks again,

Micheller

I'm not sure what you mean by the main template. Do you mean the front page? There is no difference in template wise between your site and the site you linked. The only differences I can see are that http://dorrelledwards.wordpress.com/ has white background and its site name and tagline are hidden.

You can change background color under Appearance -> Background. If you go to Appearance -> Header, you can hide the site name. Lastly you can delete tagline in Settings -> General.

Hope it helps!

My blog is michelleswift.com

Thank you!

Michelle Swift

#main {width: 960px; margin:0 auto;}<br /> #masthead {background: <em>FULL-WIDTH-BG-COLOR</em>;}<br /> hgroup {width: 960px; margin: 0 auto;}<br /> .main-navigation {background: <em>FULL-WIDTH-NAV-BAR-COLOR</em>;}<br /> .nav-menu {width: 960px; margin:0 auto;}<br /> .site {width: 100%; max-width: 100%}

This would go in the custom css to override the default CSS.

The structure seems to be body > page > #masthead.site-header. Body and page are full width, but #masthead seems to be limited to 960px, although I can't find the CSS that's doing that. My hope was that I could set masthead to 100% and be done. Or at least set the whole page to 100%, main to 960px, and center everything with margin: 0 auto.

Is something like this doable with Twenty Twelve?

1. Create a new page (or open an existing one for editing)
2. In the page editing screen, look to the right hand column. Find the box labelled "Page Attributes".
3. In the "Page Attributes" box, look for the "Template" heading. From the drop-down menu below the box, select "Full-width, no sidebar".
4. Continue editing your page. When you're done, hit "Publish".

I hope this helps!

Thank you very much for taking the time to try and help me out.

Much appreciated.

D ^_^

The live demo for the Confit them shows an image the full width of the entry sitting above the title.

I would like to add an image such as this to a blog post but am not sure how I do so.

Any help would be very much appreciated.

Thank you

D ^_^

@baabaabi: This is a known issue and I'm working hard to nail down how content width is being set for all blogs at the moment. I'll keep you in the loop about everything and update this thread as soon as there's a suitable resolution for you. Cheers.

Media size setting is located under Setting / Media.

My theme is automatically selected Medium size - so everytime they adjusted my photo to Medium size - 300x300
If I want to change the size, I needed to do it in Advanced Setting within the post.

Hope somebody know how to overwite it, may be under Theme/CSS
my blog - http://www.baabaabi.com

I uploaded an image yesterday that was 1097 pixels wide. It was specified to display at full width. When I clicked on the 'Text' tab to show the html code for the picture I saw that the code included width and height restrictions - the width was restricted to 774 pixels.

The code can be edited to enable the photo to display at full width but why are my settings being overridden? There is obviously an error in the new image upload process.

Here is the html code...

[caption id="attachment_2232" align="aligncenter" width="774"]<img class="size-full wp-image-2232" alt="Piccadilly Circus, London." src="http://24hourphoto.files.wordpress.com/2012/12/sar-photography-simon-robinson-24-hour-photo-_dsf6884.jpg" width="774" height="636" /> Piccadilly Circus, London.[/caption]

My photoblog - 24hourphoto.wordpress.com - is set to display images at full width. But it doesn't! If you look at the post from 24th December you'll see that it is not full width. Click on the post header to go into it (as if you wanted to leave a comment) and you'll see that the image then displays as full width.
Can anyone tell me why this is happening?

Cheers and merry Christmas
Simon

In short, everything is working fine now. Thank you for your help timethief.