How to reduce the width of page margin?

You should search the Twenty Eleven forum for questions already asked, or find a different theme since no one is focusing on answering questions about that ten year old theme.

Hi @satimis02!

For the widht , try pasting this code in Appearance> Customize> Add CSS.

div#page {
    max-width: 100%;
}

.singular .entry-content {
    width: 100%;
}

For the color of the top portion of the page, put in the same place the next code.

This is for the background, you can change “black” to another color.

header#branding {
    background: black;
}

This is for the text color, you can change “white” to another color.

h2#site-description, h1#site-title span a {
    color: white;
}

Keep in touch!

• This reply was modified 3 years, 6 months ago by Mateo.
• This reply was modified 3 years, 6 months ago by Mateo.

Hi Mateo,

Thanks for your advice.

I got it done with following steps:-

Appearance -> Customize -> Additional CSS
adding following code;

div#page {
    max-width: 100%;
}
.singular .entry-content {
    width: 100%;
}header#branding {
    background: lightblue;
}

-> Publish

I retain Red text color

For changing the background color on lower page, what coding shall I add?

Thanks

Regards

You forgot to add this code:

h2#site-description, h1#site-title span a {
    color: white;
}

This is for the text color, you can change “white” to another color.

When you say “lower page”, do you refer the block that says “Proudly powered by WordPress”?

• This reply was modified 3 years, 6 months ago by Mateo.

You forgot to add this code:
……

No. Before posting I already selected
Appearance -> Customize -> Color -> Header Text Color
Red

I just retain the red color.

When you say “lower page”, do you refer the block that says “Proudly powered by WordPress”?

Yes. Also the main body above it.

Thanks

Also this website encounters problem when browsed on Firefox, but with no problem when browsed on Google Chrome. I’ll start a new posting.

Regards

• This reply was modified 3 years, 6 months ago by satimis02.
• This reply was modified 3 years, 6 months ago by satimis02.

This code is for de background color of the body, only change the value “red” to another color.

div#main , div#primary , footer#colophon div#site-generator {
    background-color: red;
}

This code is for de font color of the footer section (“Proudly powered by WordPress”), only change the value “white” to another color.

div#site-generator a.imprint {
    color: white;
}

Regards!!

Following coding works for me here

 div#page {
    max-width: 100%;
}
.singular .entry-content {
    width: 100%;
}header#branding {
    background: lightblue;
}
div#main , div#primary , footer#colophon div#site-generator {
    background-color: lightyellow;
}
div#site-generator a.imprint {
    color: blueviolet; font-size: 25px;
}

font-size: 25px; #change font size

But
font-weight: bold; #does’t bold the phrase?

Is there a coding to increase the thickness of the line above the phrase?

Thanks

I think I need to read again;
CSS Introduction
https://www.w3schools.com/Css/css_intro.asp

I learned it before but rarely applying the codes

Regards

• This reply was modified 3 years, 6 months ago by satimis02.

Try changing the font-weight value to 800 or 1000.

To increase the thickness of the line above the phrase paste this code and you can change the “px” value (thickness increases when placing a bigger number) and the “black” value to another color.

div#site-generator {
    border-top: 4px solid black;
}

Keep in touch!

font-weight: 1500
no effect

div#site-generator {
    border-top: 8px solid blue;
}

works

All video are not in the center. How to center all of them globally instead of adding;
[center] .... [/center]
to each of them?

Is it possible to change the background color of the main body above the blue line?

Regards

Use this code change the font weight of “Proudly powered by WordPress”:

div#site-generator a.imprint {
    font-weight: 1000;
}

This code is for the background color of the main body above the blue line:

div#main, div#primary, div.entry-content pre  {
    background-color: red;
}

This code is for the background color of the footer below the blue line:

footer#colophon div#site-generator {
    background-color: blue;
}

To center the videos, go to edit page and there should be an option to center the video block, i’m not able to center them through code.

Regards!

• This reply was modified 3 years, 6 months ago by Mateo.

<blockquote>div#main, div#primary, div.entry-content pre  {
    background-color: lightyellow;
}</blockquote>

footer#colophon div#site-generator {
    background-color: lightskyblue;
}

div#site-generator a.imprint {
    font-weight: 1000;
}

all work.

“font-weight: 1000” I must stick on 1000. Other values don’t work.

I’m not award of the function on dashboard to center all video on all pages. I must do video by video on all pages as follow;

-> Page -> Visual
select the video
-> Format -> Align -> Center

Regards

• This reply was modified 3 years, 6 months ago by satimis02.

Keep in touch!

Topic moved to theme forum “twentyeleven”

Hi Mateo,

To center all video globally with following CSS code

iframe {
   display: block;
   margin: 0 auto;
}

Youtube uses “iframe”

Lot of thanks for your effort helping me.

Regards

You’re welcome @satimis02 !!