Changing/adding class to registration form layout

Question

I have been asked by a marketing rep to try to reduce the size of the title area on the registration form due to a detected problem on some browsers where the theme's modal version won't properly scroll. Basically, we want to shrink down the content or move up the form fields somewhat so it will fit on most standard browsers.

The problem is that the items at the top of the registration form don't lay in a single template but are built in a number of places in the code. (including a social-login plugin). One of the items is using a global 'page-title' and 'page-title-wrapper' class that is shared on multiple content pages throughout the site. (so any changes I make to that class effect more than just the registration form - I don't seem to see anything unique enough on the whole page to confine a contextual-css modification)

The layout file for customer_account_create.xml appears to already be over-ridden in our theme for the social login to work (but doesn't include anything overriding the title details).

What I want to know is if there is any way I can use the layout file for customer_account_create.xml to create something I can contextually reference in the CSS so I can change some of the top/bottom margins and borders as well as some of the font sizes in that title area for just this page.

e.g. the HTML in the area I want to modify on just this page looks like:

<div class="page-title-wrapper">
    <h1 class="page-title">
        <span itemprop="name">
            <span class="base" data-ui-id="page-title-wrapper">Sign Up for a New Customer Account</span>
        </span>                
    </h1>
</div>

the styles in the theme include some vertical white space (site-wide) in things like the page-title-wrapper and page-title class, but there don't appear to be any 'registration' specific tags/styles/titles surrounding this envelope.

(elements browser in chrome shows "html body div #zoo-main-content div div.page-title-wrapper h1.page-title" for example)

SW

Answer 1

Yes, you use the layout handle as parent of that class name.

For exemple : you want to update this class : <div class="scott-custom">...</div>, this class also exists in other pages but you want only to update it in the register page : domaine.com/customer/account/create/

So in you css you do this:

.customer-account-create .scott-custom {
    update here;
}