how to add a category(categorias) img-bullet?? :S

how to add a category(categorias) img-bullet?? :S

by Guille Zapata -
Number of replies: 16
Hi!!!

Im trying to insert an image right next to categories, something like a bullet.

I went into index.php just to try, and I found this:


case FRONTPAGECATEGORYNAMES:

print_heading_block(get_string('categories'));

print_box_start('generalbox categorybox');

print_whole_category_list(NULL, NULL, NULL, -1, false);

print_box_end();

print_course_search('', false, 'short');

break;



So I went and added the following


echo "<img src='http://www.producciones3.com/hebron/server/moodles/user/pix.php?file=/2/f1.jpg'>";


right before print_heading_block(get_string('categories'));


And found that, that doesnt help at all, lol.... but, now I know how the insert and image there lol.

I believe that I have to change something in print_whole_category_list(NULL, NULL, NULL, -1, false); in order to have bullets for the categories.

but I dont know where is this that coming from, I believe its coming from mdl_course_categories in the database. But where is the code that calls out the data in mdl_course_categories ??

is printwhole_category_list a function? does someone know where is it defined? can someone help me adding this bullets?


Some one please help... thank you!.


By the way: moodle site is http://www.producciones3.com/server/moodles.

Also, below you will find a screenshot that explains in RED what I want to do and do not know how to do it.



pic.jpg


Best Regards and thank you in advanced.
Guille Zapata.

By the way, here in my country(Guatemala) ... today, sep13 is programmers day... so happy PROGRAMMERS DAY to you all !!!!

Average of ratings: -
In reply to Guille Zapata

Re: how to add a category(categorias) img-bullet?? :S

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

Read this it will give you the idea how to add images to list using CSS.

Not too sure about bullets though! smile



Attachment bullet.png
Average of ratings: Useful (1)
In reply to Mary Evans

Re: how to add a category(categorias) img-bullet?? :S

by Guille Zapata -
Thank you!!! maybe... I can do something with this.

But.. I was reading and I believe that this works but not with different images for the diff categories right?...

I mean ... can I do something like:


Categories:

Math.jpg Math Category

atom2.jpg Science Category


do you know ?
Average of ratings: -
In reply to Guille Zapata

Re: how to add a category(categorias) img-bullet?? :S

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
It should be possible to do that. If you download the LiiP theme from New School Learning you will see they have used images for the various header categories, so I don't see a problem with what you would like to do, other than how you would go about doing it. The LiiP theme is a lovely example of using CSS in this instance, so you might get some ideas from with the way they link the image to the headers, since each header image is different depending on the category for that header. Here is a link to the LiiP DEMO.

I think you would need to write some PHP to get this to work, and may be beyond you. I wouldn't have a clue where to start, but I still think it's possible, but then you would need to give each course category a unique identifier for it to work. Food for thought!

Mary
Average of ratings: -
In reply to Mary Evans

Re: how to add a category(categorias) img-bullet?? :S

by Frank Ralf -
Mary is right, you would need to give each category its own ID for targeting it with CSS. See screenshot for a proof of concept.

For some more information on the inner workings of the course categories' HTML see User:Frank_Ralf/Semantic_HTML3. (Unfortunately they are not lists as Mary suggested but nested tables.)

hth
Frank
Attachment Moodle_category-id.png
Average of ratings: -
In reply to Frank Ralf

Re: how to add a category(categorias) img-bullet?? :S

by Frank Ralf -
Come to think of it, the ID is already available in the url of the category's link! So you could use this to target your CSS like so.

(Just use background-image instead of background-color.)
Attachment Moodle_category-id_from_url.png
Average of ratings: -
In reply to Frank Ralf

Re: how to add a category(categorias) img-bullet?? :S

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
I saw the ID in the URL and wondered how you could use it. I didn't know you could do this. If this works...and your example is proof it does...then that's brilliant! Oh goody I must try this out.

Cheers Frank

Mary
Average of ratings: -
In reply to Mary Evans

Re: how to add a category(categorias) img-bullet?? :S

by Frank Ralf -
Hi Mary,

You have to use attribute selectors. Unfortunately the browser support is still buggy and there are some caveats so this might not be a very robust solution, I'm afraid.
Average of ratings: -
In reply to Frank Ralf

Re: how to add a category(categorias) img-bullet?? :S

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Thanks for that pointer Frank... smile
Average of ratings: -
In reply to Mary Evans

Re: how to add a category(categorias) img-bullet?? :S

by Guille Zapata -

Thank you both for the help!!! ... I have learned so much just by reading your posts, thank you!.
Average of ratings: -
In reply to Guille Zapata

Re: how to add a category(categorias) img-bullet?? :S

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

I have managed to do this here is my code which of course only relates to my Moodle set up, but will work in any Moodle install providing you change the image file names.

CSS:

td.category a[href="http://localhost/moodle199/course/category.php?id=1"],
td.category a[href="http://localhost/moodle199/course/category.php?id=5"],
td.category a[href="http://localhost/moodle199/course/category.php?id=11"],
td.category a[href="http://localhost/moodle199/course/category.php?id=17"]{
position: relative;
right: 20px;
line-height: 1.5em;
padding-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
font-size: 1.5em;
background-position: left top;
background-repeat: no-repeat;
}

td.category a[href="http://localhost/moodle199/course/category.php?id=1"]{
background-image: url(pix/themes.jpg); }
td.category a[href="http://localhost/moodle199/course/category.php?id=5"]{
background-image: url(pix/design.jpg); }
td.category a[href="http://localhost/moodle199/course/category.php?id=11"]{
background-image: url(pix/css.jpg); }
td.category a[href="http://localhost/moodle199/course/category.php?id=17"]{
background-image: url(pix/xhtml.jpg); }

I hope this all goes to help you achieve your goal!

Mary
Attachment category-icons.jpg
Average of ratings: Useful (4)
In reply to Mary Evans

Re: how to add a category(categorias) img-bullet?? :S

by Guido Hornig -
Picture of Plugin developers
thanks for inspiring me create my own theme.

how did you switch off the original pictures?

not just by addin beckground
what did I miss?
Average of ratings: -
In reply to Mary Evans

Re: how to add a category(categorias) img-bullet?? :S

by Frank Ralf -
I suppose you know that the Sitepoint documentation integrates in Firebug, see Development:Firebug#CodeBurner ...
Average of ratings: -
In reply to Frank Ralf

Re: how to add a category(categorias) img-bullet?? :S

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
I didn't! - Gosh! How did I miss that. Thanks again. smile



Average of ratings: -
In reply to Mary Evans

Re: how to add a category(categorias) img-bullet?? :S

by Guille Zapata -
wow, you guys are great.... =0) thank you! Que la virgencita los bendiga siempre!
Average of ratings: -