Edting the CSS when the classes are... #stacks_in_p2615_n148_page1 etc

1

I’m trying to adapt the look of Doobox Contact Form. Normally it’s really straight forward, just grab the classes and adapt, but this site has a contact form at the foot of every page, and it’s one of those instances when instead of clearly defined classes, you get something like this…

#stacks_in_p2615_n148_page1 .stacks_in_p2615_n148_page1input

Which is unique to that instance of the stack on that page.

Is there a way to get at the actual class for the element in question? I’m guessing it must be there somewhere!

The site is here: https://www.burgessgalvin.ie/

2

If you are using S4 then you could add your own custom class to the stack and then target the input or label elements like so:

.myCustomClass input {
 your css here
}

Or you can use the parent class for the stack which is .stacks_in uk_co_doobox_contactform_stack

2 Likes
3

D’oh, course! Thanks.

4

Hmmm, added the custom class dooCon and used this css…

.dooCon input {
padding: 10px !important;
}

.dooCon sendmail {
margin-top: 20px !important;
padding: 8px 25px 8px 25px !important;
display: block;
text-align: center !important;
font-size: 20px;
color: #444444 !important;
border: 1px solid #D8D8D8 !important;
background-color: #FFFFFF !important;
-moz-border-radius: 25px !important;
-webkit-border-radius: 25px !important;
border-radius: 25px;
cursor: pointer;
}

dooCon input is working fine but dooCon sendmail which is the button isn’t working. Any ideas?

5

Away from my computer now. Does the doobox code for that button already use !important? If so that will win because it is targeting by using the ID as opposed to a general class.

Can check properly later if no one else gets back to you.

6

sendmail is a name which is different to input. Each of the inputs also have names.

7

Yes, that’s it. !important already applied by the stack. Balls.

Oh well, I got half way there.

Cheers.

8

If you specify the selector correctly it works fine in your site wide CSS as that comes after the built in code so your !Important wins

.dooCon [name="sendmail"]{

CloudApp

You could even also increase the specificity if you had problems

.dooCon input[name="sendmail"][type="submit"]{
1 Like
9

Aha, I was just testing in page css, didm’t think to try global. Thanks, will head off and finish the job!

10

Your code was in consolidated.css which is the site wide code - I didn’t move it, just edited the selector

11

Yes, sorry, earlier I was testing at page level, but I since moved it to global and published. Forgot. Been a manic morning as my one of my servers has fallen over!

Just added .dooCon [name=“sendmail”] working lovely now. Thanks.