The problem I am having, is that the current styles are using different css selectors to change elements on the website.
Is it maybe possible to create a microthemer theme pack? Alternatively, is it possible to give me a list of all the css selectors for the different styles?
The only place I actually use this is on the headers and the menus (I change background effects and text colors on the menu the most). This is the most important areas.
Thanks for reaching out! We’re having a bit of trouble understanding what is going on here.
The problem I am having, is that the current styles are using different css selectors to change elements on the website.
Is it maybe possible to create a microthemer theme pack? Alternatively, is it possible to give me a list of all the css selectors for the different styles?
Can you please elaborate a bit on these two questions. What do you mean by current styles are using different selectors? Also, when you mention a list of CSS selectors, would these be for elements built with the page builder? Thanks!
Thank you for the response and sorry for the confusion.
We use various themes to design our websites, but we always have to use Custom CSS to change elements on the theme (eg. Change the menu to have different hover backgrounds and current item backgrounds)
We started using the microthemer plugin to help us with this. The microthemer plugin is actually a tool to easily add some custom css to the theme. Before we started to use microthemer, we always had to inspect elements to find the correct css element to add to the custom css box. We also had to know css well (which we don’t)
We have managed to get microthemer to work with Automator theme. The problem is that it is difficult to find the css elements to change and also when we select a new skin, we have to find the css element again because it is a different one.
To explain practically:
If I use the second skin and we want to change the menu to look different, we have to change the folowing elements:
menu font: ul#menu-main-menu-1 a
active menu background: .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a
hover menu background:li.menu-item a:hover
If we use a different skin, the above elements does not work and we have to use different css elements
We are a bit lost with the structure/hierarchy of what css elements changes what on the theme and skins. We also try to find the generic css elements that will work with all skins
The only places we actually use this, is on the menu and header. The page builder changes the layout of the content, but we need more customization on the menu to make the sites look unique.
We will need the generic css elements that will change the following on all the skins:
Okay! This is starting to make a lot more sense. Thanks for taking the time to explain. A lot of the Automator skins use different navigation position (bottom, right, centered). Whenever you change the navigation position the markup changes and the custom CSS you’re using may break. I assume the Microthemer plugin uses very specific CSS selectors and that’s causing it to break.
You’ll want to use the least specific CSS selectors as possible to avoid this problem. I would recommend checking out the source code of the theme to determine which CSS selector are available on each layout. If you go to the theme source, then go into the includes folder, you will see three files: nav-bottom.php, nav-centered.php, and nav-right.php. Take a look at those files and see which selectors they all share and use those. For example, they all use the class .fl-page-nav on the navigation element. So any CSS associated with that class should apply to each layout. Also, throwing an !important tag in there might help prevent the theme CSS from overriding yours.
Take a pass through the source and see what you can come up with. Let me know if you still need some help after that! Thanks Danie!