Isolate login page div for custom css


(Mei) #1

Is there a way to isolate specific div’s on the login page? I’m trying to create a landing page (my forum is set to private). I know you can’t target #ember1234 since that number changes constantly, but any more general div’s affects the rest of the forum.

It doesn’t appear that I can add inline CSS directly into my HTML on the login page either.

Unfortunately my knowledge extends only to CSS, so I don’t know if there’s a way to do this by adding a script to the header or not.

Is what I’m trying to achieve possible?

I’m just needing to apply this code, but only on the login page:

#ember1465 {
    width: 73%;
    margin: 0px auto;
}

#ember1465 h1 {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: bold;
    color: #FBC600;
    margin-bottom: 30px;
    text-align: center !important;
    padding: 20px;
    border: 10px solid #E8E8E8;  
    line-height:30px;
}

#ember1465 a {
    background-color: #DA3982;
    display: inline-block !important;
    margin: 0px !important;
    padding: 5px 15px;
    color: #FFF;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: bold;
}

Thanks!


(cpradio) #2

Can you take a screenshot of the div/form you are trying to apply to so we can try and find it and give you a better solution? I’m sure there is one, just need to see what exactly you are trying to target.

Even if you can make the dialog/form display here on Meta, a screenshot of it here will be useful.


(Mei) #3

Hey @cpradio! Thanks for your input. For reference, here’s a screenshot. I’m trying to target several elements within this specific div.

Does that give you more information on what I’m trying to achieve?


(cpradio) #4

Yeah, it does. Can you tell us how you got that content loaded onto the screen, did you use the Customize HTML area or a plugin to inject a template?

Curious if you could inject another div around your content and give it a specific class or id to use for reference.


(Mei) #5

I used the Customize HTML area. I went to Admin > Customize > Text Content and just typed in the HTML directly in there.

I have some elements in there with classes but once the page is saved, the class is stripped. For example, in the HTML I have Blabla and in the custom CSS I have .class123 { font-size; 2em; }.

After saving, I can see the class=“class123” is completely gone from the HTML of the page.

Because of that, I don’t think it’s possible to wrap everything in a div…?


Custom login page?
(cpradio) #6

Try this, but I’m not sure if it will impact anything after the user is logged in.

#main-outlet div.ember-view .container .body-page {
  width: 73%;
  margin: 0px auto;
}

(Mei) #7

Worked great!

That did however affect the FAQ page as well, but that wasn’t a problem to get the CSS on there back to its original form.

Thanks @cpradio!