Centering header in vanilla theme

[Liam_Mitchell]

I'm trying to get the edges of a header image to line up with the boxes below. As it is, the header is off center - see here: http://i.imgur.com/zmsrv.png.

I poked around in common.css and vanilla.css, but I don't know much about CSS and only a little about HTML, so obvious solutions jumped out at me. Any ideas about how to fix this? Thanks.

[jmacgreg]

Hi Liam_Mitchell,

One way to figure this kind of thing out is to look at other journal examples, some of which can be found here. Also, a tool like Firebug really helps with the HTML/CSS modifications, as it can help you find exactly which part of the page you are trying to fix, among other things. As well, you will want to pay attention to the order in which stylesheets are referenced, as each successive stylesheet overrides the previously-called one. In this case, you should have one common.css (or two, if you are using newer versions of OJS), followed by the theme stylesheet, vanilla.css. You probably want to focus on making changes to the header and/or headerTitle ids, and ensure that the changes are made in or added to plugins/themes/vanilla/vanilla.css.

Cheers,
James

[Liam_Mitchell]

Thanks for the quick and helpful response. I played around with Firebug, and it looks like the problem is in common.css with #headerTitle and #header h1. I changed them to this:

#headerTitle {
margin-bottom:15px;
margin-left:0; /* changed from -7% to 0 */
padding:0;
text-align:center !important;
width:120%;
}
#header h1 {
font-family:Georgia,'Times New Roman',Times,serif;
font-weight:normal;
line-height:130%;
margin:0 auto;
padding:0.5em 0 0.25em 0%; /* changed from 10% to 0% */
}

That looks fine in Firebug. I'm really pretty new to this, though, so I'm not sure what to do next. Do I save the file as common.css to override the original, and then upload it in the journal setup? Do I save it as a different file? I tried that, and the result was waaaaay different than what Firebug led me to expect.

Thanks again for the help.

[jmacgreg]

Hi Liam,

You may want to add the values to plugins/themes/vanilla/vanilla.css. You only need to add the values that have changed from the default common.css, eg. something like the following:

Code: Select all

#headerTitle {
margin-left:0
}

#header h1 {
padding:0.5em 0 0.25em 0%;
}

You may want to check vanilla.css to see if those values are already stored in there.

And to be entirely safe when it comes time to upgrade, you may want to take one additional step. An upgrade will most likely overwrite both common.css and vanilla.css (depending on how carefully you do the upgrade -- whether you check for changed files, etc.). You could just keep a note somewhere saying which files have been changed and not to overwrite them when you replace old application files with new; use the "patch" method of upgrading (notes for this are in docs/UPGRADE); or you could create your own theme plugin and copy the vanilla.css file over. It's a little more labour-intensive, but it's the "right" way to do things. Let me know if you have any questions!

Cheers,
James