How to change color and size of website/journal title?

Hi!
I just instaled OJS 3 with default theme. It seems good for me, however I want to make title of the website (which is actualy title of only journal) bigger. I changed background color for header from OJS panel to blue one. However, now the title of the journal and menu buttons bacame black instead of white. I want to make them white too.

I tried to modify head.less files in plugins/themes/default/styles and in lib/pkp/styles/structure , but without success. I also tried to upload my css file, but it does not work. I am not very familiar with web-developing and it is my first experience with OJS, so for me it is complicated.

Would you please explaine how I can change header title size and font color, as well as color of menu buttons? Or, if possible, to provide an example of some css with such functions?

Thanks in advance!

Your question is under uncategorized. Maybe you can post your question again with a category, e.g. OJS 3 so that the support team will easily find it.

Hi @novikoffav,

The base color of the text in the header tries to determine whether your header color is light or dark, and uses white or black text to ensure that the site still meets accessibility standards for color contrast.

If you’re able to send a link to the site where I can see it, I can probably provide you with some simple CSS code to override this, though it may not be a good idea depending on how light the the blue you’re using is.

Hi, @NateWr !
Thanks for response! Yes, I see that it tries to respond. However, I also try to standartize color scheme between two websites - our main page and new OJS website, which will host the journal. In our main website colour of header is #31A3DD (49 163 221 RGB) - http://phytomorphology.org/ . Now I little changed (made it darker) color in header of subdomain (phytomorphology.org ) and currently title is white, but it is not good, because this colour does not correspond to colour in main domain. Also I would like to change the size and font to correspond with main domain (font-family: ‘Open Sans’, sans-serif), but cant do this too. I just want to make these two websites as similar as possible.

Maybe it could help you, here is css from our main website - https://drive.google.com/file/d/0Bx8B8GSqXnoTOHBHU3lSX1RtRDg/view?usp=sharing . I tried to upload this css file, but it changed nothing.

Thank you a lot!

Hi novikoffav,

The following CSS code should make sure that the title and navigation menu text remains white in the header:

.pkp_site_name .is_text,
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_navigation_user > li.in_focus > a,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_head_wrapper .pkp_search .search_prompt {
  color: #fff;
}

The easiest way to use this is to copy that into a text file, save it as a .css file, and then upload it using the Journal CSS option under Settings > Appearance.

1 Like

Dear @NateWr,
Thanks a lot! It works perfectly!
I little modified a code, changed size and weight of title.
So, final code I used is:

.pkp_site_name .is_text {
color: #fff;
font-family: ‘Open Sans’, sans-serif;
font-weight: 550;
font-size:35px;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_navigation_user > li.in_focus > a,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_head_wrapper .pkp_search .search_prompt {
color: #fff;
}

Thanks again!

2 Likes

I can’t change the size of the haeder image, please write me using OJS 3 : http://journal.alhikam.net/index.php/jrm

Hi @badruddin

This looks like a place for the small logo image. I suppose, it should stay small for not breaking the look. But you can try to write own CSS code and upload it on the site through Website Settings.