Styling options

[Marcj1305]

Hi Ernest,

I would like to know how I can better style the settings block in order to have the same visual as the search box.
My setup is: searchbox + settings + search button. It is on the top of the homepage.
I attached the expected result.
Also, how can I change the font-weight of the inputs? I need 300, and in plugin options I can only choose normal or bold. I tried with custom css but no result.

Thanks!
Marc

[Ernest Marcinko]

Hi!

The only way to change that right now is via custom CSS:

.asp_shortcodes_container * {
    font-weight: 300 !important;
}

.asp_shortcodes_container input::-webkit-input-placeholder { /* Edge */
    font-weight: 300 !important;
}

.asp_shortcodes_container input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-weight: 300 !important;
}

.asp_shortcodes_container input::placeholder {
    font-weight: 300 !important;
}

This will force a 300 weight on all of the elements. Please note, that you cannot combine these rules into a single one, because placeholder styles are only rendered in browsers if they are separated.

[Marcj1305]

Works great man, thanks!

Regarding settings block styling, any idea? I need it to look exactly like the searchbox, but I get different height, padding, margin etc…Because it’s a select field, style is pretty different, but maybe you had this case before?

Regards,
Marc

[Ernest Marcinko]

Hi,

Try these:

.asp_select2-selection__rendered {
    background: white !important;
}

span.asp_select2-selection.asp_select2-selection--single {
    margin: 3px;
}

.asp_select_label.asp_select_single {
    margin-top: -2px !important;
}

It should result in something like this: https://i.imgur.com/s9pyouY.png

[Marcj1305]

Man, you’re magical!

Many thanks, and really good job for this plugin, working pretty well.

Cheers,
Marc

[Ernest Marcinko]

You cannot access this content.

[Marcj1305]

Ok, thanks Ernest.

[Author]

Posts