modification module apparence

teamherve

Hello,
In the template simpli.

How to change the shape of module titles. Replace for example, with an icon.

What is the file to edit.
thank you

paulus1031

The same icon for all module titles or just this one?

It would depend on what changes an icon would require an override - other changes might just require css being added

Cheers
Paul

teamherve

Hello, I want to customize the titles of some module (login, user ...)

I thought that in the advanced parameter of the module, put in suffix css: icon-1.

icon-1 would be my image.

But how to modify the css, I took reference on internet on this tutorial:

/ Moduletable Title /

.moduletable h3 {
font-size: 30px;
margin-top: 0;
margin-bottom: 21px;
}
.moduletable.icon-1 h3 {
position: relative;
padding-left: 44px;
}
.moduletable h3:before {
content: '';
width: 35px !important;
height: 35px !important;
display: inline-block;
position: absolute;
left: 0;
top: 2px;
}
.moduletable.icon-1 h3:before {
background: url('../../../images/icone_joomla.jpg') no-repeat;
}

to put in joomla.css.

But with the simpli template, how to do it.

If you can guide me a little on the right track.

Thank you for your reply

aman204

teamherve I thought that in the advanced parameter of the module, put in suffix css: icon-1.

You can try add this to css file :

.icon-1 h3.module-title span:before{content: "\f073";font-family: FontAwesome;padding-right: 0.5em;}

Thereon, Change the content values accordingly from extensive list of font-awesome icons from here

Kindly ensure to clear your browser cache if changes dont reflect

teamherve

Thank you for that answer.
But my big question is, in which file.

aman204

teamherve But my big question is, in which file.

You can create custom.css file (if doesnt exist) and add the respective css code there following the similar template path as outlined here

teamherve

I created a custom.css file

.icon-1 h3.module-title span:before{content: "/icon/250x50-espaceorganismepro.png";font-family: FontAwesome;padding-right: 0.5em;}

I downloaded it in template / simpli / css

But nothing, no change

paulus1031

Can you add a link for the site so we can take a look?

Thanks
Paul

teamherve

[http://besoinaides.com/index.php/](http://)

aman204

teamherve Hi

Can you also add your admin details in edit fields in order for us to take closer look as I am unable to see reference for Css snippet responsible for bringing the icon as envisaged
For reference, You can follow thread post (5 point) procedure.

teamherve

Hello,
Excuse me, I am a novice, and I try to learn by myself. In the set of files of "simpli". Which one should we work, to customize.

I followed the indication:
create custom.

I created a custom.css file

.icon-1 h3.module-title span:before{content: "/icon/250x50-espaceorganismepro.png";font-family: FontAwesome;padding-right: 0.5em;}

I downloaded it in template / simpli / css

as I indicated above.
Should that have been enough?
Or am I totally wrong?

If I understand. For customization. we have to create a custom file, in which we indicate the modifications.

But how simpli can take into account this new file.

Excuse me Aman204, For edit fields
I put the FTP ID.
is it these identifiers that it was missing?

aman204

teamherve Hi

Kindly check as admin details have been removed now. You may add the details in format outlined below in edit fields and let the ftp details remain intact :

Site admin account
Admin panel username/password

teamherve

ok thank you

saguaros

teamherve

One suggestion is that you should not use the class suffix like 'icon-1' as in Bootstrap it provides style for icon- class and it will affect the style when you use this class. You should change to another text.

And when you add class suffix in the advanced tab of module, you should add a space before the class suffix name.

I tried to access the css file to check for you but the provided admin account is not super admin account so I can't view the template file, also check the FTP account but it doesn't redirect to the correct directory of your site.

paulus1031

Hi There,

I'm a bit unclear which is the username and which is the password for the administrator panel

Can you check they are correct and perhaps make it a bit clearer which is which

At the moment I can't log in

Thanks
Paul

teamherve

Thank you for your help and your patience.
I am sorry for the errors in the edit field.
I can not speak English very well.

I took into account Saguaros remarks

In the custom.css file I have:
.image-1 h1.module-title span:before{content: "images\imagetitre1.png";font-family: FontAwesome;padding-right: 0.5em;}

For the advanced tab of module
image-1 (with space)

name picture : imagetitre1.png
update files : images (dossier parent of site)

Excuse, again, his mishaps

paulus1031

At the moment the image is 404 so it can't display e.g the path to the image is either wrong or the image does not exist

If I use a random icon and add this style

.image-1 .module-title span:before {content: "\f101"; font-family: FontAweSome; padding-right: 0.5em;}

It works for me

Cheers
Paul

paulus1031

I should add I have published the module title as it needs this to work

Cheers

teamherve

Thank you.
I see and I understand, your two post paulus1031.
Indeed, it works.

This allowed me to move forward and understand.

In my initial idea, it was to put a small image instead of the title of the module.

From what I understand, I have to work on custom.css, and title module.

the road must be good.

Thank you for your help

paulus1031

If you can I'd suggest using an icon rather than an image as it will be much easier for you to do

https://fontawesome.com/v4.7.0/icons/

If you click on an icon and then right click on it and inspect it

With using icons you won't have to use paths and its much more flexible sizing wise

Cheers
Paul