unordered list CSS style in Brick (Moodle v 2.0)

unordered list CSS style in Brick (Moodle v 2.0)

by Max Monclair -
Number of replies: 19

Hi all,

For a Page resource posted in my Topic panel, I am trying to develop a custom unordered list style in the Brick theme, to look like this:

To make this work, I added these styles to the core.css file in the theme/style folder:

ul.level1 {list-style: square url(level1.jpg); font-weight:bold;}

ul.level2 {list-style: square url(level2.jpg); font-weight:normal;}

After uploading the new CSS file and clearing the cache, I get the text attributes defined in my style, but not the bullet image. I tested these styles outside of Moodle, and they worked as designed. Then I tried this as an inline style in the Moodle page, and still no bullet image.

Is there anything in the core.css or other settings for the Brick theme that would override the use of an image for a bullet?

Average of ratings: -
In reply to Max Monclair

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Max Monclair -

To clarify what I meant by testing this outside of Moodle, I put an HTML file in the style folder, referenced the core.css file, and made a sample list to see if it would work.

Here's the link to that file: http://www.geronurseprep.com/moodle3/theme/brick/style/list.html

Average of ratings: -
In reply to Max Monclair

Re: unordered list CSS style in Brick (Moodle v 2.0)

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

Hi,

What you have done is OK...it's just the way you need to write the CSS for the image. In Moodle 2 the syntax changed. The correct way is like so...

upload the image you want to use to the theme/brick/pix directory

then write the code like so...

url( [ [ pix:theme|level2] ] )

I've had to add spaces between the brackets as Moodle uses this format to link Wiki pages! 

At the top of this forum there are some tutorials links which you will find helpful. There is one that explains how to add images to Moodle 2 themes.

Development:Themes 2.0 How to use images within your theme

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Max Monclair -

That didn't do it. It is still using the default bullet style. Also, my image url references in the core.css that point to the images folder on my site's root directory work fine. I used an absolute path for those, as I did for the bullet images, though I only showed the file name in my code example (sorry, I wasn't clear about that).

I looked around the articles and tried putting the bullet images in the pix_core folder, as directed in the article you mentioned, with no luck. I also haven't seen anything in the documentation on CSS styles within themes or in Moodle in general that pointed to a solution.

One more thing I did was to change the list-style attribute to none and clear out my cache. The bullets are still there, although there are no bullets shown in the test HTML file I set up. This suggests to me that the bullet type is being defined somewhere that is overriding my style for this, even if it does not prevent me from changing the font attributes.

 

Average of ratings: -
In reply to Max Monclair

Re: unordered list CSS style in Brick (Moodle v 2.0)

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

The CSS for the majority of the fonts/list styles for Moodle come from the YUI CSS library found in moodle/lib/yui/...

This is the ul/ol set from moodle/lib/yui/3.4.1/build/cssbase/bas-min.css

/*
YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

ol,ul,dl { margin-left: 2em}

ol { list-style: decimal outside}

ul { list-style:disc outside}

To get this to not render as written above is to add  the code but reset it like so...

ol,ul,dl { margin-left: 0 }
ol { list-style: none none }
ul { list-style: none none }

Then style yours below this

HTH

Mary



Average of ratings: -
In reply to Mary Evans

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Max Monclair -

I went to lib/yui/3.2.0/build/cssbase, and found the following files:

base.css

base-context.css

base-context-min.css

base-min.css

In each of them, I found a line similar to the one you mentioned, but slight different:

ol li { list-style: decimal outside}

ul li { list-style:disc outside}

At first, I just changed the ul style in each of these files. That didn't change anything on the page. I then went and changed the ol style too (and chagned the 2em to 0 in the line preceeding these).

After each change, I cleared the cache and refreshed the page. I am still getting the default disc bullet. I looked around some more for any other CSS files that had ul style definitions, but couldn't readily find any. Not sure what to do next...

Average of ratings: -
In reply to Max Monclair

Re: unordered list CSS style in Brick (Moodle v 2.0)

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

Hi,

Just incase you havn'r set your Moodle site to Theme Designer Mode then enable it as this will save you time purging Moodle cache.

Site Administration > Appearance > Themes > Theme settings ->> in this page Theme Designer Mode is 2nd from top of page click the box to select it and then scroll to foot of page and SAVE setting. Then all you need to do is refresh you screen with Ctrl + F5 this forces a full page refresh, and resets images.

As for the CSS and ul li problems in Moodle you will need to check the parent themes for Brick which are Canvas & Base. Canvas has a text.css where ul { list-style-type: circle;} is set.

You can always exclude this stylesheet in brick theme by adding'text' to the following code which you will find in moodle/theme/brick/config.php.

$THEME->parents_exclude_sheets = array(
    'base'=>array(
        'pagelayout',
    ),
    'canvas'=>array(
        'pagelayout',
       'text',
    ),
);

This should hopefully get you nearer to fixing this.

HTH

Mary

Average of ratings: -
In reply to Mary Evans

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Max Monclair -

That didn't do it either, but your suggestion did point me in the right directions to look.

I found where this is being set. In the core.css for the Base theme is the following line:

ul li,
.course-content ul.weeks .content .summary ul li,
.course-content ul.topics .content .summary ul li {list-style: disc outside none;}

When I comment it out or change the list-style-type attribute to none, all discs disappear in my list. However, it wasn't pulling the icon from the new ul style class I had defined in the Brick core.css when I called it from my page. I copied my new ul classes (ul.level1 and ul.level2) to this css and there still was no effect.

Next, I changed the disc attribute to the ul li style above to the icon image I wanted to use for my top level list items, and it works. Now all my lists use that icon as a bullet. However, this is fine for all top-level list items, but I'd like to use a different icon for my second-level list items, hence a ul.level2 class.

So I stepped back, commented out the "ul li" and added the class ul.level1:

.course-content ul.level1 .content .summary ul li {list-style: url(my icon's path) outside none;}

And when that didn't work, I tried, simply:

ul.level1 ul li {list-style: url(my icon's path) outside none;}

That still didn't work. Is there something else I should be doing?

Average of ratings: -
In reply to Mary Evans

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Max Monclair -

I just thought of a quick question in regard to theme design that comes to mind at the mention of Theme Designer Mode.

My next project will be to create a custom theme for my site. Right now, I have a development version of the site, on the same server as the production site. Since my theme is cached, I will have to find a way to work on one without affecting the other until it's time to apply the new theme. If I set the Theme Designer Mode in one on, is that information cached, so both will be in that mode? Or will only one be set to it?

Average of ratings: -
In reply to Max Monclair

Re: unordered list CSS style in Brick (Moodle v 2.0)

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

Hi the way to do this, if you are going to be working on a production site,  is to switch Theme Designer Mode OFF, and Enable "Select theme by URL" this will allow you to play on your theme while everyone else sees the normal theme for the site.

You just add the following to the end of your sites' URL...like so...

http://www.yoursite.url/?theme=mynewtheme

or similarly

http://moodle.yoursite.url/?theme=mynewtheme

Then when you need to clear the cache simply go to yourmoodlesite/admin/purgecaches.php you can set this as an Admin bookmark.

As for the CSS in your moodle site. That is old code and was changed last year.  I know...I did the fix!

You would be better upgrading you version of Moodle.

HTH

Mary

Average of ratings: -
In reply to Mary Evans

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Max Monclair -

I'm getting ready to work on my custom theme. I did as you directed in my development copy of the site, and since I'm going to bse it on Brick, I made a copy of it, renamed it, edited every script within to the new theme name and went to try it out. It goes OK when I go to the URL http://moodle.yoursite.url/?theme=mynewtheme. But when I look under  Site Administration>Appearance>Themes, where my new theme should be it shows pluginname. I clear out my cache, go back to my Settings and now, not only does my new theme show up in the list as pluginname, but Brick also shows up as such. When I click on the one that should be Brick, the URL shows up as http://moodlesite.url/admin/settings.php?section=themesettingbrick. Same when I go to where the new theme should be. For Brick, the name is restored in the list when I go to this page. But when I go to the other one, it looks like this:

error

What other changes should I have made when making a new theme from an existing one?

Average of ratings: -
In reply to Max Monclair

Re: unordered list CSS style in Brick (Moodle v 2.0)

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

Hi,

It looks like you forgot to change the name of theme/mynewtheme/lang/en/theme_brick.php  it should look like...

theme/mynewtheme/lang/en/theme_mynewtheme.php

Then inside this file you should see all the strings for the setting page as well as the pluginname  and configtitle and all the other $strings visible in that image you uploaded here.

It looks like this...

$string['pluginname'] = 'My New Theme';
$string['region-side-post'] = 'Right';
$string['region-side-pre'] = 'Left';
$string['choosereadme'] = '<div class="clearfix">...';
$string['configtitle'] = 'My New Theme settings';

After adding these you need to Purge all caches...

HTH

Average of ratings: -
In reply to Mary Evans

Re: unordered list CSS style in Brick (Moodle v 2.0)

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

Also, when you clear your cache, I would recommend using the Purge All Caches in Site Administration > Development rather than the Clear Theme Cache, as the latter does not seem to purge the language strings you may have changed.

Richard

Average of ratings: -
In reply to Mary Evans

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Yehuda Zimmerman -

I'm having the same problem. Although I have the following code at the start of my config.php in my theme:

$THEME->name = 'mytheme';
$THEME->parents = array('base');
$THEME->sheets = array('mytheme');
$THEME->layouts = array(
'base' => array(
..... 

my pages only respond to the changes in yui/3.4.1/build/cssbase/base.css!

Since I want to use a graphic for bullets in all content on the site, is there anyway I can point to a graphic in the yui base.css?

Thanks!

 

Average of ratings: -
In reply to Yehuda Zimmerman

Re: unordered list CSS style in Brick (Moodle v 2.0)

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

All you need to do is add the css to add the bullet image in your theme's css file. The image you add to your theme's pix directory.

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Yehuda Zimmerman -

I tried that, but it didn't work. Do I need to create a specific CSS file for my theme that describes content styles or can I use the CSS that describes the blocks?

I'm a little lost.

Thanks!

Average of ratings: -
In reply to Yehuda Zimmerman

Re: unordered list CSS style in Brick (Moodle v 2.0)

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

You could make a new css file and add this to the end of the stylesheet list in your themes config.php. This would ensure it works.

Example: $THEME->sheets = array('pagelayout', core', 'bulletcss');

However, I would be inclined to use conventional CSS and not CSS shorthand as this only seems to confuse Moodle and leaves your coding open to YUI CSS taking over.

Take a look at this site which offers some good advice about lists. Also the way this menu example is coded is the format I am meaning.

http://css.maxdesign.com.au/listamatic2/vertical01.htm

Remember also to code your background image in Moodle 2.0 format: for example:

url( [ [ pix:theme|bullet ] ] ) (I have had to use spaces as Moodle would render this as a Wiki page otherwise!)

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Chaviva Kaufman -

I am working on this with Y Zimmerman.

We want to use an image for a theme specific bullet.

The theme directory has a subdirectory (mytheme) with a subdirectory (pix).

The image that we want to use for bullets (mybullet.gif) is located in the theme directory:

(..theme/mytheme/pix/mybullet.gif) and also in:
(..theme/pix/mybullet.gif).

We are using the following code in the cssbase/base.css:

ul {
    /*giving UL's LIs generated disc markers*/
    list-style-image:url([[pix:theme|mytheme/pix/mybullet]]);
    } 

we also tried:

ul {
    /*giving UL's LIs generated disc markers*/
    list-style-image:url([[pix:theme|mybullet]]);
    } 

 

Moodle does not find the image.

The following code in the cssbase/base.css does work:

ul {
    /*giving UL's LIs generated disc markers*/
    list-style-type:square;    
} 

Please advise.

I would like to see the code that Max Monclair used for his level 1.

Thank you.

Chaviva K

 

Average of ratings: -
In reply to Chaviva Kaufman

Re: unordered list CSS style in Brick (Moodle v 2.0)

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

ul {
    /*giving UL's LIs generated disc markers*/
    list-style-image:url([[pix:theme|mybullet]]);
    }

this should work if the image is in moodle/theme/mytheme/pix/mybullet.gif 

Read Development: Themes 2.0 How to use images with Moodle 2.0   ERROR

Edit: Read: Development: Themes 2.0 How to use images within your theme

Try also Purging all caches (Site Administration > Development > Purge all caches)

Average of ratings: -
In reply to Yehuda Zimmerman

Re: unordered list CSS style in Brick (Moodle v 2.0)

by Chaviva Kaufman -

Hi Mary, 

Thank you for your quick response. 

We did solve the problem, but it involved more than the location of (pointer to) the image. The image is located in the theme’s pix directory: 

moodle/theme/mytheme/pix/mybullet.gif

 Initially we defined the ul property in:   mytheme.css  (moodle/theme/mytheme/style/mytheme.css). However, Moodle was not taking the ul property from the theme’s style sheet (mytheme.css). Instead it was going through the appropriate hierarchy of style sheets.

 We added a style sheet named core.css  to our theme directory: (moodle/theme/mytheme/style/core.css). This style sheet contains the ul  property:

ul {
    /* use theme bullet image for unordered lists */
    list-style-image:url([[pix:theme|mybullet]]);
    }

We added the reference to this new style sheet in  the theme’s config.php (moodle/theme/mytheme/config.php): 

$THEME->sheets = array('core','mytheme');

Then we were able to see our custom bullets. Note: We also made sure to purge all caches and to purge the theme’s cache.

Average of ratings: -