Changing CSS for Moove theme

Changing CSS for Moove theme

by Andre Nel -
Number of replies: 10

Hi,  im a noob when it comes to editing ccs.  I have recently installed the Moove theme and i have made changes to the layout with inspect element in google chrome but i cannot seem to find where to copy the code into.  I have moodle installed through softacolous on web hosting.

I have also just upgraded to Moodle 3.6.2

Any help would be greatly appreciated. 

Average of ratings: -
In reply to Andre Nel

Re: Changing CSS for Moove theme

by Ross Lovell -

Hi Andre

Try the following. Go to Site administration - Appearance - Themes - Moove - Advanced settings

Then paste your CSS into the _Raw SCSS_ box.

Average of ratings: -
In reply to Ross Lovell

Re: Changing CSS for Moove theme

by Andre Nel -

the raw scss is the changed or original css?

Average of ratings: -
In reply to Andre Nel

Re: Changing CSS for Moove theme

by Ross Lovell -

It's for the changed CSS. Any changes you want to make just paste them into this box.

Average of ratings: -
In reply to Ross Lovell

Re: Changing CSS for Moove theme

by Andre Nel -

Hi,


Thanks but i keep getting an error when pasting into raw css. I’m not sure if I’m copy the right things? I inspect the element make changes and then copy that element and then past it into raw initial css.  I have tried searching granny google but haven’t come across any help. Sorry for the dumb questions

Average of ratings: -
In reply to Andre Nel

Re: Changing CSS for Moove theme

by Ross Lovell -

No problem. What error message are you getting when trying to save the CSS?

Could you paste the CSS you're trying to use here so that I can take a look at it?

It's best to start simple, try pasting or typing in some easy CSS to see how it works (you can always delete it later) for instance you could try changing the body text, heading sizes or background colours:

body { color: red; }

The trick is to find the class or style ID you want to change and use CSS in the Raw SCSS box to make changes to it.

Also make sure you're using the Raw SCSS box and not the Raw initial SCSS box for pasting in your changes.

Average of ratings: -
In reply to Ross Lovell

Re: Changing CSS for Moove theme

by Andre Nel -

Hi Ross, 


After playing around i  figured what i was copying w as incorrect, below is what i have copied into Raw css without any errors but the changes till arent made

#page-login-index.moove-login .loginpanel .card-block .instructions, #page-login-index.moove-login .loginpanel #page-enrol-users #filterform .instructions, #page-enrol-users #page-login-index.moove-login .loginpanel #filterform .instructions {
  1. background-color: #1177d1;
  2. padding: 60px 15px;
  3. color: #c0d62e;
  4. min-height: 350px;
}

Average of ratings: -
In reply to Andre Nel

Re: Changing CSS for Moove theme

by Ross Lovell -

I have a couple of thoughts:

  1. Have you tried clearing your web browsers cache and refreshing the page?
  2. You could try adding !important to the end of each CSS element (i.e. background-color: #1177d1 !important;)

Average of ratings: -
In reply to Ross Lovell

Re: Changing CSS for Moove theme

by Andre Nel -

Hi Ross,


Thanks that worked a real treat!  Last thing how would i remove html code from the site?


There some lines in my site i would like to remove


TIA

Andre

Average of ratings: -
In reply to Andre Nel

Re: Changing CSS for Moove theme

by Ross Lovell -

Excellent I'm glad it worked.

Regarding remove HTML from a Moodle site I'm afraid I don't have an easy answer for you as you're now getting into the territory of editing templates. It would depend on if the HTML is part of Moodle core or part of the Moove theme. 

If it's part of Moove Your best bet might be to get in touch with the theme designer and see if they have any advice.

If you're interested in learning more about templates here's some information for you:

Average of ratings: -