Widget area and centered content in Twenty Twelve

Hello BakSen!

Nice site ?? It give me some hungry ??

To display widgets only on the home page, you can use this plugin:

https://www.ads-software.com/plugins/widget-logic/

To center your content, please read this thread:

https://www.ads-software.com/support/topic/full-width-display-on-some-pages-in-twenty-twelve?replies=4

After that, you can use some CSS to narrow the width of your content.

Hope it helps. ??

Hi Ellp,

Thanks ??

I am sorry, but i am kind of disabled when it comes to CSS etc. So what codes do i need in order to center my content?

Thanks for your help

Hello again ??

Please do the previous steps I’ve sent. Then I can look the site and send the CSS code for you ??

I tried to install the widget plug-in but i have no idea what code i should put in under each widget in order for it to only display widgets on my front page.

Add this:

is_home()

??

And where do i exactly add that?

Sorry for being such a pain.

Hey, no problem ??

Take a look at the screenshot:

https://www.ads-software.com/plugins/widget-logic/screenshots/

Ah now i got ?? Thanks a lot – it works!
Now i have to fix the center alignment. Maybe I am bad at explaining my exact goal. I did manage to center align content on my posts (not pages) but it does not look good as the text had a wider margin than the images. I want them all to be aligned. Does it help to take a look at this page: https://copenhagencakes.com/2014/05/25/tips-til-hjemmelavet-isthe/

I want my posts to look just like they do on the above link (maybe slighty broader depending on how big the images are).

Any ideas to how i can do that?

This is my current code:

.main-navigation ul.nav-menu {
    text-align: center;
}
.site {
    max-width: 68.5714rem;
}

.site-content {
    width: 65.1042%;
}

We are almost there!

insert this code:

.single #content{
width: 45em; //replace this with the value you pleased.
margin: auto;

This will center only the content on the single posts… Let me know if it works.

Jus to correct: the previous code doesn’t treat the layout on small screens. This one does.

@media (max-width:800px){
	 body.single #content {
        margin: 0 7.6%;
        width: auto;
    }
}

body.single #content{
	width:53%;
	margin:auto;
}

Let me know if it works…

YES it worked! Thanks a lot for your help ??

Just out of curiosity: If i want to have the same setting for certain pages, eg. ‘About’ page on my blog, do i just use the same code and change the part i marked in bold?

.single <strong>#content</strong>{
width: 45em; //replace this with the value you pleased.
margin: auto;

If yes, do you then just write the name of that page?

And if i want to have this setting throughout the whole blog what do i then change in the code?

Thanks a load for your help – i really appreciate it. Apparently, i still have a lot to learn.

This is how my code looks now:

}
.single #content{
width: 45em;
margin: auto;
}
@media (max-width:800px){
	body.single #content {
        margin: 0 7.6%;
        width: auto;
    }
}
body.single #content{
	width:53%;
	margin:auto;
}

Hello!

Glad it works ??

One thing you can remove the code:

}
.single #content{
width: 45em;
margin: auto;
}

Is not needed anymore ??

About the layout pages… I think you can replace the actual code for this one:

@media (max-width:800px){
	body.single #content {
        margin: 0 7.6%;
        width: auto;
    }
}
body.single #content,
body.page #content{ //new line :)
	width:53%;
	margin:auto;
}

let me know if it works.

Oh no, this las code messed it up again ??

here is what i have now:

}
.main-navigation ul.nav-menu {
    text-align: center;
}
@media (max-width:800px){
	body.single #content {
        margin: 0 7.6%;
        width: auto;
    }
}
body.single #content,
	width:53%;
	margin:auto;
}

Hello!

1) delete the first } on the top;

2) delete the code from “@media” until the last ” } “

3) paste the provious code i sent to you.

Doing that you should be fine ??