Themes

 
 
Picture of David Scotson
linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Any hints on how to do this, myself and another poster (http://moodle.org/mod/forum/discuss.php?d=212880) seem to be having difficulty with this.

I've made a suggesting in that post, that seems to be working for me, but I'm worried it might be subtly broken.
 
Average of ratings: -
It's only an avatar...
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Normally, at least this is what I use to do years ago, was add something like the code as shown below in the <head></head> tag of my webpages.

<style type="text/css">
<!-- /* $WEFT -- Created by: Mary Evans (webmaster@visible-expression.co.uk) on 23/02/2012 -- */
  @font-face {
    font-family: Vivaldi;
    font-style:  normal;
    font-weight: normal;
    src: url(VIVALDI0.eot);
  }
-->
</style>

where the .eot file needs to be in your root directory.

so what is needed is something similar to what you use in your theme's config.php to add JS scripts so would look like...

$THEME->fonts = array('VIVALDI'); where the custom font file is in theme/yourtheme/font

But how to produce the code that would  make $THEME->fonts work.

Look at Sky High theme as Julian has tried something there. Not sure if it works though.

Cheers

Mary

 
Average of ratings: -
It's only an avatar...
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

What I forgot to say, in my last comment above, is that you just use the same CSS markup as normal. In the case of the font I referenced above you would write the css like so...

h1 { font-family: Vivaldi, serif; font-size: 36pt;}


Like I said before it's ages since I worked with this type of fonts, but the newer online typeography like Google fonts work great, by just adding a normal link in the head of your layout pages.

There is an example in Tiny where I chose a really fancy font.

Hope this helps?

By the way I use WEFT to make the .eot font files.

Mary

 
Average of ratings: -
It's only an avatar...
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

OK here's what you need to do...

add a font directory to your moodle theme, and drop a ttf font file in it... like so...

for example:

../moodle/theme/bootstrap/font/mordred.ttf

in your css add the @font like so...

@font-face {
      font-family: mordred;
      src: url( http://localhost/moodle/theme/bootstrap/font/mordred.ttf ) format("truetype");
    }

It's best to write the full path to the font/filename.ttf

and some ordinary CSS to call the font like so...

h1 { font-family: mordred; font-size: 24px; color: red; }

And that's it!

HTH

Mary

 
Average of ratings: -
Picture of David Scotson
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
So currently there's the [[pix:theme|name_of_icon]] stuff that does this for icons (with the extra trick of not worrying about the file extension. Can I write a "csspostprocessor" for my theme that'll do the same but replace [[font:theme|name_of_theme]] with the correct full URL? And is there any documentation on how those csspostprocessors work?

I'm thinking that just "name_of_theme/etc." might work for the URL you actually output in the CSS, since Moodle collects all the CSS and serves it from theme/styles.php so you only need to get the relative path from there. I was doing "../theme" and that's probably and unnecessary step down and then up.

And after thinking about it, the javascript problem won't affect the stylesheets as unlike the header code the CSS won't be pulled into random PHP files in various directories but will always be called by theme/styles.php (or styles_debug.php) and so relative paths that work in one page, will work in all of them.
 
Average of ratings: -
It's only an avatar...
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Just got this to work using custom settings similar to adding URL for an image and colour codes for links etc.

By the way, the post_process is defined in moodle/lib/outputlib.php which you will find HERE at line 931

I managed to created something similar for fonts, which did not break anything in my theme, but I could not quite fathom out how to get it to work, and so went for a simple solution, that of getting the user to supply the variables.

So now I have this...

/* Custom CSS Settings
-------------------------*/

h1.headermain {
    font-family: setting:fontface;
}

@font-face {
      font-family: setting:fontface;
      src: url(setting:font) format("truetype");
}

setting:customcss

and a setting page that looks like this...

And it works! smile

Mary

 
Average of ratings: -
Picture of David Scotson
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

Is the setting:whatever stuff part of core Moodle or do you need to add that to the csspostprocessor yourself?

I'm getting my theme CSS from upstream sources, so it would actually be best for me if I didn't have to manually edit the CSS at all in order to get it to work with Moodle. So I'm currently doing this:

function processor($css, $theme) {

    $find[] = "../img/glyphicons-halflings";
    $replace[] = current_theme() . '/pix/glyphicons-halflings';

    $find[] = "../font/fontawesome-webfont";
    $replace[] = current_theme() . '/font/fontawesome-webfont';

    return str_replace($find, $replace, $css);
}
 

As far as I can tell (and semi-confirmed by one of the comments in the code you point to) the CSS and images are always created from the same place in the theme directory, so you can create relatively straightforward relative links as long as you know the theme name as that gives you the directory.

So I think just hardcoding "theme_name/folder_within_theme/item.ext" should work for fonts (and images too, if you know for sure what the extension is going to be).

The only difficulty then is that if you rename the font directory then things will break until you do some find'n'replace. It might make sense to have a

<a href="http://docs.moodle.org/en/theme" title="Moodle Docs - theme">theme</a>

variable that can be used for those purposes.

edit: so that explains why people keep leaving links to non-existing docs pages, you need to escape the double square brackets!

 
Average of ratings: -
Picture of David Scotson
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
I really like the way the text "Beach Hut" and "Moodle Studio" looks there, the combination of distinctive display font and color choice makes it seem like a custom logo rather than "real" text.

A neat twist would be to let users specify a short bit of text, and a color, then select a Google Font. Google lets you tell them what text you want to display by adding text=Blah to the end of their font URL and they only send the bits of the font you require to make it faster to load (http://googlewebfonts.blogspot.co.uk/2011/04/streamline-your-web-font-requests.html).

You can then add all sorts of text effects with CSS3 (e.g. http://www.1stwebdesigner.com/css/css3-text-effects-typography/). I wonder if you can recreate the Moodle logo just with CSS?

 
Average of ratings: -
Picture of Allan Watson
Re: linking to fonts from CSS?
 

My solution to this problem was to move the css that links to the font folder into into the head section of the layout file. Ideal if it's just a small bit of css.

I placed it at the top of the head tag, before the rest of the css is initiliased.

<head>

<?php $themeurl = $CFG->httpswwwroot.'/theme/'.current_theme();?>

<style>
@font-face {
font-family: 'icomoon';
src:url('<?php echo $themeurl; ?>/fonts/icomoon.eot');
font-weight: normal;
font-style: normal;
}

</style>

...

</head>

 
Average of ratings: -
Picture of koen roggemans
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Translators

There is also this bugreport https://tracker.moodle.org/browse/MDL-23493 that might be helpfull

 
Average of ratings:Useful (1)
Gareth J Barnard
Re: linking to fonts from CSS?
Group DevelopersGroup Particularly helpful Moodlers

Customised settings is quite easy to do, I've done the same sort of thing as the tracker:

config.php:

$THEME->csspostprocess = 'theme_user_settings';

css file:

@font-face {
font-family: 'QuattrocentoSans';
font-weight: normal;
font-style: normal;
src: url('[ [ setting:fontwww ] ] QuattrocentoSans.otf');
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, input, textarea, html, body {
font-family: "QuattrocentoSans", Helvetica, Arial, sans-serif;
}

lib.php:

function theme_user_settings($css, $theme) {
$css = theme_set_font($css);

return $css;

}

function theme_set_font($css) {
global $CFG;
$tag = ' [ [ setting:fontwww ] ] ';
$css = str_replace($tag, $CFG->wwwroot . '/theme/mytheme/style/font/', $css);
return $css;
}

Note: Extra spaces between the '[' so that the code shows up on the forum.

Often the hard bit is getting the location of the file within an installation and not the actual name of the font.

In theory you could do the same with the font name as a setting.

Cheers,

Gareth

 
Average of ratings:Useful (1)
It's only an avatar...
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

That's more of less as I have done this in my Tiny Bootstrap Project, but just seeing your version here I now realise where I have gone wrong as I added my font directory outside the CSS and forgot to adjust the path!

Cheers

Mary

 
Average of ratings: -
It's only an avatar...
Re: linking to fonts from CSS?
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Thanks to you Gareth, I've got my Font working now!

 
Average of ratings:Useful (1)
Picture of Deon Van
Re: linking to fonts from CSS?
 

Hi Gareth,

I've been struggling with this for a while now. I want to use an icon font from icomoon.eot in a block.

I have done as you mentioned above:

config.php (I'm assuming it's the config file of my theme):

$THEME->csspostprocess = 'theme_user_settings';

lib.php (Again I'm assuming it's the lib.php of my theme):

function theme_user_settings($css, $theme) {
$css = theme_set_font($css);
return $css;
}

function theme_set_font($css) {
    global $CFG;
    $tag = ' setting:fontwww ';
    $css = str_replace($tag, $CFG->wwwroot . '/theme/fadeback/font/', $css);
    return $css;
}

core.css of my theme:

@font-face {
    font-family: 'icomoon';
    src:url('setting:fontwwwicomoon.eot');
    src:url('setting:fontwwwicomoon.eot?#iefix') format('embedded-opentype'),
        url('setting:fontwwwicomoon.woff') format('woff'),
        url('setting:fontwwwicomoon.ttf') format('truetype'),
        url('setting:fontwwwicomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

styles.css of my block:

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-home, .icon-user, .icon-books, .icon-bars, .icon-bubbles, .icon-blogger, .icon-film, .icon-images, .icon-camera, .icon-music, .icon-cart, .icon-coin, .icon-folder, .icon-phone, .icon-screen, .icon-mobile, .icon-tv, .icon-alarm, .icon-key, .icon-facebook, .icon-google-plus, .icon-twitter, .icon-feed, .icon-mail {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-home:before {
    content: "\e000";
}
.icon-user:before {
    content: "\e001";
}
.icon-books:before {
    content: "\e002";
}
.icon-bars:before {
    content: "\e003";
}
.icon-bubbles:before {
    content: "\e004";
}
.icon-blogger:before {
    content: "\e005";
}
.icon-film:before {
    content: "\e006";
}
.icon-images:before {
    content: "\e007";
}
.icon-camera:before {
    content: "\e008";
}
.icon-music:before {
    content: "\e009";
}
.icon-cart:before {
    content: "\e00a";
}
.icon-coin:before {
    content: "\e00b";
}
.icon-folder:before {
    content: "\e00c";
}
.icon-phone:before {
    content: "\e00d";
}
.icon-screen:before {
    content: "\e00e";
}
.icon-mobile:before {
    content: "\e00f";
}
.icon-tv:before {
    content: "\e010";
}
.icon-alarm:before {
    content: "\e011";
}
.icon-key:before {
    content: "\e012";
}
.icon-facebook:before {
    content: "\e013";
}
.icon-google-plus:before {
    content: "\e014";
}
.icon-twitter:before {
    content: "\e015";
}
.icon-feed:before {
    content: "\e016";
}
.icon-mail:before {
    content: "\e017";
}

studentdash.php (The php for the custom block):

        if (isloggedin()) {
            $this->title = $this->salute();
                   $this->content->text.= '<div class="w-main centered">';
                        $this->content->text.= '<section class="mtm clearfix" id="glyphs">';                
                        $this->content->text.= '<a href="'.$CFG->wwwroot.'/course/index.php">';
                        $this->content->text.= '<span class="boxes" id="box1">';
                            $this->content->text.= '<span aria-hidden="true" class="icon-home"></span>';
                            $this->content->text.= '&nbsp;Home';
                        $this->content->text.= '</span></a>';
                        $this->content->text.= '<a href="'.$CFG->wwwroot.'/course/index.php">';
                        $this->content->text.= '<span class="boxes" id="box2">';
                            $this->content->text.= '<span aria-hidden="true" class="icon-user"></span>';
                            $this->content->text.= '&nbsp;Edit Profile';
                        $this->content->text.= '</span></a>';
                        $this->content->text.= '<a href="'.$CFG->wwwroot.'/user/edit.php?id='.$USER->id.'&course='.$COURSE->id.'">';
                        $this->content->text.= '<span class="boxes" id="box3">';
                            $this->content->text.= '<span aria-hidden="true" class="icon-books"></span>';
                            $this->content->text.= '&nbsp;My Courses';
                        $this->content->text.= '</span></a>';
                        $this->content->text.= '<a href="'.$CFG->wwwroot.'/course/index.php">';
                        $this->content->text.= '<span class="boxes" id="box4">';
                            $this->content->text.= '<span aria-hidden="true" class="icon-bars"></span>';
                            $this->content->text.= '&nbsp;My Progress';
                        $this->content->text.= '</span></a>';
                        $this->content->text.= '<a href="'.$CFG->wwwroot.'/course/index.php">';
                        $this->content->text.= '<span class="boxes" id="box5">';
                            $this->content->text.= '<span aria-hidden="true" class="icon-bubbles"></span>';
                            $this->content->text.= '&nbsp;My Messages';
                        $this->content->text.= '</span></a>';
                        $this->content->text.= '<a href="'.$CFG->wwwroot.'/course/index.php">';
                        $this->content->text.= '<span class="boxes" id="box6">';
                            $this->content->text.= '<span aria-hidden="true" class="icon-blogger"></span>';
                            $this->content->text.= '&nbsp;My Blog';
                        $this->content->text.= '</span></a>';
                        $this->content->text.= '</section>';
                    $this->content->text.= '</div>';            
    return $this->content;
    }

Unfortunately, the icon still don't appear in the font.

I've attached a screenshot of the block.

Any help would be greatly appreciated.

Regards,

Deon


 
Average of ratings: -
Gareth J Barnard
Re: linking to fonts from CSS?
Group DevelopersGroup Particularly helpful Moodlers

Dear Deon,

Odd as the "$THEME->csspostprocess = 'theme_user_settings';" matches the "function theme_user_settings($css, $theme)" definition so they are linked.  They probably should be more unique though like "theme_fadeback_" as the prefix to all the function names rather than "theme_", like:

$THEME->csspostprocess = 'theme_fadeback_user_settings';

...

function theme_fadeback_user_settings($css, $theme) {

$css = theme_fadeback_set_font($css);
return $css;
}

function theme_fadeback_set_font($css) {
    global $CFG;
    $tag = setting:fontww';
    $css = str_replace($tag, $CFG->wwwroot . '/theme/fadeback/font/', $css);
    return $css;
}

But I don't think that's the issue.  It is worth looking at the 'Network' tab of the developer tools in Chrome or Firebug to see if the fonts are being downloaded and examine the contents of the CSS.  This is easier with developer level Debugging.  I've never used the 'content' attribute before but I suspect that its application to the styles (and possibly their definition) in the markup is the issue.  I assume the theme is in the '/theme' folder?

You mention a 'block' is this within the theme or placed in the '/blocks' folder?

Could you post a copy of the theme so I could have a look / test please.

Cheers,

Gareth

 
Average of ratings: -
Picture of Deon Van
Re: linking to fonts from CSS?
 

Hi Gareth and Mary,

Thanks a lot for having a look at this.

I have attached the zipped code of the block. The block is a block and not part of the theme. Perhaps making it part of the theme would actually solve the problem...? If all else fails I'll try that.

I will also attach a zipped copy of the theme (without the pix folder) in the next post as well as a copy of the CSS shown in Firebug when loading the page.

Gareth seems to be right, even after changing the function names to the more unique names the font still doesn't load. And I checked for 'icomoon' (the font) in the css in Firebug and couldn't find it. So, the font is not being downloaded.

Regards,

Deon

 

 
Average of ratings: -
Picture of Deon Van
Re: linking to fonts from CSS?
 

Hi Gareth and Mary,

Here is the zipped theme file.

 
Average of ratings: -
Picture of Deon Van
Re: linking to fonts from CSS?
 

And here is the file containing the CSS shown in Firebug when loading the page.

I should probably have mentioned this before,

but I am developing on an Ubuntu machine and my Moodle version is:

Moodle 2.5.1+ (Build: 20130815)

Again, thanks a lot for your help.

Regards,

Deon

 

 
Average of ratings: -
Gareth J Barnard
Re: linking to fonts from CSS?
Group DevelopersGroup Particularly helpful Moodlers

Dear Deon,

Thanks for posting both the theme that defines the font and the block that uses it.  So, I think I've found it, although when I retested I could not make it fail.  Anyway, you had spaces in the search string to replace so I think it could not have found the string and completed the correct URL, so I changed:

to:

and tidied up the code and the member variable definition in 'config.php' as you had two assignments for:

$THEME->csspostprocess

And there were some other issues like no language file, logo, screenshot, and no 'access.php' for the block.  So I've corrected those to a certain extent but you will need to edit and finish them off.

Screen shot of solved problem in next post and new versions of the theme and block.

Cheers,

Gareth

 
Average of ratings:Useful (1)
Gareth J Barnard
Re: linking to fonts from CSS?
Group DevelopersGroup Particularly helpful Moodlers

Solution:


 
Average of ratings: -
Gareth J Barnard
Re: linking to fonts from CSS?
Group DevelopersGroup Particularly helpful Moodlers

New 'studentdash' block.

 
Average of ratings: -
Gareth J Barnard
Re: linking to fonts from CSS?
Group DevelopersGroup Particularly helpful Moodlers

New fadeback theme.

 
Average of ratings: -
Picture of Deon Van
Re: linking to fonts from CSS?
 

Hi Gareth,

Wow, I am humbled by the extent to which you helped me. Everything's working well now.

Thank you so much.

Regards,

Deon

 
Average of ratings:Useful (1)