Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 21, 2020 at 11:49 am #1254618
    aicompcloud

    Hi, I have an alternate color section where the background is blue and the font is white.

    Now I want to use your search form in an alternate section. But I need to address specific parts via css.
    See the screenshot link. I want to switch the input field to white, the input font and placeholder text to blue and the submit button icon should be white too.

    Unfortunately, I have already adapted many form fields in general to adapt Contact Form 7 for the Alternate Color Section. So it could be that I do not get any results for the search field.

    I cannot provide a login because the website is on stagging mode.

    Any idea how to address via css?

    Thanks

    October 21, 2020 at 12:40 pm #1254628
    Nikko

    Hi Patric,

    Please try adding this CSS code:

    #top.search-results .template-search article.post-entry:nth-child(even) {
    background-color: rgba(0,0,255,0.1);
}
    

Best regards,
Nikko
    October 21, 2020 at 1:22 pm #1254650
    aicompcloud

    Sorry, didn’t work…

    I already found this. It almost works. 

    #top .alternate_color .avia_search_element #s {
 background-color:#fff!important;
    color: #007dbb!important;
}
#top .alternate_color .avia_search_element .av_searchsubmit_wrapper {
    background-color: #007dbb!important;
}

    But I still cannot see the icon in the submit button. Any idea?

    Thanks

    October 21, 2020 at 4:22 pm #1254695
    Nikko

    Hi aicompcloud,

    Please try using this CSS code:

    #top .avia_search_element .av-search-icon {
    color: white;
}

    Best regards,
    Nikko

    October 22, 2020 at 9:54 am #1254890
    aicompcloud

    Sorry, that didn’t work too.

    But I found a workaround. The icon appears when text is placed in the button. I just made a space there and then I fixed the style via css. So at the end the button is a nice square. I’ll leave the code her if someone else have problems with this.

    I don’t know if that’s a bug or just happens due to my CF7 custom styles. Anyway now it works for me.

    #top .alternate_color .avia_search_element #s {
 background-color:#fff!important;
    color: #007dbb!important;
    font-size: 1.1em!important;
}
#top .alternate_color .avia_search_element .av_searchsubmit_wrapper {
    background-color: #007dbb!important;
    right:2px;
    max-width: 55px!important;
}
.alternate_color .av_ajax_search_image {
color:#007dbb!important;
}

    Thanks for your help Nikko

    October 22, 2020 at 10:13 am #1254898
    Nikko

    Hi aicompcloud,

    We’re happy that you found a workaround :)
    And thanks as well for sharing it with other users in this forum.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Search form in alternate color section’ is closed to new replies.