Skip Navigation

[Resolved] Style custom search form with CSS codes

This support ticket is created 6 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 1 reply, has 2 voices.

Last updated by Luo Yang 6 years, 1 month ago.

Assisted by: Luo Yang.

Author
Posts
#1146303

Is this the CSS I need to have something similar to the Parametric Ads Search example from the Toolset Layouts CSS section?
hidden link

/****************************
Parametric search
**************************/

.filter-box input[type="submit"] {
margin-top: 9px;
}
.filter-box ul {
line-height: 1;
}

.sidebar .filter-box [class*='col-sm-'] {
display: block;
width: 100%;
float: none;
margin-bottom: 10px;
}

.sidebar .filter-box .search-header {
width: 100%;
padding:15px;
}

.filter-box .search-header, .cart-icon {
background-color: #ff3b3b;
}


@media (min-width: 768px) {
.filter-box .search-header {
width: 90%;
min-height: 130px;
text-align: left;
padding:15px;
}

.list-header {
display: table;
width: 100%;
}

.filter-box>[class*='col-sm'] {
float: none;
display: table-cell;
vertical-align: middle;
}

.filter-box {
display: table;
width: 100%;
}}

.sidebar .filter-box {
margin: 0;
padding: 15px 0;
}

.filter-box {
background: #eee;
padding: 30px 30px 22px 30px;
margin-bottom: 30px;
}

.filter-box .search-header h3 {
margin-top: 10px;
margin-bottom: 5px;
}

.filter-box .search-header, .filter-box .search-header h3 {color:white;}

#1146304

Hi,

Those custom CSS codes are not required, I suggest you follow our document to style the custom search form with your own CSS codes:
https://toolset.com/documentation/user-guides/adding-custom-css-views/

But you can use those CSS codes for your reference.