Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2018-02-24 07:46:47

jonnyrunn
Member
Registered: 2015-02-19
Posts: 69

Design of client response login page

I would love to modify the big blue login button and the huge LOGIN title on the page. I would also love to center the fields. Is this possible. Thanks

Offline

#2 2018-02-24 08:00:36

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Design of client response login page

in  Backlight > Client Response > Settings, under Personalisation, you can choose a Client Response Template. Click on the drop down and choose one of your page templates.
If you need to change the color of the button, go to that page template in the Designer. Look under Typography for button controls.

Centering the form will require custom css.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#3 2018-02-24 08:19:33

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Design of client response login page

Here's some custom css to try:

@media only screen and (min-width: 768px) {
    .template-id-26 #form.admin_unit {
    margin: 0 auto !important;
    width: 50%;
    }

.template-id-26 #form.admin_unit input {
  max-width: 100% !important;
}
 
  .template-id-26 h1 {
    text-align: center;
  }
}

the .template-id-26 part ensures that this css affects only your client response template and nothing else on your site. If this is the only place you're using custom css, you can omit it.
The media query ensures that the form is centered only on desktop and wide tablets. That width: 50% would make the form too small on smaller devices.

For your css, change out .template-id-26 for the actual template id for your template.
You can find that by looking at the page source code and look for <body class= "....

<body class="pangolin template-id-26 template-identifier-client-response cart-unready crg-unready" data-layout="1col right">

You can either use .template-id-XX or .template-identifier-your-template (if you've filled out the Identifier field in the template) for the overall class.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

Board footer

Powered by FluxBB