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

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

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