Default Styles

The Default Styles module is enabled by default in the wp-admin / Classifieds / Options panel and you can use it to style the default design for the forms and buttons used in the blocks.

Usually, you will want to use this panel to make the WPAdverts buttons and forms as similar to your theme buttons and forms as possible.

Note that the default styles are applied to blocks only, this means that if you are using Shortcodes you will not see any changes in the front.

The Default Styles settings panel has 3 tabs, the first two allow customizing buttons (primary and secondary) and the third one allows customizing the form’s look and feel.

Customizing Buttons

Below you can see the settings screen for the Primary Button section, the screen for the Secondary Button is basically the same so everything you read here applies to the Secondary Button tab as well.

The settings screen is divided into two sections, on the left side you can see the customization option and on the right side Preview (for both default and hover states), as you change the options on the left the changes should be instantly visible in the right (preview) section.

Common Settings

Border Radius – you can select here how rounded the edges of the buttons should be.

Border Width – how thick the border should be.

Font Weight – the font weight (from thin text to bold).

Colors

These two sections should be self-explanatory you can set here text, background, and border color for both the default button state and the “on hover” state.

Customizing Forms

As above the settings, the panel is divided into options and a preview section, all the changes you make on the left side should be instantly visible in the preview on the right side.

Common Settings

Color Palette – you can select here from the various shades of gray, it is not possible to choose exact colors as this is rather hard to do especially for a person who is not a graphic designer, so instead, we have a couple of predefined color schemes that should fit almost any website.

Style – you can select here form a couple of form styles or select “none” if you want to style the form yourself (this is rather an option for people experienced with web development), the other options are: “solid” the inputs do not have a border but rather a background; “flat” the inputs have a white background and a border around them; “bottom border” the inputs have a white background and a bottom border only.

Shadow – you can use this option to show a shadow outside of the buttons or inside them.

Border Settings

Border Radius – you can select here how rounded the edges of the inputs should be. (tip: if Style is set to “Border Bottom” you will get the best results with the radius set to none).

Border Width – how thick the border should be. (tip: for the best results it is best to set the same border width for both the forms and buttons).

Other

Interline – you can select here if you want to separate the inputs with a horizontal line.

Row Spacing – you can select here how much space you want to leave between the inputs.