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

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

deur Guille Zapata -
Getal antwoorde: 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 !!!!

Gemiddeld van beoordelings: -
In antwoord op Guille Zapata

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

deur Mary Evans -

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

Not too sure about bullets though! glimlag



Aanhangsel bullet.png
Gemiddeld van beoordelings:Useful (1)
In antwoord op Mary Evans

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

deur 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 ?
Gemiddeld van beoordelings: -
In antwoord op Guille Zapata

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

deur Mary Evans -
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
Gemiddeld van beoordelings: -
In antwoord op Mary Evans

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

deur 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
Aanhangsel Moodle_category-id.png
Gemiddeld van beoordelings: -
In antwoord op Frank Ralf

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

deur 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.)
Aanhangsel Moodle_category-id_from_url.png
Gemiddeld van beoordelings: -
In antwoord op Frank Ralf

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

deur Mary Evans -
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
Gemiddeld van beoordelings: -
In antwoord op Mary Evans

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

deur 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.
Gemiddeld van beoordelings: -
In antwoord op Frank Ralf

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

deur Mary Evans -
Thanks for that pointer Frank... glimlag
Gemiddeld van beoordelings: -
In antwoord op Mary Evans

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

deur Guille Zapata -

Thank you both for the help!!! ... I have learned so much just by reading your posts, thank you!.
Gemiddeld van beoordelings: -
In antwoord op Guille Zapata

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

deur Mary Evans -
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
Aanhangsel category-icons.jpg
Gemiddeld van beoordelings:Useful (4)
In antwoord op Mary Evans

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

deur Guido Hornig -
Prentjie van 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?
Gemiddeld van beoordelings: -
In antwoord op Mary Evans

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

deur Frank Ralf -
I suppose you know that the Sitepoint documentation integrates in Firebug, see Development:Firebug#CodeBurner ...
Gemiddeld van beoordelings: -
In antwoord op Frank Ralf

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

deur Mary Evans -
I didn't! - Gosh! How did I miss that. Thanks again. glimlag



Gemiddeld van beoordelings: -
In antwoord op Mary Evans

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

deur Guille Zapata -
wow, you guys are great.... =0) thank you! Que la virgencita los bendiga siempre!
Gemiddeld van beoordelings: -