Create styles to apply wherever

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 7 years, 4 months ago.

Author Posts

robertlo

Is it possible to create a custom css, give it a class name and apply it anywhere on the site. Or can you only use the selector wizard to apply css to those applicable elements? I would like to make a style for one selector, but then be able to simply copy the CSS to other selector elements without having to build the css in MT’s GUI all over again. How to?

Also, I need to apply a style to a menu item that only appears for logged out users (the Log In) item. But to use MT, I have to be logged in, which means that button does not show.

Would the only way to do it to be to turn off the hide function for it based on being logged in, then style it, then hide it again for logged in users? I guess I just answered my own question.


Sebastian

Hey Robert,

1. You can expand the scope of an existing selector to target a variety of unrelated elements if you want the same CSS styles to apply to all. By unrelated elements I mean elements that are not the same type. A header image and a sidebar image are still the same type of HTML element. You could target all images with a simple and broad selectors like this:

img

Where as an image, a heading 1, and a link are unrelated elements. And so to target them in with one selector you would need to define them separated by commas:

img, 
h1, 
a

You can use the selector wizard to generate a selector for the things that you double-click. But instead of creating a new selector, you would just copy the code listed on the Targeting tab and paste it into the CSS textarea for your existing selector (separating the existing and new value with a comma). You can get to the underlying CSS code for an existing selector by clicking it’s name in the top toolbar (or from the main menu by clicking the edit icon to the right of the selector name).

Another customer asked if Microthemer could provide a means of doing this without copying and pasting code and we’ve already drawn this into our plan for the new selector wizard. Would you be able to use the method described here in the meantime though?

2. If your method is possible that sounds ideal. When that isn’t possible, my preferred method is to copy the HTML of the content that only shows to logged out users using Firebug or your native browser’s HTML inspector and then paste it into a test page that you can access with Microthemer (via the Text tab of the WordPress page editor).

This has come up a few times and I have a theory that it might be possible to get Microthemer to load pages as if it was logged out, but I haven’t put it to the test yet. Unfortunately it will be a while before I do as there are fundamental improvements to the responsive tabs, selector wizard, and default CSS units that must take priority.

Cheers,
Sebastian


robertlo

Sebastian,

Thanks for the great support. I did go ahead and just disable that plugin that hid the menu item. Then I made the CSS changes in MT and then I turned the plugin back on. It worked fine. You can see what I did to the LogIn menu item in the top menu at http://preachnet.com/freeindeed/test/

It would be cool to give it an on hover opacity. Is that possible in MT, or only with manual custom CSS?

And I also understand the current method to apply the same CSS to multiple selectors. It is a bit clunky, but like you said, you guys are smoothing that out in an update. Great work!


Sebastian

Hi Robert,

When you want to apply hover styles, the easiest way to do it is:

  • Copy the selector you created that targets the element in it’s normal (non-hover) state (using the copy icon to the right of the selectors name in the main menu – it appears on hover)
  • Navigate to the new copy and then click it’s name in the top toolbar to reveal the editing options
  • Change it’s name from ‘[My Selector] Copy’ to ‘[My Selector] Hover’ (for your own reference)
  • Append the code in the textarea with :hover and then click the update button.

So for example. If the CSS code in the textarea was:

#header #logo

You would change it to:

#header #logo:hover

Will will be adding options for turning selectors into :hover selectors using the GUI options when we do our major updates on the selector wizard. Hopefully this can work for now.

Cheers,
Sebastian


robertlo

Sebastian,

I actually already did that, but my question is how do we set an opacity for an element in the MT GUI. I don’t see that anywhere…..or do we just change the color of the element to something that mimics the desired change in opacity?

Thanks,
Rob


Sebastian

Ah sorry, there is an opacity property in Microthemer (in the Behaviour) properties group. But it often doesn’t do what you want. It makes everything opaque, including any text inside the element. Of course that may be what you want sometimes. I think I’m so used to explaining the alternative of setting RGBA background colors that I went straight onto that when I replied to your post here: https://themeover.com/forum/topic/hover-opacity/#post-6812

You must login or register to reply to this topic.