how can I use MicroThem if not loggedin – I need to modify the login page

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

Author Posts

mirco_cervi

Hi!
I have to question:
1) (the one in the object) I need to modify the default login page style, but if I logout, within Microtheme and try to login, it seems it doesn’t work, is there any workaround?
2) how can I center a form on a page? the form is a div on left up side, and I need to have it in the center.
3) can I popup a div? I mean, the contact form is there any way to make it appearing in a kind of movement when the user open the page contact?

Thanks all
Mirco


Sebastian

Hey Mirco,

  1. This is a tricky one. At some point I’m going to investigate the technical possibility of Microthemer temporarily logging a user out, requesting the page in the preview, and then automatically logging back in. It may have too many pitfalls. But in the meantime, my best advice is to logout and then copy the HTML of the form by inpsecting it with a tool like Firebug for Firefox and then pasting into into a test page in WordPress (using the Text tab of the text editor to paste the HTML successfully). You can then style the form on the text page in Microthemer. The styles should also have an effect on the real login form.
  2. If you set value of auto for both the left and right margin of the div it should center (assuming the parent container is bigger than the form). If you tried setting text-align to center and were puzzled why it didn’t work, it’s because you can only center elements that have a display value of inline or inline-block with text-align. Divs have a display value of block by default.
  3. This could either be done with JavaScript or CSS animations. Microthemer doesn’t support JavaScript at the moment. It doesn’t support animation via the UI input fields yet either, but you could paste some custom CSS code into the custom code area (see code icon in top right) to make the form fade in. See the following code:

(I grabbed this from https://graphicfusiondesign.com/design/creating-fancy-css3-fade-in-animations-on-page-load/)

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

#your-form-selector-here-micro {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;

       -webkit-animation-delay: 0.7s;
       -moz-animation-delay: 0.7s;
       animation-delay: 0.7s;
}

You would need to replace #your-form-selector-here-micro with the actual CSS selector for your form. You can get this by clicking the name of the selector in the top toolbar and copying the code in the textarea.

I hope that helps!

Cheers,
Sebastian


mirco_cervi

Sebastian! thanks ..u gave me a lot of jobs to do for the weekend 🙂 very helpful, I will give ur mail to my wife and u will explain why I can’t take her to the seaside :D:D:D
Thanks a lot sounds great

Mirco


Sebastian

No problem Micro. I’d be happy to explain why the seaside must come 2nd any time 🙂

You must login or register to reply to this topic.