Super Basic CSS Questions

  • Resolved sampaven88

    (@sampaven88)


    11 years, 10 months ago

    Hi,

    I am new to WordPress and CSS and have a very basic questions in regards to customising your plugin. Sorry in advance!

    I have used the plugin as a shortcode in a widget and a shortcode on a page.

    WIDGET – [searchandfilter fields=”download_category,download_tag” submit_label=”Filter” headings=”Category or Goal,Location in Sydney”]

    PAGE – [searchandfilter fields=”download_category,download_tag” submit_label=”Search for Gifts” headings=” FitGIFT Type, Location in Sydney”]

    I want to change the submit button from a light grey to a yellow. How can I do that? is it as simple as…

    .searchandfilter label
    {

    display:block;
    color: yellow

    }

    Also, how can I make the search on one line rather than two when I use it as a short code on a page? what do I have to change to diplay: inline-block?

    Here is my site if you need it – http://sampaven88.wpengine.com/

    Thanks in advance,
    Sam

    https://wordpress.org/plugins/search-filter/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Ross Morsali

    (@designsandcode)

    11 years, 10 months ago

    Hey sampaven88

    To target the button would be something like:

    .searchandfilter input[type=submit]
{
    display:block;
    color: yellow
}

    And to make the search form horizontal I would do something like:

    .searchandfilter ul > li
{
    display: inline-block;
    padding-right: 10px;
}

    Good luck!

    Thread Starter sampaven88

    (@sampaven88)

    11 years, 10 months ago

    Thanks. Much appreciated.

    Thread Starter sampaven88

    (@sampaven88)

    11 years, 10 months ago

    Thanks for the guidance. I was able to sort out the button and style it the way I wanted.

    Unfortunately, I wasn’t able to make the search form horizontal. Any other ideas or CSS suggestions?

    Thanks in advance.

    SP

    Plugin Author Ross Morsali

    (@designsandcode)

    11 years, 10 months ago

    Hey sampaven88

    The code above works to make it horizontal IF the container of search & filter is wide enough.. so figure out what element S&F is contained in an make sure it is wide enough for the elements…

    Also you might have some styling on the form element so try to give that a width or set it to auto:

    .searchandfilter
{
    width:500px;
}

    Thanks

    Thread Starter sampaven88

    (@sampaven88)

    11 years, 10 months ago

    many thanks

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Super Basic CSS Questions’ is closed to new replies.