Themes

 
 
Picture of Rebecca Thompson
Formal White - Moodle 2.0
 

Hello all!  I have a client that has 2.0 and wants to change the block header bars (on the side bar) to a different color.  I thought I did it, like I did in 1.9 but I changed the background behind the bar.  Any ideas?

 
Average of ratings: -
Picture of Richard Oelmann
Re: Formal White - Moodle 2.0
Group Particularly helpful MoodlersGroup Testers

Hi Rebecca,

You need to change the .block .header .title section in the formalwhite.css file. Remove the background image line and add the background colour (change the 'yellow' to whatever colour you need). Alternatively, edit the gradient_h.jpg image file in the pix folder to match the required colour scheme and leave the css alone.

.block .header .title {
/*    background-image: url([[pix:theme|gradient_h]]); */
background-color:yellow;
background-repeat: repeat-x;
clear: both;
line-height: 2em;
}

HTH

Richard

 
Average of ratings: -
Picture of Rebecca Thompson
Re: Formal White - Moodle 2.0
 

Hi Richard!

It is not working...her site is www.speaktosellforum.com.  I don't get it...all my other stuff worked.

All help will be greatly appreciated.

Rebecca

 
Average of ratings: -
Picture of Helen Foster
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Sorry I don't have an answer, however I'm just moving this discussion thread to the themes forum...

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Rebecca,

Try the code as given in this screenshot...


 
Average of ratings: -
Picture of Richard Oelmann
Re: Formal White - Moodle 2.0
Group Particularly helpful MoodlersGroup Testers

Hi Rebecca,

I checked out the site you gave and the css using firebug.

There actually needs to be an additional rule that I missed in just looking at the theme on my localhost


.block .header .title h2 {
background-color:yellow;
}

I think the h2 block is there, but with no css rules so you will need to add the background-color rule to it. Obviously, again, change the yellow to whatever colour you are using (#258AA8 ??). If you are matching the blue of the rest of the page, you may also need to add a color:white; rule in the same place to make the header stand out  - although black/white is maybe a matter of preference and style rather than need there! smile

Richard

 
Average of ratings: -
Picture of Richard Oelmann
Re: Formal White - Moodle 2.0
Group Particularly helpful MoodlersGroup Testers

Snap Mary :D

Posting at the same time!!! lol!

Rich

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

GMTA - great minds think alike!

 
Average of ratings: -
Picture of Rebecca Thompson
Re: Formal White - Moodle 2.0
 

You all ROCK!!Yes  Thank you soooo much!!

 
Average of ratings: -
Picture of Richard Oelmann
Re: Formal White - Moodle 2.0
Group Particularly helpful MoodlersGroup Testers

Hi Rebecca,

Looking at the site you gave on my laptop, I noticed that the header logo was a single image and left a large empty area on the right.

I hope you don't mind - I've taken the liberty of making a suggestion that would split the logo and allow it to stretch across larger width screens. It's in a zip file with the new images as well. - The biggest problem with it is that if the logo is then changed using the formal-white settings page, it would only change the main left hand part and not all of it smile

The zip file, with the images was too large to upload here, so I'll send you a private message with a link to download it from

Hope it can be of some use to you

Richard

 
Average of ratings: -
Picture of Rebecca Thompson
Re: Formal White - Moodle 2.0
 

hello all! Ok I have managed to do more things without asking (I am really trying to learn where everything is in 2.0) I thought I changed the navbar header to the same 258aa8 color but it still shows as white and along with the header for the Middle Section (Available Classes/Topic Outline headers).

 

(I have downloaded Firefox browser with the Firebug ext-normally I use the CSS Webmaster tool for Chrome-in hopes of learning to use it in the next couple of days so I can figure out more stuff on my own. smile

 

Thanks so much!

 
Average of ratings: -
Picture of Richard Oelmann
Re: Formal White - Moodle 2.0
Group Particularly helpful MoodlersGroup Testers

Hi Rebecca,

I think, from the css of the site, that in both cases the issue is that there is an image creating the background of these areas.

.navbar {
background-color:#258aa8;
/*  border-color:#258aa8;
height: 20px; */
background: url(pix/grad/bg_bread.jpg) repeat-x;
}

h2.headingblock.header  {
background: url(pix/grad/gradient_h.jpg);
background-color:#258aa8;

}

If you remove, or comment out, the background image that will allow the background colour you have set for the navbar to show. And if you do the same, and add the background-color rule into the h2.headingblock.header section that should work on the Available Classes header too.

It maybe worth putting the css file into a standard text editor to do a find and replace to see where any other instances of this background image crop up that you may want to change - in case they are on any other pages/blocks/sections as well.

HTH

Richard

 
Average of ratings: -
Picture of Rebecca Thompson
Re: Formal White - Moodle 2.0
 

Hmmm...ok maybe I am missing something.....but it didnt work...

 

there seems to be this text:

 

navbar {
background: url("pix/grad/bg_bread.jpg") repeat-x scroll 0 0 transparent;

and I cant see it in the FW.css  is there somewhere where this is...that is where I need to go.

 

Thanks

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

it's probably from BASE theme, as this is the default theme it uses when there are no styles.

To erase that image you need to use the 'class selector' (.navbar) from the css mark-up you have listed in your comment here...and add it to you FW css file, with its associated property and value for the background image

.navbar {
background-image:none;
}
(the dot infront of the word navbar is there for a reason make sure it's there in your CSS or this won't work)
HTH
Mary
 
Average of ratings: -
Picture of Rebecca Thompson
Re: Formal White - Moodle 2.0
 

OMG...I was about to pull my hair out--I was looking for "custom.css" EVERYWHERE...and I found it-inside Moodle.  I forgot with 2.0 you have the ability to customize from inside the themes in appearance.....

<sigh> putting that note in the same safe place all yours went!

 

Thank you sooo much for being Patient with me...

 
Average of ratings: -
Picture of Ken Festa
Re: Formal White - Moodle 2.0
 

Hi, Richard, I could use some of this kind of help, if you don't mind... I'm a tech writer trying to implement a Moodle site (by that, I mostly mean that I'm not a web developer, so please pardon the sheer ignorance behind my request for help).

I wanted to make a couple of quick changes to Formal White (which I really like, but need to tweak, per direction from above). However, I'm not having any luck figuring out where (or how)to do that:

----------------------------------------------
Increase the font size:

My best guess was the font-size setting in /formal_white/style/base.css

body, div, p, li, input, option, textarea {font-size:8pt;line-height:1.5em;}
body, div, p, li, input, option, textarea, h1, h2, h3, h4, h5 {font-family:Arial, Helvetica, sans-serif;}

----------------------------------------------

Set the Header styles to font-color #003366

----------------------------------------------

Remove the line at the bottom of every table row.

----------------------------------------------


Note: I did turn on designer mode...

Thanks!

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Ken,

Using FireFox with the Add-on FireBug is an excelent way of finding out which parts of your site you want to style.

All the CSS files you need for Formal White are stored in Formal_White/styles/... folder.

Also CSS FAQ and Themes FAQ are a good starting point.

HTH

Mary

 
Average of ratings: -
Picture of Ken Festa
Re: Formal White - Moodle 2.0
 

Thanks, Mary.

I did have the general idea about where the css files are, and the notion that you can use Firebug to examine and test modifications to elements. I was a little stuck on the specifics, though. However, I have just found the spot where the font-size is set, so the mists are parting somewhat. Thanks for your advice!

 
Average of ratings: -
Picture of Will Flatbush
Re: Formal White - Moodle 2.0
 

Hi Ken

Did you manage to enlarge the font-size in formal white. Did you just change the size in base.css or also the formalwhite.css

I'm trying to do the same with my site which has the same theme, that's why I'm asking. I could use a tip.

Thanks

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Will,

If you are trying to change Font size in Formal White and you use Internet Explorer as your default browser then dont use 1.2e. or 1.5em infact done't use 'em' at all try percentages instead. Try 100% to see what that is and then either increase or decrease this value accordingly to reach the font size you need.

Font sizes are usually set in in thr body tag of the CSS file, but we are advised to add this setting to #page, so try adding this line of code in the core.css for this theme...

#page { font-size: 100%;}

HTH

Mary

 
Average of ratings: -
Picture of Will Flatbush
Re: Formal White - Moodle 2.0
 

Thanks Mary for replying all my posts. From what I understand is that you are saying I should not display the font-size: 0.95 em; in my core css, so erase that and add the code

#page {font-size: 100%}

I did that where the font was mentioned. However the size of the font seems to be the same. I bumped it up to 125% and then also 150% but it seems to stay constant. I have the designer mode on and I also keep refreshing my browser. I think there's something a bit more that I am missing.

Does line height have anything to do with it. I also have line-height: 1.4;

The whole css is written like this

body{
           font-family: Trebuchet MS, Arial, Verdana;
           font-size: 0.95 em;
           line-height: 1.4;
           margin:0;
           padding: 0;
}

I just pulled off the font-size: 0.95 em; and below this curly bracket I added what you said

#page {font-size: 100%}

Can you spot what I need to do.

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

smile You could always use that theme I sent you! LOL

There are a few fixes for Formal White Theme in the pipeline, someone is working on this section by section.  So there may well be areas which are not working correctly. I'm going to take a look at this Font Size issue and get back to you. I do know that all the fonts are overridden by a YUI font library, which isn't a bad thing, but obviously if it's not done properly it's a waste of effort, from all sides.

Mary

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Will,

There are lots of things at play in this theme, not least Base theme which seems to be governing the font-size. Set at 8pt that's pretty small. Then we have Canvas theme with 85%. So now we have 85% of 8pt which is getting smaller now. So what chance as Formal White got? None from what I could see.

By the way, contrary to my first comment about the Custom CSS Settings, there are some in this theme, so apologies for that Will.

To set your Font-Size you will need delete the code you set above and add this in it's place in your formalwhite.css file. Here again you can experiment with the 100%.

body {
font-family: Helvetica, Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
}

body, div, p, li, input, option, textarea {
font-size: 100%;
line-height: 1.5em;
}

HTH

Mary

 
Average of ratings: -
Picture of Will Flatbush
Re: Formal White - Moodle 2.0
 

Hi Mary

Thanks, you always have lots of neat advice. I think it was the helvitica font that did it - it is miniscule. So I changed that. I think I have gotten it to a better font size now.

I have lots to set up as yet. I guess you will be hearing from me quite a bit, though I'm determined to learn all the moodle stuff !

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

The other thing to note is that you won't see any changes you make to your theme unless you turn on theme designer mode.

 
Average of ratings: -
Picture of Corey F
Re: Formal White - Moodle 2.0
 

Hi Everyone,

I'm not that well versed in CSS and have been given the overwhelming yet fun task of adminsitering our Schools Moodle server. I have changed the Header to custom school logo and the background header color to #580B53
 Everything looks as I would like it to except the font color for the text "You are logged in as UserName (Logout)" is black #000000 and is barely legible with the dark color of the header background. I would like to change only the font color for the (Logout) text in the Header bar to #FFFFFF or white. I can't seem to find an article on how to change this in the formal White Theme

 

Can anyone provide alittle bit of guidance?

 

Thanks in Advance

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Yes, you need to add...

.headermenu .logininfo {color: white}

to the Custom CSS box found in your Formal White settings page at ...

Site Administration > Appearance > Themes > Formal White (link)

HTH

Mary

 
Average of ratings: -
Picture of Corey F
Re: Formal White - Moodle 2.0
 

Thanks so much for such a quick reply Mary. You are a superstar!!

 

I made the change and "You are logged in as" changes now to white but the Username and (logout) remain Black. I tried adding:

.headermenu .link {color: yellow}

 

below .headermenu .logininfo {color: white} with no success.

 
Average of ratings: -
Picture of Corey F
Re: Formal White - Moodle 2.0
 

Hi Mary,

 

Now that I see how the CSS should  look in context in the custom CSS area I was able to search for the tag and found this article. http://moodle.org/mod/forum/discuss.php?d=191732 

.headermenu a:link, a:visited {color: #C30;} from another post you helped John B with

 

Worked for me

 

Thanks Again

 
Average of ratings: -
Picture of Corey F
Re: Formal White - Moodle 2.0
 

Whoops spoke to soon.

When I added .headermenu a:link, a:visited {color: #C30;} to custom CSS in Formal white theme it changed the color to red not only for the login info header but also for every other visited link in the entire site. I then tried

.headermenu a:link {color: #C30;} and (logout) then only changed to red but the Username still remains black?

If you could spare a bit more knowledge I;d very much appreciate it.

 

Thanks Again

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi,

OK let me explain a little about how to style "logininfo".

The login info is set inside a div container which is called "headermenu" and looks like this...

<div class="headermenu">
<div class="logininfo">
You are logged in as<a href="http://moodle.org/user/profile.php">Mary Evans</a>(<a href="http://moodle.org/login/logout.php">Logout</a>)
</div>
</div>

As you can see we have Text (which I have highlighted in yellow)

and two "anchor" links which start off with <a href...> and end with </a> (which is highlighed in blue)

This is the part you need to style. So you start of with the class selectors of the two containers.

First you style for the a:link and a:visited and last a:hover like so.

.headermenu .logininfo a:link,
.headermenu .logininfo a:visited { color: blue}

.headermenu .logininfo a:hover {color: red;}

 

You have to state which parts you want to style so you have to repeat that first part.

So the CSS you need is...

.headermenu .logininfo a:link,
.headermenu .logininfo a:visited { color: blue}

.headermenu .logininfo a:hover {color: red;}

change the colours to suit. smile

Hope this helps?

Mary

 

 
Average of ratings:Useful (1)
Picture of Vicke Denniston
Re: Formal White - Moodle 2.0
 

This is brilliant, just what I needed. I am trying to change the colour of the navbar from the beige-ish colour to that of our header.

I used .navbar {background-color:#7d1a37}

I tried with and without the "background" part. If I look at it with firebug, it shows an image. I am on a hosted system, so I have no way to get to the graphic, do you have any suggestions?

And since I am asking, would it be possible to move the custom links from left justified to right? They were on the right in our old theme. and are in the way on the left. That one is more an admin annoyance, if I can change the  navbar, I will be happy

Thanks

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

To remove the navbar image as well as add colour you can write the CSS like this:

.navbar {background-color: #7d1a37; background-image: none;}

As for the custom links? What exactly do you mean by this?

Thanks

Mary

 
Average of ratings:Useful (1)
Picture of Vicke Denniston
Re: Formal White - Moodle 2.0
 

You're quick, I figured out the first part about the time you posted, though mine is a little more brute force. I copied the style from firebug and edited, I will clean is up using yours as a guide.

In the Theme Settings page you can add a custom menu above the navbar. But now that I see it with the colour change, the alignment may not be as big a deal. It's tough to figure out exactly what element it is using my resources

Unless my people complain, I may leave it as is. Thank you for your help

 
Average of ratings: -
It's only an avatar...
Re: Formal White - Moodle 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

You can shift it to the right using CSS float: right, however, there is no easy way to style the menu in that position as all the sub-menus jump out to the right by default and getting these to move the other way is neigh impossible.

If you had your old menu you could swap it so that it worked the same way, but this would mean having direct access to the theme on the server.

So you can't do anything about that, unless you swap theme to Afterburner which uses a different custom menu which can be reconfigured to work from right to left.

Hope this helps?

Mary

 
Average of ratings: -
Picture of Vicke Denniston
Re: Formal White - Moodle 2.0
 

It does, Once we had the colour contrast that made the nav bar stand out better, the left aligned menu was much less of a problem.

Thank you for your help

 
Average of ratings: -