Custom CSS ignored?

You’re right, your form looks awful!

I took a quick look and don’t immediately see the source of the problem. It is likely the CSS for your theme that is the problem but we should be able to fix it. I may not be able to look at it until tomorrow night as I’ll be flying home all day tomorrow but I’ll put it in my queue.

Try this, it should help:

div.ss-select select, div.ss-paragraph-text textarea {
    clear: both;
    display: block;
    margin-bottom: 10px;
}
div.ss-form-entry > input {
    clear: both;
    display: block;
    width: 300px;
    margin-bottom: 10px;
}

div.ss-paragraph-text textarea {
    width: 300px;
}

These all work when I add them manually with Firebug but it is possible your theme could override them but I think they’ll work.

I added your CSS to the forms and it did not work. When I added it to the styles.css for my theme – bingo! If you can find a way to make it work properly, let me know, but otherwise I will keep it updated in styles.css for the theme. BTW, the theme is “The Cause”. See their page here.

Thanks for the quick response.

Dave

Do you have the “Enable Custom CSS” checkbox checked? I ask because when I look at the source of the page I don’t see the Custom CSS which should be present.

I do have it checked. They are both checked (default and custom). I have custom CSS loaded into the box below them as well. I also tried putting custom CSS in the form -specific CSS area.

Dave

The form specific CSS and the global setting get concatenated together and output together. I wondering if your theme is doing something to the post content that is filtering it out. A quick way to tell would be to switch to a different theme temporarily and see if the custom CSS is output correctly. I am not sure how else to debug this without access to the theme itself.

If I have a chance I’ll take a look. For now, this is resolved as far as I’m concerned since I have my form formatted.

Dave

Im using themeforest theme too and the custom CSS will not work as well. All the text boxes are small sizes and the text it self is quite small too. I cannot send the link now as I am running the website in a maintenance mode.

Have you tried any of the solutions I posted in this thread? If you look at Dave’s form you can see we were able to resolve the issues.

If i enter into custom CSS it will not work, it will only work if I paste it straight into css of the plugin through the editor.

Other q’s I wanted to ask.
How do I enter default theme button style to the form.
Increase the text area height.
Edit text size.

Sorry if this is too much to ask.

Not too much to ask but hard to answer without a URL to see your form. Because every WordPress theme is slightly different there isn’t a “one size fits all” to your question.

https://thinkingbigucd.ie/?page_id=26
okay here it is, but up for 2 days if that is enough time

Your questions:

1. How do I enter default theme button style to the form?
2. Increase the text area height?
3. Edit text size?

My Answers:

1. I need to see what the default theme button looks like to say for sure but most likely you’ll have to replicate your theme’s button CSS for the #ss-submit CSS id (which is assigned to the Submit button).
2. Use the following CSS:

   div.ss-form-entry > input {
       height: 50px; /**  Tune height value to your preference **/
   }

3. Use the folliwng CSS:

   input.ss-q-short {
       font-size: 20px;  /**  Tune size value to your preference **/
   }

If I have misunderstood your questions let me know.