How can I apply the same styling that the Colurshift Demo uses for the search module to the search module in the copyright position near the bottom of the screen?

Thank you
Sharon

Hi Sharon,

Not quite sure what you mean

Can you add a screenshot of the area in question

thanks
Paul

sabina100.cloudaccess.host/

Is mainly the button color where the search icon appears that is different. In the copyright position I think it it applies the default primary color instead of being white or transparent

Are you looking for this styling option?

.search .btn-primary {background-color:#fff;border: 1px solid #cccccc;padding: 11px; }

Background white looks right. It also looks like the button is blended with the text area.

The search uses styling linked to the search position so it requires quite a bit of custom css

something along the lines of

.search {border:1px solid #000}

.search button span {
color: #c1c1c1;
margin: 0;
}

.search input {
background:transparent;
font-size: 14px;
color: #999;
border: 0;
display: inline;
margin-bottom: 0;
outline: none;
height: auto;
width: calc(100% - 60px);
font-size: 14px;
text-indent: 10px;
line-height: 30px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-top: 0px;
}

.search input:hover {background:#f3f3f3}

.search button {
height: 44px;
background-color: #fff;
border: 0 none;
background:transparent
}


.search button {
float: right;
margin: -1px -1px -1px -1px;
min-width: 60px;
text-align: center;
border:0;
}

.search label {margin:0; padding: 0;}

.btn-primary:hover {background-color:transparent; border:0;}

last line should be

.search .btn-primary:hover {background-color:transparent; border:0;}

Thank you Paul -

This is working well.

Sharon

Cheers

Have a great weekend

Paul