Blocks - Change font and font color.

Blocks - Change font and font color.

by Dave Jewitt -
Number of replies: 6

I am able to change the color of the blocks, but with the color scheme, the text isn't very visable.
How easy is it to change the font color?

Thanks in advance.

Average of ratings: -
In reply to Dave Jewitt

Re: Blocks - Change font and font color.

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

Using CSS it's easy.

.block .header h2 { color: blue; }

or

.block .header h2 { color: #003366; }

or

.block .header h2 { color: rgb(123,123,123); }

All work in Moodle.

As for the Block it all depends on where you want to change the font color.

I have given you the header CSS (see above) but if you want to style the contents with something like...

.block .content { color: #FF0000; } /* red */

Using FireBug with Firefox is also useful for finding which bits of CSS you need to change to get the results you want.

Hope this helps?

Mary

In reply to Mary Evans

Re: Blocks - Change font and font color.

by Dave Jewitt -

Thanks Mary,

That worked out great.
Been ages since i used CSS and even then it wasn't to any great extent, so still figuring a lot out.

Unforuntatley I can't use FireFox since I'm on the College's system and they are rather stringent about what programs are installed.

Thanks for all the advice though!

In reply to Mary Evans

Re: Blocks - Change font and font color.

by mary faro -

i want to change the color of dates like this  "Wednesday, 18 March 2015, 4:53 PM" , in forum and news.

author and date


as i checked  in firebug, the class named author  contains the line which i want to change color


author class to change font and color with css


what should i write in css part of theme?

In reply to mary faro

Re: Blocks - Change font and font color.

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

.author {color:#ff0000} - change the color to what you actually want

This will also change the word 'by' but the author name itself wont change as that is styled as a link.

You may need to look at the selectors in the tree above that just to make it more selective in case the class author is used elsewhere.

In reply to mary faro

Re: Blocks - Change font and font color.

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

Hi,

In order to change the Author's name as listed in the Site News or other forums, you can use:

.author a:link { color: orange; }

.author a:visited { color: blue; }

.author a:hover {color: red; text-decoration: none; }

.author a:active { color: green; }

More help here...

http://www.w3schools.com/css/css_link.asp

Cheers

Mary

In reply to Dave Jewitt

Re: Blocks - Change font and font color.

by Steve Ambro v3.8 -

If you are looking for code to be used in any php file, this message is the answer you seek.

So, depending on the level you wish to apply the code, I have had some success at the Instructor's level.  My intention is to change only that which applies to my own course and to allow other instructors to use changes if they want.  No one is required to use the colors and the code is only at the instructor's level.  I have full control of color choice with each assignment without having to change the settings in the theme.

At the assignment title level, I use:

<font color="#800000"> <font size="3"><strong>  Name of Assignment  </strong> </font></font>

and similarly,

<font color="#800000" size="3"> <strong>  Name of Assignment Grading  </strong> </font>

If you are not familiar with the #rrggbb code, the 1st two digits  are for amount of red, the 2nd set is green and the 3rd is for blue. in 00-ff hexidecimal code. 000000 = black, #9a3b00 = brown.  There are web sites that explain/show all the color codes.

If you experiment with only one coded entry for an assignment name, you will see that this has interesting effects elsewhere in Moodle. Color and font sized show up in respective column names, in e-mail messages and makes mobile devices easier to read the Moodle entries.  In the e-mail subject line: not so beneficial but readable.

Requiring SysAdmin access, you can use the "Additional HTML" in the "Appearance" section of the theme in use.  For BODY setting add:

<style type="text/css">
         .aa1, .cc1, .ee1, .hh1, .ii1, .qq1 
          {
                    font-size: 1.2em; font-weight:bold;
                    font-family: trebuchet, verdana, georgia;
                    visibility: visible;
          }

          .aa1,  { color: #6e0a8a; }   Violet
          .cc1,  { color: #0a1d8a; }  Blue
          .ee1,  { color: #8a0a3f; }   Red
          .hh1,  { color: #444444; }  Grey
          .ii1,   { color: #0a8a6e; }  Teal    
          .qq1,  { color: #1d8a0a; }  Green
</style>

Now the assignment title is reduced to:  <span class="hh1">Assignment title</span>

In this case, the title shows up in the color of Teal and now any instructor can use the option. Of course you can use any code you want for the class name (.aa1 etc)

CAUTION: I initially used .r1 and ended up overriding a default color/font in the quiz!  (-:

Maybe this can help....
Please feel free to ask about the code if you want.