Modifying Themes

Modifying Themes

by James Jameson -
Number of replies: 22

I have a problem with the custom theme I downloaded.

I am currently developing the theme on the localhost of a computer, however the changes made in the CSS files do not appear on the web view (http://localhost).

I have tried clearing the cache but it didnt help.

Any ideas would be greatly appreciated.

James

Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

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

I'm doing much the same on my computer, except I'm creating a new theme from scratch.

Do you use Firefox? If so have you downloaded the Firebug plugin? If not you should do so, as you will find It's a very useful tool when trouble-shooting CSS behaviour in Moodle.

Can you describe the sorts of changes you are trying to make, and which CSS file have you attempted to change todate? You may have a similar problem which I had with inline-styles.

Mary




Average of ratings: Useful (1)
In reply to James Jameson

Re: Modifying Themes

by Frank Ralf -
Hi James,

CSS FAQ and Themes FAQ are good starting points for learning more about CSS and theming.

hth
Frank
Average of ratings: -
In reply to Frank Ralf

Re: Modifying Themes

by James Jameson -

Cheers for both your responses.

Mary - Several areas seem to update, such as the header menu etc. The problem is that items such as a calendar, background colour etc doesn't change the view on the localhost web view despite changing the colour (or layout etc) in the design view.

I don't know if something is overiding the update in a different style sheet but I have been informed it does update when other organisations/people have done the same change in the CSS on the same theme for their moodle.

Cheers.

Alex

P.S. I can't download Firefox onto the computer (don't have administation rights). So many people seem to venerate it though that I may see about getting it put on my computer.

Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Wow! you cannot possibly do web design without Firefox + Firebug.

Well, that might be a bit of an exaggeration. Feel free to insert the word 'effectively' in that sentence. But really, for diagnosing what is going on with your page, it is so helpful I would not want to do development without it.

Fortunately for you, a quick Google search will tell you how to install it without having admin right. For example: http://sudhaker.com/techie-talks/smart-computing/install-firefox-adminstrator-rights.html
Average of ratings: -
In reply to Tim Hunt

Re: Modifying Themes

by Frank Ralf -
Gosh, I totally forgot about that...

There's also a portable version of Firefox which you could put on a USB stick:
http://portableapps.com/apps/internet/firefox_portable

You could even add XAMPP to that (http://portableapps.com/apps/development/xampp) - and of course Moodle - to get your own portable development environment wink

hth
Frank
Average of ratings: -
In reply to Frank Ralf

Re: Modifying Themes

by James Jameson -

Cheers, I will try and give this a go.

However will firebug identify my main issue which is why my styles won't update in the local host view.

My collegue renamed the theme which updated certain features that would not update, however now whenever I try to changing the name of the theme (to something new) it reverts to a basic white screen (changing the theme name back to my custom name then returns my features).

Could this be a different style sheet or inline styles overriding my changes?

Cheers.

James.

Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Firebug will identity which stylesheet is taking presidence over the stylesheet you are making the changes in...if this is indeed what is happening. From what you are telling us, however, about changing theme names etc. I am beginning to suspect things are getting a little muddled!

When you say 'changed the name', are you implying you have switched to a new theme via the admin area? Or have you just changed the name of your theme in your Moodle theme folder? If you do the latter, Moodle will revert back to Standard theme. If this is the case then you need to go into the Admin area and reselect the theme you are working on.


Average of ratings: Useful (1)
In reply to James Jameson

Re: Modifying Themes

by Frank Ralf -
Hi James,

To be able to help you we need some more information, e.g. which (parent) theme do you use, the CSS you changed...

A screenshot would also be helpful.

Cheers,
Frank

Average of ratings: -
In reply to Frank Ralf

Re: Modifying Themes

by James Jameson -

The parent theme I am using is the theme with automatic Menus bar (by Chen ZhongWei).

Mary - We changed the theme in the theme selector and then changed it back which did nothing. We then made a copy of the original theme folder (in the moodle-themes folder directory) and changed the name of the copied version (e.g. original = cwz_blue     Copy = James moodle). This then updated the changes we had made to the original within the copy.

Frank - As you can see from the picture altering the theme name allowed me to update the buttons on the theme. However if I now retry modifying the buttons alternative text (as an example) in exactly the same style sheet, the design changes do not update in the localhost view (I have tried emptying cache).

Cheers

James

Attachment Moodle_Issue_image.JPG
Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

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

I was under the impression that your changes were to do with CSS rather than hard coding php files.

There is a problem with browser functionality particularly in IE. If you use IE8 there is a compatablity button, which gives you a different view of the page.  You may find it works in that view. If it does then it's a browser problem, rather than Moodle.

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

Re: Modifying Themes

by James Jameson -

Apologees for being confusing. CSS changes don't show either but the main issue is with changing the php files to alter the header, footer etc.

I am confused why it won't show changes done in the php files upon a hard refresh of the local host view? As you can see from the picture when I copied the theme and changed the copied versions of the theme it updated it, but it won't update any of the changes that I am currently doing (Changing the themes name again returns you to the standard theme as you said). Is this a bug or is there a file overriding my changes?

I cannot download IE8 (it breaks the functionality of other software on the system) is there any way of doing this in IE7.

Cheers

James

P.s. Again sorry if my posts have been confusing I am just really confused myself.

Attachment Continued_issue.JPG
Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Try this in the styles_color.css of your theme and save.

body {
background-color: red;
color:#000;
}

Make sure you saved the change before refreshing your browser screen.
After refreshing your browser (ctrl+F5) the background should turn red.

I'm using red as a defined color, you can use whatever color you want your background to be.





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

Re: Modifying Themes

by James Jameson -

Thats the problem though.

I followed those exact instructions but when I do a hard refresh of the http://localhost nothing changes.

Thanks for your time on this matter

James

Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
When you make all these changes, do you make them directly in the web server (local host) folder of your computer, or do you have your theme's folder in some other part of your computer?

I use WAMP Server which is in my C:\ drive (c:\wamp\www\moodle) I access this via my browser using the URL http://127.0.0.1/moodle/ so when I make changes to mytheme's css files, I see the changes directly in the browser I have open after I refresh the screen.

You may be using some other software which works differently to mine, but I have never experienced anything like the problems you seem to be having.

I can't see any other reason why you keep on experiencing the problems you are having with your project.




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

Re: Modifying Themes

by James Jameson -

My theme changes are made at C:\moodle\server\moodle\theme in which C:\moodle is the folder that contains the downloaded package from this site.

Is this the wrong folder? If so how have I managed to make some updates already?

Just to check I am doing it correctly, how did you set up your moodle to appear on the localhost?

Cheers,

Alex.

Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Like I said earlier...I use WAMP Server which you can download HERE and there's a good tutorial which explains how to set it up. WampServer incorporates MySQL and PHPAdmin.

Once installed you can upload a stable version of Moodle into the WampServers WWW folder which is the equivalent of 'localhost'. Once that is done you mimic how one would go about installing Moodle to their website. You go through the same set up exactly.

The system you have looks like it's the Windows version of Moodle which probably works in much the same way. I would not know if you have it set up properly, but I suppose you must have otherwise it would not work at all.

Sorry I can't help further.

PS: Added in EDIT Mode...
I've just come across this information...if this is how you set up your Moodle install on your PC then this is much the same way mine works.

http://docs.moodle.org/en/Complete_install_packages_for_Windows


Cheers

Mary



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

Re: Modifying Themes

by James Jameson -

Sorry for the slow response.

Yes I used - http://docs.moodle.org/en/Complete_install_packages_for_Windows

All I have edited within this download in the themes folder, I have not uploaded a version into anything resembling a WampServer folder as far as I am aware. I think the localhost points at the whole of the moodle folder.

Should there be a folder called Localhost or WWW etc that I should be exporting it to?

Cheers,

James

Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

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

This may seem like a silly question, but is the theme you are altering/working on, the same theme that is selected in the Moodle platform you have installed on your computer? Or do you work on it in another folder, some place else on your computer, and then upload it to your theme's folder?

Also...in the time that has past, since the start of this thread/discussion, have you resolved any of the problems you first encountered?

Cheers
M


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

Re: Modifying Themes

by James Jameson -

I downloaded the theme from the moodle website into the theme folder and I worked on the theme within that directory.

I solved the first issues as Frank suggested that I should not have been making the changes in the original theme but in a 2nd copied version of the theme. When I copied the theme (renamed it) and applied the theme to my moodle it showed the updates (Does this make sense?).

However if I copy the theme again and rename it, it reverts back to the standard theme.

Its very confusing. It might be worth me trying again as I am guessing I have mucked something up.

Cheers,

James

Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
I think I understand what you have been doing, which on the face of it sounds confusing.

Making a copy of your original theme is good practice, as this ensures that you always have an original to fall back on.

Renaming your copied theme, is OK too, as long as you change the config.php doc, making sure that you declare which styles sheets you want to use as default style sheets for this new theme.

Making a duplicate copy of your new theme, and then renaming it is OK again, provided that you make the necessary changes to the config.php (if you have to that is). This is especally true if you have changed any of the stylesheet names.

Provided you have done all the right things, like checking that all the stylesheets are there in your newly named theme's folder as they should be, and your new theme folder is in the themes folder which is in your moodle folder, I can't see a problem.

What I don't realy understand is why the 2nd copy of the theme reverts back to Standard stylesheet. That is a real mystery. Perhaps someone might shine some light on it?

Mary at confused.com!!! smile



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

Re: Modifying Themes

by James Jameson -

Sorry it has taken me so long to respond. After playing with it over the last couple of weeks I removed the moodle download.

I then re-downloaded the theme to host it on that computer (not the local host though) as there was also a problem with the CSS being displayed on a remote computer.

When I reapplied the theme which I had saved before deleting the old moodle download all the updqates displayed on the screen.

Sorted for now smile

Cheers,

James

Average of ratings: -
In reply to James Jameson

Re: Modifying Themes

by James Jameson -

For anyone else with this problem, I have discovered it was a cache issue. It was resolved by;

editing my php.ini file (found at server>php folder) from;

eaccelerator.enable = "1"
to
eaccelerator.enable = "0"

Then saving my php.ini and then stopping and restarting the apache/server (XAMPP).

Average of ratings: Useful (1)