GD Search form style

This topic contains 5 replies, has 2 voices, and was last updated by  Guust 10 years, 1 month ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: 

  • Author
    Posts
  • September 22, 2014 at 4:52 am #16083

    swingmakers
    Free User
    Post count: 23

    I am using Divi theme and would like the geodir-search form to look like the Divi contact form. The geodir-search form on my site is located on the home page http://www.swingmakers.com. The Divi contact form is located at http://www.swingmakers.com/contact.

    September 22, 2014 at 10:01 am #16093

    Guust
    Moderator
    Post count: 29970

    Have a look at this article
    http://docs.wpgeodirectory.com/customizing-your-style/
    and look for the CSS of the Divi form components and then apply that to the GD search form classes.
    Let us know how you went.

    September 24, 2014 at 4:35 am #16352

    swingmakers
    Free User
    Post count: 23

    Ok, nailed it on my home page http://www.swingmakers.com but can’t figure out for the life of me how to change the css for the dropdown in the login widget to look like the dropdown on my front page. I attached a pic of the dropdown I want to change. The divi css I used for the dropdown on the frontpage is:

    .geodir-search select {
    background-color: #eee; border: none!important; width: 25% !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; font-size: 14px; color: #999 !important; padding: 16px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    September 24, 2014 at 10:10 am #16367

    Guust
    Moderator
    Post count: 29970

    Try something like this:

    .geodir-chosen-container-single .chosen-single {
    padding: 10px;
    background-color: white;
    }

    September 24, 2014 at 5:40 pm #16418

    swingmakers
    Free User
    Post count: 23

    The original css has extra attributes that aren’t addressed in my new css. How do I override these attributes or have them ignored?

    September 24, 2014 at 9:54 pm #16453

    Guust
    Moderator
    Post count: 29970

    If you are happy with the extra attributes, then don’t worry, they will apply.
    But if you want to change them, then usually override them by using what you want.
    For example if the existing code is “padding: 10px;”, then using “padding: 26px;” in your child style.css should be prioritised.
    If it is not add “!important” to it, like “padding: 10px !important;”

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount