The Lodge Signup Page design quesions

[True Reach]

Hello,

I am learning so much watching these videos, it has been eye opening to say the least! Thanks CSS Tricks!

What I need some assistance with is the design of the members signup page on this very site! I have my “Fox” membership and have been trying to locate where the video which explains the techniques used to adjust the look and feel of this page: https://css-tricks.com/lodge/signup/

I emailed Chris and he got back to me where I should find the desired video. I checked the place again, with no luck.

The Big v10 Redesign Project-

153: Styling the Lodge Signup Form

This is the only video I can find on the subject and it shows how to set up the page etc but not how to make the changes to create the avatars and grey boxes which I really like!

Any help on pointing me to the correct video etc would be GREAT.

Also very sorry if this is not the correct area to post this topic, Mods please move it if you can.

[True Reach]

Nothing! Amazed….

[True Reach]

Nobody has any clue? I paid for a membership here since I was hoping to watch the video how CSS Trickster made his RCP signup page.

I watched it, however it is nothing like it looks now, the video just shows the stock out of the box signup page.

I post here, I emailed the owner dude, he says look around.

I would love to stick around and learn some shit, however the non help here is nutz.

Throw a guy a bone, ya?

[Dustin]

You can inspect the elements on the signup page with Chrome DevTools. Here’s some code I grabbed from the css file.

.button, .markItUpHeader ul li, #rcp_submit {
    display: inline-block;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #4e68c7;
    box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
    color: white;
    white-space: nowrap;
    font-family: 'Gotham Rounded A',  'Gotham Rounded B',  "proxima-nova-soft",  sans-serif;
    padding: 9px 16px;
    line-height: 1.4;
    position: relative;
    top: -5px;
}
.button:not(.disabled):hover, .markItUpHeader ul li:not(.disabled):hover, .button:not(.disabled):focus, .markItUpHeader ul li:not(.disabled):focus, #rcp_submit:not(.disabled):hover, #rcp_submit:not(.disabled):focus {
    color: white;
    background: #3d57b4;
}
.button:not(.disabled):active, .markItUpHeader ul li:not(.disabled):active, #rcp_submit:not(.disabled):active {
    box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
    -webkit-transform: translate(3px,  3px);
    -moz-transform: translate(3px,  3px);
    -ms-transform: translate(3px,  3px);
    -o-transform: translate(3px,  3px);
    transform: translate(3px,  3px);
}
.button:after, .markItUpHeader ul li:after, #rcp_submit:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: -5px;
    bottom: -5px;
}
.button:active:after, .markItUpHeader ul li:active:after, #rcp_submit:active:after {
    top: -3px;
    left: -3px;
    right: -2px;
    bottom: -2px;
}
.button.disabled, .markItUpHeader ul li.disabled, #rcp_submit.disabled {
    opacity: 0.5;
    cursor: auto;
}
.button.disabled:hover, .markItUpHeader ul li.disabled:hover, .button.disabled:focus, .markItUpHeader ul li.disabled:focus, #rcp_submit.disabled:hover, #rcp_submit.disabled:focus {
    color: white;
}

[True Reach]

Ya Dustin,

Thanks for taking some time to help a member out! I am trying to figure out how the avatars were made etc.

I really like the simple design and the way they have changed the stock look to the signup page code.

I have inspected this before and still have no flipping clue what to do next.

[Dustin]

I think Chris’s training kinda gives an overview of the design process. It may not be suited to providing a solid foundation in CSS. There are plenty of paid and free resources out there for that. Have you checked into it?

There are also lots of templates and themes out there if you are wanting a certain look, but if you’re going to code yourself, it might be better to start with the basics and then move on to something like the lodge.

[True Reach]

I am 100% using a WordPress theme, and happen to use the same membership plugin that Chris is using here at the CSS Trick.

I just wanted to learn how to adjust the signup form for Restrict Content Pro, which the plugin dev guy pippin has open to adjust.

Just kinda wanted to follow along to get my feet wet, know what I’m saying?

[Dustin]

Here is a link for setting up Restrict Content Pro.

And here’s what I could find using Google. That’s the best I can do for you.

[Author]

Posts