OJS OCS OMP OHS

You are viewing the PKP Support Forum | PKP Home Wiki



Centering header in vanilla theme

OJS development discussion, enhancement requests, third-party patches and plug-ins.

Moderators: jmacgreg, btbell, michael, bdgregg, barbarah, asmecher

Forum rules
Developer Resources:

Documentation: The OJS Technical Reference and the OJS API Reference are both available from the OJS Documentation page.

Git: You can access our public Git Repository here. Comprehensive Git usage instructions are available on the wiki.

Bugzilla: You can access our Bugzilla report tracker here.

Search: You can use our Google Custom Search to search across our main website, the support forum, and Bugzilla.

Questions and discussion are welcome, but if you have a workflow or usability question you should probably post to the OJS Editorial Support and Discussion subforum; if you have a technical support question, try the OJS Technical Support subforum.

Centering header in vanilla theme

Postby Liam_Mitchell » Sat Jul 17, 2010 4:17 pm

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.
Liam_Mitchell
 
Posts: 2
Joined: Sat Jul 17, 2010 3:09 pm

Re: Centering header in vanilla theme

Postby jmacgreg » Mon Jul 19, 2010 12:32 pm

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
jmacgreg
 
Posts: 4186
Joined: Tue Feb 14, 2006 10:50 am

Re: Centering header in vanilla theme

Postby Liam_Mitchell » Mon Jul 19, 2010 2:03 pm

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.
Liam_Mitchell
 
Posts: 2
Joined: Sat Jul 17, 2010 3:09 pm

Re: Centering header in vanilla theme

Postby jmacgreg » Wed Jul 21, 2010 10:04 am

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
jmacgreg
 
Posts: 4186
Joined: Tue Feb 14, 2006 10:50 am


Return to OJS Development

Who is online

Users browsing this forum: Baidu [Spider] and 1 guest