Aligning page content on TwentyEleven theme

First let’s deal with the child theme business. Yes you can do it now. Just make a note of the changes you have made, reinstall twentyeleven from scratch (or undo your changes manually, your call), and then create your child theme with all your changes included. If you need more detailed help, just ask.

It is very important not to alter the default theme(s). For other themes, you can make alterations if you want, but I’d always recommend using a child theme if at all possible. It takes 10 minutes to do and has many advantages, not the least of which is that updates to the parent don’t override your child theme changes.

Now for the content alignment. This is the rule (below) that means that the entry content div is narrower than the menu, for example. It’s also centered, so the content, although aligned left, does not go as far left as the menu:

.singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
  margin: 0 auto;
  width: 68.9%;
}

Setting the width to 100% will do what I believe you want.

The space between the heading and the menu is caused by the (empty) site description div:

#site-description {
  color: #7A7A7A;
  font-size: 14px;
  margin: 0 270px 3.65625em 0;
}

Setting the margin to 0 (zero), for example, will move everything up by 3.65625em (!). You can use whatever distance you like, though, of course, including negative ones, but you maybe ought to consider what would happen if you ever did add a site description.

You could get the same effect by setting the display property to none for the #site-description:

#site-description {
  display: none;
}

HTH

PAE

Hi peredur, thank you for responding so quickly.

I see one problem with making the child theme and that is I don’t remember exactly what lines I’ve edited or in what files. Is this possible to fix somehow? I didn’t know / read about child themes until I had come a long way in editing the theme itself. I really don’t wanna upload the theme itself again and remake all the changes as it’s crucial that the site is up and running as it is now. Would it be devastating for this site to not be on a child theme basis?

It seems I’m in quite the pickle.

Regards,
Apachez

Would it be devastating for this site to not be on a child theme basis?

If WordPress release an update or security fix for the theme, then you would lose your changes.
With the WordPress or Theme upgrade process, if the theme is included it will delete all files in the folder and copy across new ones.

I see one problem with making the child theme and that is I don’t remember exactly what lines I’ve edited or in what files.

Look at the date on the files, download a clean twenty eleven from extend or the main download and compare the files and sizes.

Then grap a free text editor that does compare, one that springs to mind is ExamDiff compare and merge.

A child theme is easy to manage, as it only contains your changes, anytime you need to reverse something you have not changed the source files in the parent.

HTH

David

So it seems crucial then that I make a child theme before I go on with editing the site.

Look at the date of the files? I’m a bit confused. What I did just now was I made a copy of my database on my harddrive, just downloaded everything that’s up there right now with an FTP client, so it’s all saved if it goes straight to the hot place.

Is there any other solution or do I have to learn how to use Examdiff? A detailed instruction on this new software would be greatly appriciated.

Regards,
Apachez

Just the files in the theme folder, you have been working on a local copy of the theme, then using ftp to upload them?

Then navigate to where you have been editing the files, look at the modified date, those that you have edited will have a different date to the ones that you have not edited, that should narrow it down.

HTH

David

If I remember correctly, all the editing I’ve been doing, I’ve been doing in the style.css file for the theme. I’m using ExamDiff now and seeing how it highlights the lines which are not the same, maybe it won’t take that long just remaking the original theme to where I want it to be now? Would it be smartest just to upload a fresh, new TwentyEleven theme to my database, making a child theme and then use ExamDiff and just replace everything manually? It is not ALOT of things that have been altered, mainly the design, which is different colors, looks of the menu etc.

Regards,
Apachez

As I understand it, if uploading a fresh new theme, and creating a child theme of it, all changes made in the child theme, overwrites, say design changes, onto the parent theme?

So if I upload a theme, makes a child theme of it, I edit the style.css for the child theme, and it’s reflected back onto the parent theme?

So that means if I upload the style.css I have been working on, into the child’s theme, it will automatically overwrite the parent theme, which is the fresh TwentyEleven theme? It sounds logical to me but hopefully it also is true..

Regards,
Apachez

Hi Apachez,
With a child theme only the changes are required in the child themes style.css

WordPress will load the parents style.css first, then the child theme so the cascading effect will be correct with the child overwriting the parent.

With the other files WordPress will look in the child first, if it cannot find the file then the parent.

I wrote a post recently which has a link to a twenty eleven child theme download, I can email it if you do not want to register to download, that one works with the dark theme option.

To create a Twenty Eleven child theme from scratch, make a folder on your local drive, give it your theme name, lowercase and no spaces, EG: my-child-theme

Copy the twenty eleven screenshot into this folder for now replace it later, and create a new file style.css

/*
Theme Name: Your Theme Name Here
Description: Child theme for the Twenty Eleven theme
Author: Apachez
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");

That is your child theme, then in examdiff find the changes, copy the elements and just the changed lines to the new style.css, below the @imports line.

Like:

#site-title a {
    color: #009900;
}

Giving:

/*
Theme Name: Your Theme Name Here
Description: Child theme for the Twenty Eleven theme
Author: Apachez
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");

/* Start Custom Styles from here */
#site-title a {
    color: #009900;
}

Thats is all you need to do, really easy, if you then wanted to change say index.php, you copy this from the parent to the child and make your changes in the child theme’s file.

HTH

David

Hi David,

So basically what I do then is that I upload a fresh new Twenty Eleven theme and just keeps on pasting whatever changes I’ve made in the new child theme style.css, since it will reflect back the changes onto the parent theme and overwrite them?

What about disabled widgets? Do I disable them again by removing codelines from different php files?

[CSS moderated as per the Forum Rules. ]

Have I gotten my head around it then? Then it’s not hard at all and does not take alot of time, as you said.

Regards,
Apachez

Only the changes so lets say we want to reduce the font size by two px:

/*
Theme Name: Your Theme Name Here
Description: Child theme for the Twenty Eleven theme
Author: Apachez
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");

.wp-caption .wp-caption-text,
.gallery-caption {
   font-size: 10px;
}

#site-title a {
 font-size: 28px;
}

HTH

David

Thanks a bunch for the help, I think I am all set.. for now.

I’ll be returning if I have any more problems, which is most likely the case. Glad I decided to use WP as seems like a great supporting community out there.

Regards,
Apachez

How do I edit the lines I want removed from certain php files in my child theme? I don’t want, for example, the comment section and googling this problem, I found a solution removing certain lines from a certain php file. Can I still do this or how do I go on about this when I got a child theme?

Do I copy the parent php file and make a new, edited one and upload it or what?

Regards,
Apachez

Do I copy the parent php file and make a new, edited one and upload it or what?

Yes, that’s it exactly.

So if for example, the changes you need to make are to the file index.php, you’d copy Twenty Eleven’s index.php to your child theme folder and make any changes to the new copy of the file, then upload.

But this only works with the .php files? That I take the original .php from Twenty Eleven, edit it and then upload it to my childtheme folder?

It seems I’m having a bit of a problem editing the style.css in my childtheme. Say for example this, I want to edit the menu.

This is the code I see in the style.css for Twenty Eleven (parent theme)

#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;

So if I want the entire menu just to go white, how do I edit this into my child theme style.css?

Seems I partially figured it out, I just took the

#access {
	background: #222
}

And edited it into

#access {
	background: #FFF
}

What about the rest of the lines of codes I don’t need there? I just put them into some sort of zero condition?

The problem I am having understanding this child theme, is that I just write the lines I want to be changed. So instead of deleting an entire bit of code, removing the functionality itself, I have to write it into my child theme, thus making it some sort of reverse coding. Is there any easy analogy to understand this?