tsu.co CSS inspect

Hello,
Someone please can help me inspect all styles related to Sign In form and Sign Up CSS and post them.

thanks
adra750Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rafael LepkoskiSoftware DeveloperCommented:
You can you the browser's inspector to get the information you need or you can also use JavaScript to get the CSS information recusivelly giving  an element to use as root.

Here's an example of how to take all CSS rules from a given element (using jQuery):
http://jsfiddle.net/3gbLxgjL/
0
adra750Author Commented:
can you please post the styles?
0
Rafael LepkoskiSoftware DeveloperCommented:
Don't be so lazy... I'm trying to help you so if you have any doubts about how to use the solution I gave you, please ask. But I won't do your work for you, I already showed you the way. Now it's up to you!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

adra750Author Commented:
I understood nothing of your suggested method.
0
Rafael LepkoskiSoftware DeveloperCommented:
You can use the function getStyles passing a jQuery object as parameter to return a json with all the styles from the object you passed as parameter. Like this:

    var element = $("div.c");
    var styles = getStyles(element);

Open in new window


Here's an improved example (if you click the button an alert is shown with the CSS from the element defined inside the click's callback):

http://jsfiddle.net/Lepkoski/249y6toq/1/
0
adra750Author Commented:
I copied this part in HTML in jsfiddle then how to get CSS (Sorry this is advanced for me)
<div id="sign-in" class="" style="display: block;">
              <h2> Welcome Back </h2>


              <form accept-charset="UTF-8" action="https://www.tsu.co/users/sign_in" class="simple_form new_user" id="new_user" method="post" novalidate="novalidate"><div style="display:none"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="sBGgI5v8GlK/88adLNnugzB7LoQO4ZG6VbYvweisdwo="></div>
                <input autofocus="autofocus" class="form-input" id="user_login" label="false" name="user[login]" placeholder="Email or Username" type="text">
                <div class="input password optional user_password"><input class="password optional" id="user_password" name="user[password]" placeholder="Password" type="password"></div>
                <div class="input boolean optional user_remember_me"><input name="user[remember_me]" type="hidden" value="0"><input class="boolean optional" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"><label class="boolean optional" for="user_remember_me">Remember me</label></div>
                <input class="btn button" id="sign-in-form-submit" name="commit" type="submit" value="Sign In">
</form>
              <div id="helper_links">
  <a href="/users/password/new">Forgot your password?</a>

  <a href="/users/confirmation/new">Didn't receive confirmation instructions?</a>

</div>
            </div>
0
adra750Author Commented:
can you walk me through how to inspect the elements I asked for, so I can learn from it. Because the example you gave me, there is html, js and CSS, I don't know how did you get CSS and javascript in there, did you paste or what's the method.

Let's do the example through inspecting tsu.co
0
adra750Author Commented:
any other Experts please?
0
adra750Author Commented:
@Rafael, so you signed up Today and you and you try to be expert in a second with your vague solution?

I challenge you now, post me the solution without showing me how to.
0
adra750Author Commented:
element.style {
    display: block;
}
*, *::before, *::after {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
#sign-in, #sign-up, #reset-password, #resend-confirmation {
    display: none;
    margin: 0 -175px 0 0;
    position: absolute;
    right: 50%;
    text-align: center;
    top: 20vh;
    width: 350px;
}
* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
body, a {
    color: #ffffff;
    font-family: "Montserrat",serif;
    font-weight: 400;
    background-color:black;
}
html {
    font-family: sans-serif;
}
#sign-in, #sign-up, #reset-password, #resend-confirmation {
    display: none;
    margin: 0 -175px 0 0;
    position: absolute;
    right: 50%;
    text-align: center;
    top: 20vh;
    width: 350px;
}
@media (max-width: 768px) {
#sign-in, #sign-up, #reset-password, #resend-confirmation {
    top: 100px;
}
}
#sign-in h2, #sign-up h2, #reset-password h2, #resend-confirmation h2 {
    color: #ffffff;
    font-family: "Montserrat",serif;
    font-size: 24px;
    font-weight: 700;
    margin: 30px;
    text-align: center;
}
#sign-in input[type="email"], #sign-in input[type="password"], #sign-in input[type="text"], #sign-up input[type="email"], #sign-up input[type="password"], #sign-up input[type="text"], #reset-password input[type="email"], #reset-password input[type="password"], #reset-password input[type="text"], #resend-confirmation input[type="email"], #resend-confirmation input[type="password"], #resend-confirmation input[type="text"] {
    border: 1px solid rgba(250, 250, 250, 0.8);
    border-radius: 3px;
    color: #78787a;
    font-size: 14px;
    margin: 8px 30px;
    padding: 12px 10px;
    width: 260px;
}
#sign-in input[type="email"]:focus, #sign-in input[type="password"]:focus, #sign-in input[type="text"]:focus, #sign-up input[type="email"]:focus, #sign-up input[type="password"]:focus, #sign-up input[type="text"]:focus, #reset-password input[type="email"]:focus, #reset-password input[type="password"]:focus, #reset-password input[type="text"]:focus, #resend-confirmation input[type="email"]:focus, #resend-confirmation input[type="password"]:focus, #resend-confirmation input[type="text"]:focus {
    outline: medium none;
}
#sign-in input[type="button"], #sign-up input[type="button"], #reset-password input[type="button"], #resend-confirmation input[type="button"] {
    background-color: #f7f7f6;
    border: 1px solid #cacaca;
    border-radius: 3px;
    margin-top: 10px;
    padding: 8px 10px;
    width: 80%;
}
#sign-in span.error, #sign-up span.error, #reset-password span.error, #resend-confirmation span.error {
    display: block;
}
#sign-in #user_remember_me label, #sign-in #helper_links, #sign-up #user_remember_me label, #sign-up #helper_links, #reset-password #user_remember_me label, #reset-password #helper_links, #resend-confirmation #user_remember_me label, #resend-confirmation #helper_links {
    font-family: "Montserrat",serif;
    font-size: 14px;
    font-weight: 400;
}
#sign-in #user_remember_me, #sign-up #user_remember_me, #reset-password #user_remember_me, #resend-confirmation #user_remember_me {
    margin: 2%;
}
#sign-in #user_remember_me label, #sign-up #user_remember_me label, #reset-password #user_remember_me label, #resend-confirmation #user_remember_me label {
    font-size: 14px;
    margin-left: 2%;
}
#sign-in .user_remember_me, #sign-up .user_remember_me, #reset-password .user_remember_me, #resend-confirmation .user_remember_me {
    font-size: 14px;
    margin-left: 49px;
    padding: 10px 0 18px;
    text-align: left;
}
#sign-in #helper_links, #sign-up #helper_links, #reset-password #helper_links, #resend-confirmation #helper_links {
    font-size: 14px;
    margin-left: 50px;
    padding: 20px 0;
    text-align: left;
}
#sign-in #helper_links a, #sign-up #helper_links a, #reset-password #helper_links a, #resend-confirmation #helper_links a {
    display: block;
    font-weight: bold;
    padding: 4px 0;
    text-decoration: none;
}
#sign-in #flash_alert, #sign-up #flash_alert, #reset-password #flash_alert, #resend-confirmation #flash_alert {
    text-align: center;
}
#sign-in.open, #sign-up.open, #reset-password.open, #resend-confirmation.open {
    display: block;
}
#sign-up::before {
    right: 52px;
}
#sign-up h2 {
    margin-bottom: 20px;
}
#sign-up .button {
    display: inline-block;
    margin-top: 20px;
    padding: 14px;
    text-decoration: none;
    width: 260px;
}
#sign-up .description {
    font-size: 18px;
    margin: 0 auto;
    padding: 10px;
    width: 250px;
}
#sign-up .description.error {
    color: #bd5e55;
}
#sign-up #username-wrapper {
    background: none repeat scroll 0 0 white;
    border-radius: 3px;
    height: 50px;
    margin: 10px auto 0;
    padding: 14px 0;
    width: 260px;
}
#sign-up #username-wrapper::before {
    color: #bebebe;
    content: "tsu.co/";
    display: inline-block;
    font-size: 20px;
    margin-left: 3%;
}
#sign-up #username-wrapper input[type="text"] {
    border: medium none;
    color: #232323;
    font-size: 20px;
    margin: 0 0 0 5px;
    padding: 0;
    width: 165px;
}
#sign-up #username-wrapper input[type="text"]:focus {
    outline: medium none;
}
#sign-up .login-link-wrapper {
    font-size: 14px;
    font-weight: bold;
    padding: 20px 10px 25px;
    text-align: center;
}
#sign-up .login-link-wrapper a {
    color: #3be0c0;
    font-size: 14px;
}
#reset-password, #resend-confirmation {
    display: block;
}
*, *::before, *::after {
    box-sizing: border-box;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
.button {
    display: inline-block;
    font-family: "Montserrat",serif;
    font-size: 20px;
    font-weight: 700;
    height: 50px;
    width: 260px;
}
.button, a.button {
    background-color: #3be0c0;
    border: 0 none;
    border-radius: 2px;
    color: white;
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin: 0;
    padding: 0 4px;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
}
input {
    line-height: normal;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}

Open in new window


any adjustments
0
adra750Author Commented:
.button, a.button {
margin-left:45px;
}

Open in new window

0
adra750Author Commented:
is this correct
0
zc2Commented:
To inspect the CSS style of some element on a some page.
1. Open the site in google chrome. IE and FF have quite good inspector tools too.
2. Right click on a UI control or page element which you want to inspect
3. In the context menu choose "Inspect element".
You will see the HTML tree on the left and the styles on the right
4. Click on the "Computed" tab to see the applied effective styles.
5. If you don't see some style you expected to be there, try to inspect other related tree elements such as the ancestors and siblings
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
adra750Author Commented:
sometimes i see things repeated and i get confused
0
adra750Author Commented:
do you have any idea when you click on login you get this form?

on their website the href link is # there must be something like jquery?
0
zc2Commented:
Any element can have a number of event handlers which are script functions.
On this page the "join / login" link has an "OnClick" event handler which shows the form when you click on the element.
If you inspect the element (like I described earlier) and then click on the "Event Listeners" tab (on the right) you will see the list of handlers. You can click on the location link and get the function code.
Often the script is compacted and/or obfuscated. You can make the inspector to show you the script in more-less readable form pressing the "{ }" (pretty print) button.
To understand meaning of a third-party obfuscated script could be a very complex task, I doubt I could help you to get know what the script on this page exactly does.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.