Themes

Configure typography

 
 
Picture of Nuno Nogueira
Configure typography
 

Hello,

I'm new to Moodle, so excuse me if this is a dumb question..

Is it possible to add css classes to configure the typography? I need to highlight certain parts of the text with code, exclamation points, etc.. See attachment to understand what I mean.


 
Average of ratings: -
It's only an avatar...
Re: Configure typography
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

You can add your own class selector to any text you type into Moodle when creating course material. You can then add the CSS rules to moodle via your theme's css file.

Hope that answers your question?

Mary

 
Average of ratings: -
Picture of Nuno Nogueira
Re: Configure typography
 

Not really... I copied the images to a folder but can't get to show them.

Example:

.box-info { background: #f1f1f1 url([[pix:theme|tools/box_info]]) 0 0 0 no-repeat; }

This was added to core.css together with the folder pix/tools/box_info.png

I get the background color but no image.

 
Average of ratings: -
It's only an avatar...
Re: Configure typography
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Try this instead

.box-info { background: #f1f1f1 url([[pix:theme|tools/box_info]]) left top no-repeat; }

Also...I assume you have height and width CSS rules for your .box-info container?

You may also need to enable Theme Designer Mode to see the changes. Also refreshing your browser with Ctrl + F5 will force the image to load.

 
Average of ratings:Useful (1)
Picture of Nuno Nogueira
Re: Configure typography
 

Hi Mary,

It worked, thanks!

I'm missing the height and width rules in my CSS, can't find them anywhere. The code is now:

.box-info { background: #f1f1f1 url([[pix:theme|tools/box_info]]) left top no-repeat; line-height: 40px;}

But this isnt' looking good. The image is there, the border also, but misconfigured.


 
Average of ratings: -
Picture of Nuno Nogueira
Re: Configure typography
 

Do you know how to define those rules?

 

Now I get a scroll bar with long texts, that is getting me crazy.

I tried max-width, but it was ignored.

This is what I have now for boxes:

.box-content,
.box-note,
.box-info,
.box-warning,
.box-hint,
.box-download {
    border-radius: 4px;
    background: #f1f1f1;
    border: 1px solid #ddd;
    box-shadow: 0 1px 0 rgba(255,255,255,1);
}

.box-info { background: #f1f1f1 url([[pix:theme|tools/box_info]]) left top no-repeat; line-height: 40px; padding-left:40px;}
.box-warning { background: #f1f1f1 url([[pix:theme|tools/box_warning) left top no-repeat; line-height: 40px; padding-left:40px;}
.box-hint { background: #f1f1f1 url([[pix:theme|tools/box_hint) left top no-repeat; line-height: 40px; padding-left:40px;}
.box-download { background: #f1f1f1 url([[pix:theme|tools/box_download) left top no-repeat; line-height: 40px; padding-left:40px;}

Or, if there's a templat for Moodle with decent typgraphy, I'd give it a try...

Anyway, thanks for your support!


 
Average of ratings: -
It's only an avatar...
Re: Configure typography
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Acabo de lhe enviar uma mensagem privada

Se eu puder ajudar eu vou ... OK?

não mais do presente

 
Average of ratings: -