Hello Paul,
You helped me with some great CSS for my search fields that I love.

There are a couple things I would still like for the one in the search position and the one in the bottom6 position.

1) I would like to lighten the on hover color from the dark blue to some light blue that is almost white.
2) I would like to make the text of the search terms black or some other very dark color.

Are these values coming from the template? If so do you know where. I have been looking and not figuring it out. Sorry.

Thanks for any insights you have on this. The site is at drc.cloudaccess.host/



Sean

I hope I can also ask another related question here which is where is the value defined for the text color in the pulldown menus that I have in the sidebar1 position on the blog page at drc.cloudaccess.host/blog

These are named Dr. Carney, Admin, Research and Members. The text in the pull downs is very light and I want to darken it. I wonder if it is the same setting that controls the text in the Search fields.

Hi Sean,

1) The style applying is

input:hover, textarea:hover {
background: #0660a0;
}

so you would to add something like

#search input:hover {background:#000;}

replacing #000 with your own hex colour value

2) with the font colour it's

#search input {
color: #999
}

so

#search input {
color:#000;
}

Would do the trick

For the dropdown - the colour looks ok to me

div#fd .form-control {color: #555;}

This is coming from easyblog

Cheers
Paul

Thank you very much for your help. These are little things but they add the final touch. This site is now just about ready to launch... whew...

Again, thanks.

Sean

Paul,

Could I please ask for a tad bit more of your expertice on this.
I just discovered I need some help with the Search field and button on the search page.

Basically I am going to want the hover color to be FFF and I want to have no float so that the Search button is on the right on the search field. I could live without this of course but it would be much better IMHO.

I tried some code which is now commented out at the bottom of my custom.css file but it did not work.

#abovecontent input:hover {background:#FFF !important;}
#abovecontent button {float:none;}
#abovecontent input {color:#000;}

HI Sean,

The button has no style for it regarding display so try adding
The browser defaults to block which means it occupies the full width

Try adding this

#search-form .form-group {display: inline;}

Not 100% sure how it will work on mobile

Hi Sean,

The search results use the content / component area rather than abovecontent position

main #search-form input:hover {background: #fff;}

I'd also probably stick to using lower case for the css values as Anthony used that in the templates

I'm probably being over specific in the styling but wanted to avoid conflicts with the other two search boxes

Cheers
Paul

Over specific seems good to me. It all looks good and it works on the mobile although the button does wrap in portrait mode. I am happy with it.

Sean

All good?

Yes. I launched it. Thanks. It is now at drcarney.com. I would like a tad bit more padding between the field and the button in the search pages main area. But it is not essential.

Can you give me a prod when the site is up and I'll have a look

Cheers
Paul

drcarney.com/search

This is the site that has a bit of a problem with the CDN or SSL that I am trying to resolve but you should be able to see the page there.

Are you looking for extra space on desktop and mobile?

Cheers
Paul

I was thinking of some extra space on the desktop and the mobile to be a bit more separated like it is in the seach and bottom6 positions.

#search #mod-finder-searchword, main #search-form input, #bottom6 .search.finder input {margin-right: .5em;}

Try adding this with your own margin-right value

Cheers
Paul

Thank you so much. that did help. Interestingly the main section search on the search page is still not the same spacing. What code would I use if the only one I wanted to effect was the main search area on www.drcarney.com/search

The search position and the bottom6 position probably don't need any tweaking.

Sean

Hi Sean,

#search #mod-finder-searchword, main #search-form input, #bottom6 .search.finder input {
margin-right: .1em;
}

This is applying to the search in the content area

main #search-form input is the bit that is applying

but the margin right is so small its not really noticeable - is this what you want to change?