Search Widget Custom CSS

[jtskie]

Hi there, I would like to know how to customize the css for a widget that I use on my agent press pro theme. I would like to get the sold press search widget to look like the agent press search widget. my site is located at http://www.jeremytaylorhomes.com. If someone could help explain how to do this or if someone knows someone that could customize it for me that would be great.

I look forward to getting some help.

Jeremy

http://www.jeremytaylorhomes.com

[Tom]

Hi Jeremy,
( Happy to help out someone local! )

This block of code should be placed at the very bottom of your child theme stylesheet. For mobile devices (for widths of 680px and less) the format reverts to stacked presentation,

.sp  {position: relative;} 

.sp input[type="submit"].btn {
    width: 100%;
    background: #51c024;
    padding: 15px;
	margin-top: 30px;
}

#soldpresssearchwidget-6 .widget-title {
	margin-bottom: 30px;
}

.sp select, 
.sp label,
.sp .btn-block {
    width: 25%;
    margin-right: 0px;
}

#sp_minprice,
#sp_maxprice,
#sp_bedrooms {
    position: absolute;
    top: 25px;
}

label[for=sp_minprice], 
label[for=sp_maxprice],
label[for=sp_bedrooms]    { 
    position: absolute;
    top: 0px;
}

#sp_minprice,
label[for=sp_minprice] {
    left: 25%;
}

#sp_maxprice,
label[for=sp_maxprice] {
    left: 50%;
}

#sp_bedrooms,
label[for=sp_bedrooms] {
    left: 75%;
}

@media only screen and (max-width: 680px) {
    
    .sp select, 
    .sp label,
    .sp .btn-block {
        width: 100%;
    }
        
    #sp_minprice,
    #sp_maxprice,
    #sp_bedrooms, 
    label[for=sp_minprice],
    label[for=sp_maxprice],
    label[for=sp_bedrooms] {
        position: relative;
        left: 0;
        top: 0;
    }
    
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jtskie]

Thanks so much for that, I like that better, but what I would really like is for it to display like the one on the theme demo?

Jeremy

[Tom]

That's not going to be possible due to the design of the Sold Press widget interface. The SP search selectors (drop-down lists) do not contain the selector labels; they are placed outside of the selectors (and in a kind of awkward way). Unless the SP plugin has an option to change this, I think the only way one might attempt to change the presentation to match the AgentPress search widget is to hack the plugin, and that opens the door to all kinds of problems with updates. The styling might be tweaked a little more, but that's not going to make it look exactly like a different search widget.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jtskie]

Thanks Tom,

I moved it to a different section and am happy with it now, but there is one thing I would like to see if I correct. The text on the search button is greyed out until you put your cursor over it, how do I change it to show black text?

http://www.jeremytaylorhomes.com

[Author]

Posts