How to find selectors for customizing
By matthias moebius on Thursday, 28 July 2016
Posted in Technical Issues
Replies 5
Likes 0
Views 280
Votes 0
I like to customize something in the Latest Blog Module and read the section "Template CSS Overrides" in http://stackideas.com/docs/easyblog/administrators/customizations/template-overriding. All is clear and simple and complies the standards. But where can I see how the classes and id's are named? For example: I like to customize the text. In the source view of the website I can see the class is "eb-mod-body", but I don't know the rest of it.
Hi Matthias Moebius,

I am sorry for the delay of this reply. In order to finds the selector, you can simply inspect the text you want to customize and search the class that it using
Muhammad Fadhli
·
Friday, 29 July 2016 11:12
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Fadhli,

thank you fopr answer. I did exact this! Please have a look to the attached screenshot: I like to change the marked text into red. For this, I create the file "custom.css" and stored it in root/templates/mytemplate/css. This file contains


.eb-mod-body

{

  color: #ff0000 !important;

}

But with this the text don't change into red.
matthias moebius
·
Friday, 29 July 2016 17:07
·
0 Likes
·
0 Votes
·
0 Comments
·
Have you tried to put the code in the file:
root/templates/toulousetemplate00/css/template.css
Muhammad Fadhli
·
Friday, 29 July 2016 17:33
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Fadhli,

not yet, but after your question - and it works! Does it mean, that is anything wrong in the description here: http://stackideas.com/docs/easyblog/administrators/customizations/template-overriding?

Kind regards
matthias moebius
·
Friday, 29 July 2016 23:59
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Matthias,

The document at http://stackideas.com/docs/easyblog/administrators/customizations/template-overriding provides you with the necessary guide to add a custom css file but it doesn't actually fixes inheritance issues.

If you add an !important to your css rules, then it would work. The reason that it works when you add this code into your template's css file is because of the ordering of the css
Mark
·
Saturday, 30 July 2016 13:17
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post