Moving sidebar to left side search page

[IPProduction]

Site: https://soundcontrolte.wpengine.com/

I’ve used some code I found here plus my own styling to edit the layout of the search results page:
`.search-results .excerpt {display:none;}

.search-results .x-main.left article .entry-featured{
width: 25%;
}
.search-results .x-sidebar.right {
display: none;
}

.search-results .x-main.left {
width: 100%;
}

.search-results .x-pagination {
margin-top:2rem;
float: left;
}
.search-results .x-main.left article {
width: 45%;
float: left;
height: 10rem;
margin-top: 1rem;
margin-right: 1rem;
}

.search-results h2 {
font-size: 1.5rem;
}

.entry-header .p-meta {display:none;}
`
But I still see the background of the sidebar on the right hand side, and because I have float:left on the articles, if I unhide the sidebar, it pushes it down the page. Is there some code I can use to switch the sidebar to the left side and have it display normally?

Thanks!

[tristup]

Hi @IPProduction,

Thanks for reaching out.
The background color of the sidebar is coming from the body background color. You need to reset that from Theme Options > Layout & Designs > Background Options. Please find the screenshot describing the option.

Thanks

[IPProduction]

Hi there, thanks for the fast reply. Since I want that background color on my other sidebars, my preference would be to move the sidebar to the left side as described above.

Can you help direct me to how I can move the sidebar to left side?

[tristup]

Hi @IPProduction,

In that case, you need to add a custom CSS code into the Theme Options > CSS.

body.search-results
{
    background-color: transparent !important;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[IPProduction]

Hi there, I’m really looking for information on how to move the sidebar to the left side. not just changing the background color.

[prakash_s]

Hello @IPProduction,

To align the sidebar on the search page please add this custom CSS code under X/Pro—>Theme Option —>CSS

.search-results .x-main.left {
width: 77%;
float: right;
}

.search-results .x-sidebar.right {
display: block;
float: left;
width: 21%;
} 

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks