CSS in moodle

CSS in moodle

by Matt Hopper -
Number of replies: 28

I'm trying to change something in the standard theme where my moodle site is pulling from.

I change the background color and font color.

Hit refresh on the browser.

and it doesn't work.

I'm working on the standard theme. I have it selected for modern browsers. I changed the core.css.

Is there something that need to change on the php end? if so, what?

Average of ratings: -
In reply to Matt Hopper

Re: CSS in moodle

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

Are you using Moodle2? If so, make sure you have cleared the cache (in moodle as well as your browser) or set theme designer mode on in the theme settings page. In order to speed up page loading times, moodle2 caches various things like language strings and css and these need to be cleared when making changes to themes and so forth.

Richard

PS. I would strongly recommend making a copy of the standard theme and editing that rather than the original as this will prevent your changes being overwritten when upgrading in the future

In reply to Richard Oelmann

Re: CSS in moodle

by Matt Hopper -

I did in fact turn on theme designer mode well before coming here.

 

 

In reply to Matt Hopper

Re: CSS in moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You could try Purging All Cache (Site Administration > Developement > Purge All Cache...that may work better for you. Also clearing your browser cache may also help.

What exactly have you changed in  standard/core.css? Have you put in the correct css rules? Have you checked to see that the syntax is correct, missing ; or } can cause big problems.

Might it be you are changing the right file but in the wrong folder? It's happened to a few people on a number of occasions.

Mary

In reply to Mary Evans

Re: CSS in moodle

by Matt Hopper -

the background color in body and the text color in body.

 

i've checked. it's correct syntax.

In reply to Matt Hopper

Re: CSS in moodle

by Matt Hopper -

specifically... the code that has changed is:

 

html, body#tinymce {background-color:#cccccc; color:#990000;}

 

Is the problem that i put it in the #tinymce?

In reply to Matt Hopper

Re: CSS in moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Which element are you trying to change the background color?

In reply to Mary Evans

Re: CSS in moodle

by Matt Hopper -

whole thing.

 

I may have determined that it's not a css or moodle issue at all.. may be the PC i'm working on.

...Or maybe i just suck. tongueout

In reply to Matt Hopper

Re: CSS in moodle

by Matt Hopper -

also the version i'm using IS in fact version 2.02

 

I'll let you all know if and when it gets fixed.

In reply to Matt Hopper

Re: CSS in moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Matt,

Can you tell me what kind of system you are running so that I can at least get nearer to finding out what your problem is likely to be caused by?

Can you list ...

computer (pc or mac)
operating system (xp/windows 7/etc)
server type (local or hosted)

Thanks

Mary

In reply to Matt Hopper

Re: CSS in moodle

by Danny Wahl -

I highly recommend using something like IE9 or Safari's developer tools or Firefox or Chrome's Firebug to be able to check the inheritance of your rules - it could just be that your rule is being overwritten somewhere later down the road.

In reply to Danny Wahl

Re: CSS in moodle

by Frank Ralf -
Daniel is right, use Firebug for peeking under the hood of your website. CSS FAQ and Themes FAQ are also good starting points for learning more about CSS and theming.

hth
Frank
In reply to Frank Ralf

Re: CSS in moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I'm quite sure Matt knows what he is doing, but what bothers me is that none of his changes are being picked up in his version of Moodle, which suggest to me there is something wrong somewhere.

Of course he could just be having a joke with us just to see how many people he can get to answer his vague questions. LOL

In reply to Mary Evans

Re: CSS in moodle

by Matt Hopper -

... no.. not a joke.

 

i think that it's like a localhost server problem. It's kind of hard to explain (type down) but I asked the people who own the box (it's like a test server) tell me they have fixed the problem.

i'll let you know if that's the case....

In reply to Matt Hopper

Re: CSS in moodle

by Matt Hopper -

It is...

 

turns out i was pulling from an ENTIRELY different folder. and now i'm stuck with looking at read-only css documents.

if i figure out how to edit them = success!

In reply to Matt Hopper

Re: CSS in moodle

by Matt Hopper -

I was able to edit it... FINALLY!..

 

I want to thank you all for your help in any case. And i'm sorry that it turned out the way it did.

Turns out? Linux was the problem. i have to access it in a weird way. but i am now able to edit it to my hearts content!

Thank you all for showing your support and helping me with the non problem... again sorry how it turned out but it's woking now.. thanks!

In reply to Matt Hopper

Re: CSS in moodle

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

Hi Matt,

For my benefit, in what way was Linux a problem? I use Linux all the time as my localhost (and the webserver I use has a Linux base as well - as do many others) and have yet to experience any difficulties in accessing files/folders either on my local machine or on the web.

Richard

In reply to Richard Oelmann

Re: CSS in moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Richard,

I think Matt means using the Linux terminal to change permissions for files and directories from 660 to 777.  At least this is my understanding, reading between the lines.  As I mentioned before, this thread it is all too abstract...lots of grey areas have been touched on, but not enough to grasp what the problem really was.

It's been one of these weeks for Matt I think...

But now it's fixed!!!

 

In reply to Mary Evans

Re: CSS in moodle

by David Emmett -

Hi

Is there a way to change some of the activity icons using CSS in Moodle 2.0?

Cheers

Dave

In reply to David Emmett

Re: CSS in moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Tim is right...you don't need to change any CSS, just add new icons of the same pixel size into the pix, pix_core, or pix_plugins directories in your chosen theme. If you look at one of my themes Arctic you will see various icons in the pix, pix_core, and pix_plugins directories which relate to those areas where you see icons like forum, or quiz etc.,

HTH

Mary

In reply to Mary Evans

Re: CSS in moodle

by Matt Hopper -

sudo nautilus help me there :P

 

but now another problem arises. the layout css is not in the themes file... therefore I can not get at it to edit it...

pagelayout.css is what i'm looking for and for some odd reason it's not in the "style" folder in the "standard" folder... I may be missing something simple here, or this is, again, permission issues, but is the pagelayout stored somewhere else? can I just create a pagelayout in the style folder to overwrite it?

 

EDIT: the tread is slowly getting mashed into the sidebar!!!  >>>

 

surprise

In reply to Matt Hopper

Re: CSS in moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I should have told you this at the start.

What you should do is make a 'clone' of the theme you want to customise.
you should NEVER change core files. Making changes to Base theme which is what you will be attempting to do next. This will only leade to total dispare and waste a lot of your time, and ours too, getting you out of the trough.

So without further ado, take my advice and go do some reading up on Moodle 2.0 Themes there are enough of them about!

Here's a good place to start.

How to clone a Moodle 2.0 theme by Mary Evans

As for this comment getting nearer and nearer to the side >>> you can always change the way you see these posts. There is a dropdown menu at the top! smile

Cheers

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: CSS in moodle

by Matt Hopper -

... soooo... i create the layout folder...

 

i asked because there isn't a layout folder...

 

thanks for the link. that page is going to get some mileage smile

In reply to Matt Hopper

Re: CSS in moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Standard theme does not need a layout folder because it uses base themes layout files. But if you want to clone standard then you will need to add layout folder and add the frontpage.php and general.php if you want to add images in the header part of those files.

In reply to Mary Evans

Re: CSS in moodle

by Matt Hopper -

it seems i can't find the base theme layout files....

if i could i'd just create a new layout folder and drag and drop what i need. then just work away at it.


....i am dumb... i never thought there would be a BASE theme...

annnnddd it's straight up and down php...