Departement list ico

kouliga

Hi,
Please i would want to replace the default department list ico by customized ico like this one like but i am not able to that.

Please can you help me to do that?

Regards,

pavit

Hi kouliga

You should edit this file /templates/ja_university-t3/css/template.css around ine 1800

and edit it in this way :

FROM :

.department-list ul.department-list li.icon-1 a:before {
content: "f0b1";
}

TO :

.department-list ul.department-list li.icon-1 a:before {
content: url("../../images/icons/youricon.png");

}

Then copy into this folder templatesja_university_t3i/mages/icons/youricon.png file
Repeat same step with new images icons for icon-1 , icon-3, icon-4 etc etc

Regards

kouliga

pavit I hope that this template.css file will not be erase by the template.less file after compilation

kouliga

pavit .department-list ul.department-list li.icon-1 a:before {
content: url("../../images/icons/youricon.png");

i tried but it didn't work

pavit

kouliga I hope that this template.css file will not be erase by the template.less file after compilation

Please have a look HERE on how to isolate customizations

kouliga

pavit please when i put this
.department-list ul.department-list li.icon-4 a:before {
content: url("../images/ico/dep-4.png")} in the custom.css i have that :
which is not normal

pavit

kouliga

Please correct in your first post the url for your website, i tried to look at it but it doesn't works.

paulus1031

Hi There,

As Pavit noted

Can you check the url you included

this is what we see at the moment

Cheers
Paul

kouliga

Hi, i hope you are going well
Sorry for the link. This is the good one: http://www.issp.bf/ISSP/administrator/

Thanks

aman204

kouliga Try change this :

.department-list ul.department-list li.icon-4 a::before{content: url("/ISSP/templates/ja_university_t3/images/ico/dep-4.png");}

.department-list ul.department-list li.icon-4 a::before{content: url("/ISSP/templates/ja_university_t3/images/ico/dep-4.png");left: 0 !important;top: 0 !important;}

to position the icon properly

kouliga

aman204 Please i changed the code, but the problem is not solved! i still need your help please

aman204

kouliga I can see the positioning to be right now for the specific image

To avoid confusion or ambiquity, Kindly provide screenshot marked with annotations as to what you wish to derive

kouliga

aman204 Thanks for your reply and clarification:
Please i would want that the picture 2 to be like the picture 1. The problem i have; it is how i can change the default picture of the department list by my own picture

thanks for your assistance

paulus1031

For this to work you need some empty space below the blue part of the image as I'm assuming you want the white image icon to show on hover?

What is currency note icon being changed to?

Cheers
Paul

kouliga

paulus1031 yes you are right, i want the white icon to show on over!
the current image icon doesn't correspond exactly to what i want to put there;

please let me create some empty space around it and see

kouliga

paulus1031 Please i created empty space but it is still the same! What can i do?

aman204

kouliga To be certain of addressing your query in the right direction, Do you want to have the desired results like the screenshot which I have marked with annotations ?

kouliga

aman204 To be certain of addressing your query in the right direction, Do you want to have the desired results like the screenshot which I have marked with annotations ?

Okay, i noted!! Thanks for your advice

However, your annotations are what i want to get! Please how can i do that!

Thanks again

aman204

kouliga You will require to change this image and upload image with solely the top bg icon (Blue). Thereon, You can upload the image to similar directory path

Further, You can upload the image (white) you wish to show on hover effect and try add this to css file :
.department-list ul.department-list li.icon-4 a:hover{background: url("../images/ico/dep-4.png");}

and change bg image path in accordance with the image file name

Also, I would suggest to go through some of the relative examples here and here where you can test and try/learn as to how to change Background Image on Hover CSS