[Resolved] I am having trouble styling the search filters on my athlete archive page.

[Author]

Posts

[georgeY-2]

Tell us what you are trying to do? I want the search filters smaller and laid out horizontally not vertically to look like your video example (image provided of what mine looks like and the example you guys did in the tutorial).

Is there any documentation that you are following? just the video tutorial you did. hidden link

Is there a similar example that we can see? yes

What is the link to your site?
hidden link

[Luo Yang]

Hi,

You can enable Bootstrap in your website:
Dashboard-> Toolset-> Settings
option "Bootstrap loading" choose "Toolset should load Bootstrap 3.0"

Then follow Bootstrap document to style the custom search form:
hidden link

More help:
https://toolset.com/documentation/user-guides/adding-custom-css-views/

[georgeY-2]

hidden link

Is there any way we could get a screenshot of the CSS used at the 11:19 mark of the video? It was cut off at the end. Thank you!

[Luo Yang]

Thanks for the details, you can get the similar HTML codes in our reference website "classified":
hidden link

See screenshot: col.JPG

You can setup your own classified demo site here:
https://discover-wp.com/register/?site_type=417&layouts=yes

And the easiest way is follow the document I mentioned above:
hidden link

section "Example: Stacked-to-horizontal" to setup the HTML codes

[georgeY-2]

Thank you! I will click on each link and read everything with the hopes I figure it out. My ideal look and feel of what I am trying to create for my Athlete Database is exactly what the link below looks like.

hidden link

[Luo Yang]

OK, please update this thread if you still need assistance for it, feel free to create new thread if there is other new problems.

[georgeY-2]

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;}

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/style-custom-search-form-with-css-codes/

[Luo Yang]

For the new questions:

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

please check the thread here:
https://toolset.com/forums/topic/style-custom-search-form-with-css-codes/#post-1146304

[georgeY-2]

My issue is resolved now. Thank you!

[Luo Yang]

You are welcome