Forums

Sorry if this is a repeat of a question, but searched the forum and come up with nothing...

I have setup a form on a Joomla site that runs a theme, but I wanted to make the submit button like all other buttons within the theme, it most likely is simple, but new to this all. Any input would be great.
Cheers all!

Hi Timmy,

You will need to find the class added to the buttons in your theme and add the same class to the button in the form.

Regards,
Max

Thanks Max for your reply.

I added some code into the style area on the submit button, but no changes to the frontend. Not sure if I have the style code right or I placed it in the right area you mention?

This is what I shows in the code now in the frontend.

<input type="submit" data-load-state="" style=".btn-lg { font-size: 16px; padding: 10px 30px; }" class="form-control A" value="Submit Your Application" id="submit6" name="submit6">

If you are going to use the style box then you need this code only:

font-size: 16px; padding: 10px 30px;

Regards,
Max

Cheers Max for your reply!

All that seem to do was push the text to the bottom of the button😟

Sorry I not that savy with css, but our theme buttons have a before and after style. and the form button class is different to the theme button classes?

What's the theme button class ? if you can find out then you can just add it to the "class" box in your button settings and ignore the style code.

If you can't find it then just send me a link to the form!

Regards,
Max

Thanks again for your input!

The class change you mentioned sort of worked, but the submit button still looks like the original button?
i.e. Border, shadow, etc ( I'm starting to think we may need to add the form button class to the theme css) Not sure as I don't really work on Joomla 😟

.gbs3 .form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    width: 100%;
}

Please try to change the form theme to "None" under the styles tab and check if this works ?