Styling search shortcode
-
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 🙂
-
Hi julieselarsen,
Could you send us the URL of your UFAQ search page?
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; } }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
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 🙂
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.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?
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?
Hi,
1) Yes it is.
2) I want to change the size of the font 🙂
And how do I remove/make the author unvisible on all the seperat pages like this? 🙂
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 likeHi,
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” 🙂
The topic ‘Styling search shortcode’ is closed to new replies.