How to change the header styles etc

How to change the header styles etc

by Jason De Donno -
Number of replies: 10

Hi

I want to change a few styles, so that I can create a new, slightly altered theme. My idea was to copy the "Clean" theme and rename it, then make some alterations, then use that as a new theme with the theme selector.

Can someone point me to an online guide that can help me with this?

Thanks

Jason

Average of ratings: -
In reply to Jason De Donno

Re: How to change the header styles etc

by Just H -

https://docs.moodle.org/dev/Themes

Although depending on how slight is "slightly altered" you might be OK just adding custom CSS through the UI to whatever base them you start with.

In reply to Just H

Re: How to change the header styles etc

by Jason De Donno -

Hi

I mainly want to change the main heading. If it's easy to do, also the headings on the course pages. The main problem is the font is too big. Another problem is that they seem to have a first line indents - which headings should not have. The problem is noticeable on mobiles phones, where two word headings wrap around and look awful.

Can you tell me what css classes or selectors I should use to change this? Can i do it through the theme settings page or should I manually alter a css file? If so which file?


Thanks

In reply to Jason De Donno

Re: How to change the header styles etc

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Your best option then is probably to use a tool such as firebug, or chrome developer tools to identify the selectors you want to change - you can even use those tools to experiment with the changes to get the look you want, before adding those changes into the theme customcss setting. Most themes over the last few years, including Clean, have such a setting and its the easiest way to customise your theme if only css changes are needed (ie no changes to the layout files etc).

Use the customcss setting rather than manually altering a css file, so that your changes will persist through any future upgrades you do. The alternative would be to create a child theme with your changes, but if you are only making a few small relatively minor changes, then I would recommend the customcss setting rather than creating and maintaining another theme.

If you believe there is a bug in the design (such as a 'first line indent') you may want to propose a change through the tracker - although the 'font is too big' is probably a subjective opinion rather than a bug as, although quite a number of people do ask for them to be made smaller, I have in the past had a number of people asking for them to be larger too smile (and on occasion, different people involved with the design of the same site! smile )


Richard

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: How to change the header styles etc

by Jason De Donno -

Thanks for you advice. I agree - I just seem to be unable to change anything. I'll keep trying.

Also, whilst on the subject, do you know how to change the main news title "Site News" to something else?

/Jason

In reply to Jason De Donno

Re: How to change the header styles etc

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Try

.page-context-header .page-header-headings h1 {font-size:XX%;}

Adjust the XX% to the size you want to achieve.

I couldn't see any sign of a first line indent in the header

Clean header

In reply to Richard Oelmann

Re: How to change the header styles etc

by Jason De Donno -

Thanks for looking into this, and posting the reply. I'm sorry - I meant the course topic headings. I confused course and topics because we use topic areas as short courses.

If you have the time to try it again with a course topic, you'll see that when the heading moves onto a new-line for mobile devices, there is something wrong. There appears to be a first-line indent.


In reply to Just H

Re: How to change the header styles etc

by Stefan Stefansson -

Hi - I've got a similar problem.

I'm trying to translate the SITE NEWS on the front page. I cannot find it through the language pack search string. 

Does anyone know where (in what string) it is to be found? 

I'm talking about this text here: 

Stefan 

In reply to Stefan Stefansson

Re: How to change the header styles etc

by Sumenge Kaunang -

Dear All

I have similar problem, I want to change size of font more big than existing on the report figure ATTLS and COLLES survey below, I paste


May someone can help me how to change the size of font on the horizontal and vertical axes? also the size of legend font. 

In reply to Jason De Donno

Re: How to change the header styles etc

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Clean theme has a guide to cloning it in its own readme file. Follow that in the first instance and post back if you have any specific problems. 

Richard