Login

Hi insxa,

Thank you for reaching out to us.

To create a login and registration form similar to the one you see at universitycampus.thimpress.com, you can easily do so by following these steps:

Go to your WordPress Dashboard and create a new page (or edit your existing Account page).

In the WordPress Block Editor (Gutenberg), search for and add the “Thim: Login Form” block.

Once added, you can configure the settings of the block to display both the login and registration options as desired.

Please let us know if you have any further questions or need additional assistance!

Best regards,
Brianvu-tp

Hi insxa,

Thank you for your feedback.

To achieve that specific look, you can use the custom HTML block structure below. Please copy this code ( switch to Code Editor mode) on your login page:

<!-- wp:group {"layout":{"type":"constrained"},"uniqueClass":"thim-css-acac746b-1a3c-4fc3-952d-ff1806942a13"} -->
<div class="wp-block-group">
    <!-- wp:columns {"style":{"spacing":{"margin":{"top":"120px","bottom":"80px"}}},"uniqueClass":"thim-css-faa9c1a1-7e02-46ab-8ac9-27f9d953e536"} -->
    <div class="wp-block-columns" style="margin-top:120px;margin-bottom:80px">
        <!-- wp:column {"width":"100%","customCss":"\n@media (max-width :880px) and (min-width:800px){\n  selector {\n\tflex-basis:25% !important;\n\t}\n}","uniqueClass":"thim-css-e51634ba-b899-4b88-aff0-921dfb190c91"} -->
        <div class="wp-block-column thim-css-e51634ba-b899-4b88-aff0-921dfb190c91" style="flex-basis:100%"></div>
        <!-- /wp:column -->

        <!-- wp:column {"width":"100%","customCss":"\n@media (max-width :880px) and (min-width:0){\n  selector {\n\tflex-basis:50% !important;\n\t}\n}","uniqueClass":"thim-css-e51634ba-b899-4b88-aff0-921dfb190c91"} -->
        <div class="wp-block-column thim-css-e51634ba-b899-4b88-aff0-921dfb190c91" style="flex-basis:100%">
            <!-- wp:group {"style":{"color":{"background":"#d1f1fe"},"spacing":{"padding":{"top":"30px","bottom":"30px","left":"30px","right":"30px"}},"border":{"width":"0px","style":"none","radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}}},"layout":{"type":"constrained"},"customCss":"@media (max-width :1024px){\n  selector {\n\tpadding:20px !important;\n\t}\n}","uniqueClass":"thim-css-7f4d0fc8-3a3d-44f1-98e2-67ada891780e"} -->
            <div class="wp-block-group has-background thim-css-7f4d0fc8-3a3d-44f1-98e2-67ada891780e"
                style="border-style:none;border-width:0px;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-color:#d1f1fe;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px">
                <!-- wp:heading {"textAlign":"center","level":4,"uniqueClass":"thim-css-d78e922b-19a1-4bdc-a2cf-cf35e890b9fc"} -->
                <h4 class="wp-block-heading has-text-align-center">Login with your site account</h4>
                <!-- /wp:heading -->

                <!-- wp:thim-blocks/login-form {"uniqueClass":"thim-css-d6e2511d-19e3-4449-809c-be0166033ec6"} /-->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column {"width":"100%","customCss":"\n@media (max-width :880px) and (min-width:800px){\n  selector {\n\tflex-basis:25% !important;\n\t}\n}","uniqueClass":"thim-css-e51634ba-b899-4b88-aff0-921dfb190c91"} -->
        <div class="wp-block-column thim-css-e51634ba-b899-4b88-aff0-921dfb190c91" style="flex-basis:100%"></div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
</div>
<!-- /wp:group -->

Regarding the login button link.

To link your header login icon to this new page, please follow these steps:

Replace the default ‘Login/out’ block in your header with the ‘Thim: Login icon’ block.

In the block settings, find the ‘Login URL’ field.

Insert the URL of the page to which you added the HTML code above.

This will ensure that, when users click the login icon, they are specifically redirected to your newly styled login form.

Please let us know if you need any further assistance with the configuration.

Best regards,
Brianvu-tp