Editing themes

Editing themes

by James Jameson -
Number of replies: 20

I am using the "theme with automatic Menus bar", by "Chen ZhongWei" and was wondering if anyone had any guidance as to how to resolve a couple of issues that (being a moodle novice) are probably easy to resolve with some help .
These issues are:

Issue 1 - How to change the colour of both the static and hover links on the breadcrumb menu?

Issue 2 - Which css allows you to edit the orange line just above the footer image?

Issue 3 - I have managed to change the alternative text for the icons but I cannot change the alternative text for the logo (it still states faculty of Computer and Information).

Issue 4 - How do I move the logo so it sits at the very left hand edge of the page?

Thank you for your time in this matter.

Alex

Average of ratings: -
In reply to James Jameson

Re: Editing themes

by Petr Kalis -
If you are using Firefox, Web Developer Toolbar and Firebug are an invaluable tools.With their help you will find which files to modify.
And it won't hurt to check Theme basics docs
Average of ratings: -
In reply to Petr Kalis

Re: Editing themes

by James Jameson -

Unfortunately its a project at college so I am limited to using Internet Explorer so I don't have access to those tools.

Theme basic docs was useful in the beginning for pointers. I am at the stage where I have customised the document to my specifications by exporting the theme to Dreamweaver and editing the different CSS, PHP and web files.

The only problem is that I have searched through them all and I can't find which file contains the code to change those 4 issues.

Kind Regards,

Alex

Average of ratings: -
In reply to James Jameson

Re: Editing themes

by Frank Ralf -
Hi Alex,

CSS FAQ and Themes FAQ are good starting points for learning more about theming. There are also concrete code examples and tips for useful tools, not only for Firefox (Development:Firebug#Alternatives_with_similar_functionality_for_other_Web_browsers:).

hth
Frank
Average of ratings: Useful (1)
In reply to Frank Ralf

Re: Editing themes

by James Jameson -

Cheers.

That last tip really helped me sort some of the problems out.

Just need to work out where the CSS for the 2 colour issues are now.

Thanks,

Alex

Average of ratings: -
In reply to James Jameson

Re: Editing themes

by James Jameson -

I couldn't find the solution using the help in previous posts to solving the colour issues. I have screen shot the main problem I am having, however I realise the problem is so specific that only people using this template will probably be able to identify the solution, though any more tips from this forum would be greatly appreciated.

Kind regards,
Alex

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

Re: Editing themes

by Frank Ralf -
Hi Alex,

You really should use Firebug or one of the similar tools for other browsers to peek under the hood of your theme.

Themes_FAQ#Are_there_tools_which_help_me_creating_and_editing_themes.3F
Development:Firebug#Alternatives_with_similar_functionality_for_other_Web_browsers:

Try

div.breadcrumb li {
color: blue;
}


hth
Frank
Attachment Breadcrumb_color.png
Average of ratings: Useful (1)
In reply to Frank Ralf

Re: Editing themes

by James Jameson -

Cheers. I am on the right track now with that little bit of code you gave me.
The problem is that (as you can see on the attached image) this only seems to edit the inactive bit of the breadcrumb menu. Any ideas where/or what I should put in to edit the colour of the active bit.

Any help on the other issues would also be appreciated smile

(I am afraid when it comes the Explorer attachments I do not have rights to download software to the system).

Kind regards,
Alex

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

Re: Editing themes

by Frank Ralf -
Hi Alex,

Try enhancing your CSS in the following way:

div.navbar li, div.navbar a {
color: lime !important;
}

If you can't use any of the suggested tools you can resort to using your browser's "View source" feature to find out the relevant class names and ids:

<div class="navbar clearfix">
<div class="breadcrumb">
  <h2 class="accesshide " >You are here</h2>
<ul>
  <li class="first"><a  onclick="this.target='_top'" href="http://demo.moodle.org/">Moodle Demo home</a></li>
  <li><span class="accesshide " >/&nbsp;</span><span class="arrow sep">►</span> Course categories</li>
</ul>
</div>

BTW IE8 comes with integrated Developer Tools (http://blogs.msdn.com/brunoterkaly/archive/2009/08/03/internet-explorer-8-developer-tools-debugging-html-and-css.aspx).

hth
Frank


Average of ratings: Useful (1)
In reply to Frank Ralf

Re: Editing themes

by James Jameson -

Cheers, that top line of code worked like a charm.
Thank you very much for your help.

Now I just need to work out how to:

>The orange line just above the footer
>How to far left align the logo
>How to remove the logo's alternative text.
>How to change the colour of the box encasing todays date on the calendar

If you have any ideas please let me know. (I am not allowed to download IE8 either as it messes with other software on the system)

Thank you for your time,

Alex.

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

Re: Editing themes

by Frank Ralf -
Hi Alex,

Some first findings:

1) The alt/title text is in the header.html file (lines 66 and 141).

2) The orange border is from:

#footer {
border-top:5px solid #F57110;
}

3) The border around the calendar:

#calendar .today, .minicalendar .today {
border-color:#C93113 !important;
}

4) The calendar text:

#calendar .weekend, .minicalendar .weekend {
background-color:#DDDDDD;
color:#C93113;
}

5) The logo is a bit tricky because it doesn't have its own id. You can experiment with something like

div.headermain img {
margin-left: -4px;
}

Most settings should be in the theme's styles.php.

hth
Frank

Average of ratings: Useful (1)
In reply to Frank Ralf

Re: Editing themes

by James Jameson -

Cheers for sticking with me. The help you have given me so far is really beneficial as it is really improving my moodle and my understanding of how to edit moodle.

The problems I am facing with these hints is:

>I have found the alternative code within the header.html file however changing this code seems to have no effect on the actual moodle. Could this possible be because the logo is also running a javascript function?

> The styles for the footer line and the calendar are not in the theme's styles.php (This redirects you to the config.php but I cannot find the code in there to change either).

If you have the theme could you see if you can identify the specific files for me?

Sorry for taking up all your time. Thank you very much for all the help so far.

Alex

Average of ratings: -
In reply to James Jameson

Re: Editing themes

by Frank Ralf -
My mistake, styles.php is only for collecting all the scattered CSS files before sending them to the browser (http://moodle.org/mod/forum/discuss.php?d=64106). That's why line numbers shown by Firebug are mostly useless for Moodle theming - unfortunately.

1) The first problem could be caused by your browser's cache. Try emptying the cache, reloading the page or re-installing the theme (changing the text in header.html works, see screenshot).

2) The footer settings are in styles_layout.css, line 800 ff.

3) The calendar settings are in styles_color.css, line 544 ff.

Cheers,
Frank
Attachment alt-title_in_header.html.png
Average of ratings: Useful (1)
In reply to Frank Ralf

Re: Editing themes

by James Jameson -

Thanks for taking the time to download the actually theme, its really helpful of you.

Still doesn't work at my end though. The fact that it works for you would suggest that I should re-install the theme (as I have already emptied the browser cache).

What would you suggest would be the best way of re-installing the theme. Would this mean that I lose all the current changes I have made?

Cheers,

Alex

Average of ratings: -
In reply to James Jameson

Re: Editing themes

by Frank Ralf -
I suppose you are working with a copy of the original theme. If not, better do so wink And you should also change the name of theme.

You should save a copy of all your modified files somewhere (usual backup best practice).

If the modifications don't show that might be because you have both the original theme and your modified version installed. Be sure to have only one theme installed with a unique name so there will be no conflicts.

You should first try changing to a standard theme and then back to your own theme and check whether your modifications show.

hth
Frank
Average of ratings: Useful (1)
In reply to Frank Ralf

Re: Editing themes

by James Jameson -

Cheers renaming the theme worked perfectly, it has now made the updates.

Can I ask for one last piece of advice;
How do I change the colour of the main page Panel and the boxes that appear either side (Shown on image).

Thank you very much,

Alex

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

Re: Editing themes

by James Jameson -

Also  where the code is to edit the background of the menu bar (if that is not to much trouble) as I can't find either of them.

Cheers,

Alex

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

Re: Editing themes

by Frank Ralf -
Try this in menubar.css:

.qmmc, .qmmc ul {
background-color:lime;
}

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

Re: Editing themes

by Frank Ralf -
Try

.sideblock .content {
background-color:yellow;
}

and

body {
background-color: orange;
}


You should really install Moodle on a local PC for development and testing, see Installing_AMP with Firefox and Firebug available. That will save you lots of time!

Cheers,
Frank


"Give a Man a Fish, Feed Him For a Day. Teach a Man to Fish, Feed Him For a Lifetime"
Lao Tzu
Average of ratings: Useful (1)
In reply to Frank Ralf

Re: Editing themes

by James Jameson -

Thanks for your time. You have been a really great help.

Everything seems to be in working order now. The main problem seemed to be a conflict which (even though I was editing the correct CSS files) wasn't allowing any editions to be updated. Changing the theme and then changing it back again has fixed that now though so thanks for solving the problem.

Cheers,

Alex

Average of ratings: -
In reply to James Jameson

Re: Editing themes

by James Jameson -

Hey Frank.

Sorry to bother you, but I was wondering how you changed the colour of the main body around the boxes in this theme (as shown in the picture)?

The advice given seems to change the colour of the background but not the body panel.

Cheers.

James

Attachment Moodle_New_Problem.JPG
Average of ratings: -