A conundrum – styling content that only shows to logged-out users [how to]

This topic contains 1 reply, has 2 voices, and was last updated by  Sebastian 6 years, 4 months ago.

Author Posts

QloudPress

Hi,

I am a site architect and not a developer, so CSS has always been a bit of a black art to me; a little bit voodoo and hocus pocus.

But I just bought MT, and to say I am totally impressed with it would be a real misunderstatement.

I love it love it love it. Its awesome!

The first job I set out to do was to create a button in a WordPress menu.

I started with practising on the login/logout button which in this theme was quite hard to style, but you can see the results here ~ https://qloudpress.com/ ~ and I am more than happy with it.

So far so excellent.

Then I wanted to style the “Register” button and thought it shouldn’t be too difficult. But it turned out the plugin only displays the html Register link, when you are “logged out” ~ and MT only lets you style html with CSS when you are “logged in”. So its a conundrum.

Does anyone have any ideas?

Terence.


Sebastian

Hey Terrance,

This is indeed a conundrum. We haven’t come up with a proper solution for this yet. In the meantime, please try the following workaround:

  1. Access your website via the Chrome browser.
  2. Ensure that you are logged out of WordPress and then go to the registration page.
  3. Right-click anywhere in your registration form, then choose ‘Inspect’.
  4. Chrome’s HTML inspector will display in the left pane (see screenshot below).
  5. Hover your mouse over the lines of indented HTML until the blue highlighting covers the whole of your registration form, and maybe even some container elements that hold the registration form.
  6. Right-click the line of HTML your mouse is hovering over and choose: Copy -> Copy Outer HTML.
  7. This will copy the registration form’s HTML to your clipboard.
  8. Create a new test page in WordPress.
  9. Switch to the ‘Text’ tab of the WordPress editor and paste the form code you copied.
  10. Save your test page.
  11. Navigate to your test page in Microthemer and style it in the way you would like your real registration form styled.
  12. The styles you apply in Microthemer should also apply to the real registration form. You can verify this as you go by accessing to the registration form in a different browser, e.g. Firefox, in which you will be logged out.
  13. One thing to watch out for is to make sure that when Microthemer generates CSS selectors for you, that they don’t include the id of the test page you are working on e.g. #post-56 form. Try to use classes that seem more generic e.g. form.register

registration outer html

I hope that helps, please let me know if you require further assistance.

And thank you so much for your kind words. It’s always really encouraging to hear that people enjoy working with Microthemer.

Thanks!
Sebastian

You must login or register to reply to this topic.