Let me start this tutorial by saying I am a neat freak when it comes to my blog. It may not always look like it (because it's in a constant state of flux) but I like everything to be nice and lined up in the same fashion. On my other blog, everything just HAS to be centered. My header and all of my widgets NEED to be lined up neatly.
Well, I recently tweaked my header a bit so that it would be better for all different browser types, and thus it ended up justified to the left! After much code exploration and trial and error, I finally found the pesky little code that needed some adjustment and here it is so you don't have to go through the same frustration I did!
First- Go to your Templates Tab:
Second, Back up your template (Always a good idea when making code edits)
Third, Click the Edit HTML Button to open this screen:
Make sure that you check the box marked "Expand Widget Templates" or you won't see all the code!
Next: Click into the HTML box and use CTRL+F to open up the search box. Search for this code:
]]></b:skin>Directly above that code, paste the following:
#header-inner img {margin: 0 auto !important;}Now Save your template and exit the HTML screen. If all went well, you should now have a nicely centered header!
#header-inner {text-align:center !important;}
No comments:
Post a Comment