Formatting look really average

I have tried to add margins to my form as per the documentation. I’ve tried to change the background colour of various items on the form and on the menus.

The only item I have successfully change is the overall background colour - I can’t get the menus to change or anything else for that matter.

No matter what I set, the form resolutely stays the same colour and size and just looks really…average - see below.

It certainly does not look like this…

How do I get the formatting to work to make the form look pleasing to the eye?

Thanks.

Jonathan

@MightBeABitLate, Can you show me your CSS code or screenshots of your builder and where you’re applying this custom design?

There’s nothing really to show. I haven’t added any CSS - all I do is go to the form on the page, edit the design, set the border values and nothing changes.

borders

Similarly with any design changes I make to any other item - nothing seems to change. I’ve tried doing things like changing the border colour of borders round items - no change. I’ve tried changing the background colour for menus - no change.

Hey @MightBeABitLate,

Changing the background color of the Menu Component is a known bug. Can you try pasting this CSS into the CSS tab of your Layout?

.navbar-default {
    background-color: #1D4683;
    border: 1px solid #1D4683;
    background-image: none;
}

You can change the color by choosing a different hex color code.


For the form, this article needs to be updated - so sorry about that. I can totally understand your confusion.

Based on your comments, I think what you’re looking to achieve is adding padding the form component, rather than adding margins.

image

Can you please try removing the values you’ve entered for margins and put them in the padding column?

screenshot-build.tadabase.io-2021.07.26-09_22_30

I’ve exaggerated the padding here so you can clearly see what’s changed.


As for the form background color and other Form design settings, can you please share screenshots of the design settings menu for the Form Component? Here’s an example of changing the background color and border to the form shown above.

screenshot-build.tadabase.io-2021.07.26-09_35_08

screenshot-build.tadabase.io-2021.07.26-09_35_32

Warning: Sheild your eyes! :sunglasses:

Hey There, you need to add px to the end of your values for them to work in the spacing tab eg: 150px

1 Like

That’s a good catch! Thanks @SuiteUpstairs

Thanks for all this help. I will try now!

Thanks chaps, those tips seem to have improved things significantly.

2 Likes

Changing menu background color using editor still not working ? I have a main menu as part of the default layout and a “sub-menu” as part of each page and I want to change background colour of the submenu

Ok - adding this to css the page that the submenu sits on worked and left the the main menu as it is

#navbar_x_element_page_4_48

{
background: #6ca12b;
}

Assume you will need to use browser inspector to get proper # div ID