Reusing styles I've already created in Microthemer [possible? – RESOLVED]

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

Author Posts

IntelTech

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

Hi,
I used Microthemer to style a form on my website. Now that I have the form looking the way I’d like, I plan to create others with the same basic appearance, but somewhat different content (titles and fields). Is there a way to apply the existing styles I created in Microthemer for the first form to the other forms? Or do I have to recreate the styles each time I create a new form? Thanks in advance for your help!

Laura


Sebastian

Hi Laura,

The quickest and least effortful approach to this problem involves copying and pasting some CSS selector code into the “Modify Selector” textarea. If you can provide me with a link to your site (outlining the currently styled form and the to-be-styled form) I will explain this method using your particular forms as an example.

Cheers,

Sebastian


IntelTech

Hi Sebastian,

Unfortunately, my site is not yet live, so there’s not a publicly available link that I can send you. Might you be able to give me a hypothetical example to work off of instead? Thanks! I apologize for the inconvenience.

Laura


Sebastian

Hi Laura,

Yes, no problem. I’ll try my best and hopefully some of this will make sense for your particular situation.

If you click the “Modify Selector” link at the top right of every Selector you used to style your form a textarea will be revealed with the CSS Selector code Microthemer automatically generated (as well a field for changing the Selector label). The code might look something like this:

#my-form

Another Selector that targets the form input fields might have some code that looks like this:

#my-form input

If you double-click form number 2 (the one you now want to style), Microthemer’s selector wizard will probably suggest some different code for targeting that specific form. If you click on the general form area (no particular sub-element of the form) it might suggest the following code:

#my-form-2

And then if you double click the form input fields Microthemer might suggest the following code:

#my-form-2 input

The bit you’d be interested in is the “#my-form-2” stub at the beginning. This is the part of the code that limits the application of your form styles to just one form. # means the form has a unique id. If if was a dot e.g. “.my-form-2” that would mean the form has a class (which is may or may not share with other forms). In your case, it could be an id or a class. It doesn’t matter. What matters is that you select and copy the beginning stub (anything that comes before the first space, if there is a space separating the text).

Once you’ve copied the stub, go through all of your form styling selectors and modify the CSS selector code like so:

#my-form

Would become:

#my-form,
#my-form

#my-form input

Would become:

#my-form input,
#my-form-2 input

Commas are used in CSS when you want to apply the same style to a range of elements (e.g. different/the same elements with different ids and classes).

Once you’ve updated each selector you should find that the styles apply to both forms.

***

There is an alternative way to target multiple elements though, which doesn’t involve commas. The default code Microthemer uses when you double-click something using the selector wizard is as specific as possible. So if a form has a unique identifier like an id, or a group identifier like a class, it will use these attributes to limit targeting to a single element (with an id) or a group of elements that share a class (rather than every single form on the website).

If you want Microthemer to target things more broadly, e.g. all the forms on your website, you could adjust the dropdown menu in the selector wizard. Choosing a value at the top e.g. “form” before creating the selector would mean that your styles apply to every single form on the website. You can adjust values in the selector wizard and then navigate between pages to see if Microthemer is going to highlight exactly what you want (all the elements you want but none of the elements you don’t want). Sometimes a value in the middle of the dropdown might be best e.g. “.post form”. It doesn’t matter too much that you may not understand exactly what the CSS code in the selector wizard dropdown menu means. The highlighting changes when you change a value, giving you visual feedback.

It may be a bit late to use the selector wizard in this way in your case because you have already created your form selectors. But it’s useful to know in general. And you could always use the selector wizard to generate the correct code that broadly targets both forms and then replace the existing code for each selector via the “Modify Selector” links.

I hope that helps! Please let me know if you’re still stuck.

Cheers,

Sebastian


IntelTech

Hi Sebastian,

Sorry for delayed response. In theory the explanation you provided does make sense. However, since I’m fairly new to CSS, I’m having trouble figuring out exactly how to apply it to my unique code. Since I’m not able to grant you access to the site, I thought it might help if I used firebug to show you the code I’m working with. See below:

Unstyled Form
—————————————————-

Free White Paper: ERP Selection Tips for CFOs

First Name:
*

Last Name:
*

Email:
*

Company:

Verify that you’re human:

Logged in as
admin
. Verification not required.

Please enter any two digits

Example: 12

This box is for spam protection –
please leave it blank
:

*****

Styled Form
——————————————–

Free White Paper: ERP Selection Tips for CFOs

First Name:
*

Last Name:
*

Email:
*

Company:

Verify that you’re human:

Logged in as
admin
. Verification not required.

Please enter any two digits

Example: 12

This box is for spam protection –
please leave it blank
:

*****
FYI: I used two WordPress plugins to create these pages, Visual Forms Builder and Elegant Theme’s, Elegant Page Builder.

Please let me know if you have questions. I really do appreciate your help!

Laura


IntelTech

Hi Sebastian,

In the response I submitted a moment ago, the code doesn’t look as though it rendered properly. Is there a trick to making code show up in forum posts, like in your last reply?

Thanks again!

Laura


Sebastian

Hi Laura,

Could you try emailing the text you tried to paste into your previous post instead? I don’t think non-admins have the relevant privileges to post code.

You can send it to my support@ Themeover email address.

Thanks,

Sebastian


Sebastian

Thanks for emailing the code Laura.

The class both of your forms share is:

.visual-form-builder

Microthemer was probably using the form’s unique id when automatically creating the CSS selector, which on your styled form is:

#free-white-paper-erp-selection-tips-for-cfos-3

So if you replace all instance of:

#free-white-paper-erp-selection-tips-for-cfos-3

with

.visual-form-builder

Using the “Modify Selector” method I previously outlined you should find that your styles apply to both forms instead of just one.

Please let me know if you run into any problems.

Cheers,

Sebastian

You must login or register to reply to this topic.