• Resolved julieselarsen

    (@julieselarsen)


    Hi,

    How do i style the button in the search short code? I know you can write the custom css, but how do I for example make it green?

    And how do i get the button on the same line as the search box and text? So it is only one line (except on the mobile)

    Thank you 🙂

Viewing 15 replies - 1 through 15 (of 18 total)
  • Hi julieselarsen,

    Could you send us the URL of your UFAQ search page?

    Thread Starter julieselarsen

    (@julieselarsen)

    Yes it is: http://www.hemonto.com/finansordbogen

    password: Julie

    Hi @julieselarsen,

    You can use the following Custom CSS to style your button:

    .ewd-otp-submit.pure-button.pure-button-primary.filled {
        background: #4ebf8c;
        border-radius: 100px;
        padding: 5px 15px 5px 15px;
        border: none;
        color: white;
    }

    Could you try out the following Custom CSS for the position of button and see if it works for you?

    @media only screen and (min-width: 680px) {
    .ewd-otp-submit.pure-button.pure-button-primary.filled {
        position: absolute;
        right: 10%;
        top: 15px;
    }
    }
    Thread Starter julieselarsen

    (@julieselarsen)

    Hi,

    Thank you, but none of the codes work on the site 🙂

    Is there something else?

    Hi @julieselarsen,

    Are you using any cache plugins? If so could you please delete your cache and see if that made a difference?

    Here is what I see: https://ibb.co/zFZ0zdL

    Thread Starter julieselarsen

    (@julieselarsen)

    Hi,

    I have now deleted the cache and still can not see it 🙂

    And can the button be on the same line as the search area?

    Thank you 🙂

    Thread Starter julieselarsen

    (@julieselarsen)

    Hi,

    Can you do something, so the screen (the text/answer) don’t jump to the top when you open a FAQ?

    Thank you 🙂

    Hi @julieselarsen,

    Could you try the following Custom CSS to solve the button issues:

    input#ufaq-ajax-search-btn {
        background: #4ebf8c;
        border-radius: 100px;
        padding: 5px 15px 5px 15px;
        border: none;
        color: white;
    }
    
    @media only screen and (min-width: 680px) {
    input#ufaq-ajax-search-btn {
        position: absolute;
        right: 10%;
        top: 15px;
    }
    }

    Regarding the page jump issue,
    That just sounds like you have “Scroll To Top” set to “Yes” (in the “Basic” area of the “Settings” tab). If you set that to no, it won’t scroll to the FAQ you click on.

    Thread Starter julieselarsen

    (@julieselarsen)

    Hi,

    You were right about the scroll to the top, thank you 🙂

    The button styling works now, but the search area and the button is still not on the same line.

    Can i try something else?

    Thread Starter julieselarsen

    (@julieselarsen)

    And where do I change the font of the FAQ when you go the site with all the FAQ for a specific category?

    Like this: http://www.hemonto.com/ufaq-category/aktier/

    Thank you in advance 🙂

    Hi @julieselarsen ,

    1)

    The button styling works now, but the search area and the button is still not on the same line.

    On http://www.hemonto.com/finansordbogen is the password still Julie?

    2) What font would you like to apply?

    Thread Starter julieselarsen

    (@julieselarsen)

    Hi,

    1) Yes it is.

    2) I want to change the size of the font 🙂

    Thread Starter julieselarsen

    (@julieselarsen)

    And how do I remove/make the author unvisible on all the seperat pages like this? 🙂

    https://www.hemonto.com/finansordbog/hedgefonde/

    Hi @julieselarsen ,

    As a test, could you try adding this CSS to the “Custom CSS” section (in “Options”->”Basic)

    form#ufaq-ajax-form {
    height: 100px;
    width: 100%;
    display: block;
    position: relative;}
    
    div#ewd-ufaq-jquery-ajax-search {
    width: 70%;
    float: left;}
    
    input#ufaq-ajax-search-btn {
    position: absolute;
    bottom: 20px;
    left: 70%;
    margin:0 0 0 20px;}
    
    input#ufaq-ajax-text-input {
    width: 100%;
    margin: 20px 0 0 0!important;}
    
    .type-ufaq.ufaq p {
    font-size: 13px;}
    
    .type-ufaq.ufaq p.post-meta.entry-meta {
    display:none;}

    To change the font size you mentioned, just change 13px (under .type-ufaq.ufaq p) to whatever size you’d like

    Thread Starter julieselarsen

    (@julieselarsen)

    Hi,

    Thank you, but the code does not work. The font size is the same and the authour is still visible.

    It is the size of titles i want to change like “Hedgefonde” 🙂

Viewing 15 replies - 1 through 15 (of 18 total)

The topic ‘Styling search shortcode’ is closed to new replies.