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

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

由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 !!!!

評比平均分數： -
In reply to Guille Zapata

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

由Mary Evans發表於

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

Not too sure about bullets though! 微笑



附件 bullet.png
評比平均分數：Useful (1)
In reply to Mary Evans

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

由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 ?
評比平均分數： -
In reply to Guille Zapata

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

由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
評比平均分數： -
In reply to Mary Evans

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

由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
附件 Moodle_category-id.png
評比平均分數： -
In reply to Frank Ralf

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

由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.)
附件 Moodle_category-id_from_url.png
評比平均分數： -
In reply to Frank Ralf

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

由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
評比平均分數： -
In reply to Mary Evans

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

由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.
評比平均分數： -
In reply to Frank Ralf

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

由Mary Evans發表於
Thanks for that pointer Frank... 微笑
評比平均分數： -
In reply to Mary Evans

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

由Guille Zapata發表於

Thank you both for the help!!! ... I have learned so much just by reading your posts, thank you!.
評比平均分數： -
In reply to Guille Zapata

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

由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
附件 category-icons.jpg
評比平均分數：Useful (4)
In reply to Mary Evans

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

由Guido Hornig發表於
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?
評比平均分數： -
In reply to Mary Evans

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

由Frank Ralf發表於
I suppose you know that the Sitepoint documentation integrates in Firebug, see Development:Firebug#CodeBurner ...
評比平均分數： -
In reply to Frank Ralf

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

由Mary Evans發表於
I didn't! - Gosh! How did I miss that. Thanks again. 微笑



評比平均分數： -
In reply to Mary Evans

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

由Guille Zapata發表於
wow, you guys are great.... =0) thank you! Que la virgencita los bendiga siempre!
評比平均分數： -