CSS wanted for basic tweaking of 2011 via header.php

Most any CSS modification can to some extent corrupt existing responsive behavior.

When working with the WordPress default themes it is highly recommended to utilize child themes.

Seems to me you’re trying to create something less robust than several already existing solutions. Namely, custom CSS plugins. Have you tried any of these?

Thank you for the friendly tips and perspective, Santeven.

However, I have used formatting plug-ins before. They can break or stop being supported and even when working are a nuisance to have one more thing to update. Once I could not even view the dashboard–had to get expert help to isolate the plug-in. Much nicer for me to stick to a simple CSS head-insert that I can understand and tweak myself.

And I certainly don’t want to get involved with child themes. Some years ago I did extensive modifications and such. But I really have no desire to be a webdesign geek and have too many other things to focus on in my life. The beauty of WordPress is or should be its simplicity. WordPress is or should be or can be the CMS for people who do not like to change their own oil. That is what I am aiming at for my friends who do not even know minimal CSS like I do–in such a way that they and I can do other things with our lives. The only plug-in I want and need is an auto-update plug-in. Updating is simple but we are surrounded by too much technology. One more simple but unnecessary techno-thing is like one more drop of Chinese water torture–in my humble opinion.

Technology should adjust to people, not people to technology.

Re responsive layout: I am not super-picky about a true “responsive layout.” I am just super-picky about not having a totally static layout. Many WordPress sites force the visitor either to read fine print or to do side-scrolling even with a full-size monitor. For which there is no rhyme or reason in my opinion. It makes sense to choose “responsive” because that’s even better than “fluid”–but if “fluid” is all I get that’s alright.

Thanks to your warning, Santeven, perhaps later I can copy-cat the Style.php more exactly, so as to reduce chances of interfering with responsiveness. However it is difficult. Initially, I had to resort to negative margins, just to reduce excessive spacing, which is probably not kosher. However I was unable to isolate the margin or padding CSS for nearby items which probably are generating the white space.

If some expert can come along and provide an “embedded style sheet” so that it does not interfere with responsive layout, that would be ideal. It seems to me this could be useful to a lot of people. There really are not enough basic adjustments available in Twenty Eleven and probably many free themes which could use the same or similar “embedded style.” I like to keep things simple. There should be no need for a plug-in, just for basic design adjustments. in my opinion.

You should avoid modifying the theme files directly. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core, then your changes will be lost. Instead, as @santeven suggested, you should either create a child theme or use a CSS plugin like Jetpack or Custom CSS Manager.

I decided to insert custom CSS into the header because (according to my limited understanding of CSS) this will take priority over any conflicting orders in the main style sheet–and can easily be re-pasted if it is lost during updates–and also the same CSS commands can possibly work with several standard Themes.

For any rules which use identical selectors, or which have selectors with identical specificity, the rule which comes last will take precedence, so you want your overriding CSS to come as late as possible. JetPack will place it’s custom CSS just before the opening body tag, so it’s very useful for those who don’t know how to tweak a rule’s selector to make it override an existing rule. However, it comes with so many other features that I tend to avoid using it. You mentioned just repasting the header.php back in if it gets lost during updates. I don’t know how many sites you plan on maintaining, but that can get to be a pain if you repeatedly have to go back in and do a re-copy on every site. A child theme isn’t all that complicated to set up. You do it once (takes five minutes if you already have a skeleton functions.php and styles.css ready) and then all you have to do is update the child theme’s style.css file with any changes you need. I would also not count on the CSS for one Twenty## theme working correctly with another, unless it’s something really general, like the base font size.

Thank you, CrouchingBruin, for clarifying for me that the last CSS in the <head> will have the highest priority. I have been placing my <style> just before the close of the </head>–but did not know for sure whether this mattered–so I am glad to know.

However, I suspect that maybe I was not clear enough in describing what I am doing.

I am not tinkering with the entire <head> section, as you seem to imply. I am only pasting a <style> insert just before the close of the </head>. This is partly because the Twenty Eleven Theme has a section under Dashboard: Appearance: Editor which readily enables the instant editing of numerous “templates” including “Header.php.” In the past, I have used a CSS customizatin plug-in–and on another site I use a “head insert” feature in the Weaver Pro theme–both of which seem to amount to the same thing: pasting something just before the close of the </head> section.

I agree that pasting a style sheet into the header.php might require tweaking or re-pasting slightly more often than the use of a customization plug-in. However, teaking my “header.php insert” is very simple. Worst case scenario: the changes caused by my <style> insert are so minor that, if necessary, I can simply remove my <style> insert until I have time to figure out the problem. Whereas when a plug-in goes bad or is delayed to update after a major WordPress update–that can be a lot more bothersome and can cause the site to be messed up for months before I have time to figure it out.

(I am not saying that plug-in problems are not generally simple or can not be solved quickly–I am just saying that plug-in problems are “less simple” and “less assuredly easy” to fix immediately than the tweaking of my own CSS style insert. Also, the details of my CSS style insert are generally something that I learn once and improve constantly–not like the figuring out of something totally new as might be required with a plug-in problem.)

Also, as you say about JetPak, “”…it comes with so many other features that I tend to avoid using it…” I think that I am saying something very similar: the simplest and least-invasive solution is the best. I might be wrong, but so far, it still seems to me that pasting some <style> into the <head> is the simplest.

All that I am trying to do is mostly modifying a few font sizes, font styles, paddings and margins. In my small opinion, the ability to determine the size and style of your headings and text should be a standard feature of any Theme! Or every Theme should supply a standard free plug-in that does this and that is as well-supported as the Theme itself. Otherwise, I would have to get a plug-in that works with numerous themes and therefore that would have numerous unnecessary complications including security.

I also agree that child themes are not very difficult. However–in my understanding–a child theme must at least be re-issued with every WordPress update so as to include the updates of the main Theme! I do not like the nuisance of pushing update buttons–let alone having to make sure that changes are relevant or not relevant to my child theme, including security, etc., etc. Whereas with my <head> inserted style–I can just ignore it until something is obviously not right–and then take my time before tweaking it back into perfection. So I fail to understand how a child theme can be considered as less bothersome than pasting a style sheet into the header.php.

In other words, if I were trying to do several different things, then I might understand how a plug-in or child theme might make sense. However, I am only trying to do one thing: to control the size and shape of the letters on my pages!

Of course, maybe I am not understanding something correctly. If so, please explain anyone, I am open minded. I have already learned some things here and thank you very much.

(PS–regarding the issue of using the same style insert with multiple Themes: I agree this might not be feasible. However the CSS often is somewhat related. Once I know what works with one Theme, it might be easier to build on that for other Themes, even if not identical, especially since I specialize on with the “Twenty Something” theme series. But if not, this is no more of a problem than using different settings with different themes for the same plug-in. I.e. this is not a major issue, just icing on the cake if my style insert works even partly for multile Twenty-something themes.)

I am not tinkering with the entire <head> section, as you seem to imply. I am only pasting a <style> insert just before the close of the </head>. This is partly because the Twenty Eleven Theme has a section under Dashboard: Appearance: Editor which readily enables the instant editing of numerous “templates” including “Header.php.”

If you go to Appearance → Editor, then you are directly editing the theme files, and that is what I am trying to warn you about. If the theme gets updated, then all changes you made through the editor, no matter how large or how small, will be lost. I think you have the concept behind the use of child theme backwards. The child theme itself is never updated, only the parent theme. Using a child theme actually protects your modifications from theme updates. If you update the parent theme, then your child theme modifications to header.php will remain intact. That is also the reasoning behind using a CSS plugin. Most plugins will store their settings in a database table, so those additions will also not be affected by theme updates.

Of course, it’s your site and you are free to maintain it the way you wish. I just wanted to warn you of the potential problems with modifying the theme directly. Your modification is small enough to where you can easily re-add the style sheet through the editor when the theme gets updated. Just keep a current copy of the stylesheet around somewhere so you can re-paste it in.

Thank you for the clarifications, CrouchingBruin.

Based on your advice, someday I hope to try child themes. Meanwhile, I hope you understand, good suggestions do not always work out for me–as I have discovered in the past when I had a lot of sleepless nights modifying WordPresses and such. Eventually I decided that–until I find a local friend to work with directly–I no longer have the time to experiment, and must stick with what I know.

I agree, it is important to document and save any software modification. I have a text file for that.

However, I also suggest to all my friends who operate WordPress sites: for every update of every web page, always do a Browser > File > Save As > Complete Web Page. So if you get hit by a hacker–or if your webhost goes out of business–or anything whatever goes wrong with the standard restore or backup systems–you can always reconstruct every page manually at any webhost.

This “Save As” method of course automatically will save a copy of the latest embedded <style> sheet in the source code of every page via Header.php. I.e. with my system of a head-insert style sheet, then so long as I have a backup of the web page, I have a backup of the key custom modifications. This might not be the best method. However, it is simple, fully understood by me, and therefore bulletproof so long as that particular Theme is available.

Therefore I also use only “Twenty Something” themes, aka standard out-of-box WordPress themes, always likely to be available. In the past, the out-of-box themes did not have “flexible layout,” therefore causing sidescrolling for anyone who wanted to reduce eyestrain by enlarging the text. In my opinion, this is intolerable and inexcusable. Since the “Twenty Eleven” theme, however, “responsive layout” has become a standard feature–apparantly an upgrade on “flexible layout.”

Therefore, I am happy that I can keep my life simple–and build tolerable free websites for friends–that can reliably be backed-up and restored–simply by using WordPress and out-of-box Themes and CSS style head-inserts and the “Save As” protocol.

I would appreciate a little help with the CSS commands. That is why I started this discussion. But otherwise, going as far as I can by myself, I have nonetheless gotten my system to be tolerably functional as well as idiot-resistant. (And, even if nobody makes the CSS suggestions, I am glad to have learned a few things from CrouchingBruin and Santeven.)

OK, sorry, going back to your original post, it seems that your CSS is being used, at least when I inspect the site in both Chrome and Firefox. The entry-title on the home page is displaying at 20px with padding 0 and the correct margins. The site-title is also using your custom CSS, so I’m not sure exactly what might be wrong when you view it.