Title: Styling search shortcode Last modified: June 24, 2019 --- # Styling search shortcode * Resolved [julieselarsen](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 11 months ago](https://wordpress.org/support/topic/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 🙂 Viewing 15 replies - 1 through 15 (of 18 total) 1 [2](https://wordpress.org/support/topic/styling-search-shortcode/page/2/?output_format=md) [→](https://wordpress.org/support/topic/styling-search-shortcode/page/2/?output_format=md) * [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/) * (@etoilewebdesign) * [6 years, 11 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11668109) * Hi julieselarsen, * Could you send us the URL of your UFAQ search page? * Thread Starter [julieselarsen](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 11 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11677707) * Yes it is: [http://www.hemonto.com/finansordbogen](http://www.hemonto.com/finansordbogen) * password: Julie * [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/) * (@etoilewebdesign) * [6 years, 11 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11679677) * Hi [@julieselarsen](https://wordpress.org/support/users/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](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 11 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11681966) * Hi, * Thank you, but none of the codes work on the site 🙂 * Is there something else? * [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/) * (@etoilewebdesign) * [6 years, 11 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11687266) * Hi [@julieselarsen](https://wordpress.org/support/users/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](https://ibb.co/zFZ0zdL) * Thread Starter [julieselarsen](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 11 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11696066) * 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](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 11 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11696722) * Hi, * Can you do something, so the screen (the text/answer) don’t jump to the top when you open a FAQ? * Thank you 🙂 * [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/) * (@etoilewebdesign) * [6 years, 11 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11701402) * Hi [@julieselarsen](https://wordpress.org/support/users/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](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 10 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11747175) * 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](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 10 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11747232) * 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/](http://www.hemonto.com/ufaq-category/aktier/) * Thank you in advance 🙂 * [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/) * (@etoilewebdesign) * [6 years, 10 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11756392) * Hi [@julieselarsen](https://wordpress.org/support/users/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](http://www.hemonto.com/finansordbogen) is the password still `Julie`? * 2) What font would you like to apply? * Thread Starter [julieselarsen](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 10 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11758214) * Hi, * 1) Yes it is. * 2) I want to change the size of the font 🙂 * Thread Starter [julieselarsen](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 10 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11759566) * And how do I remove/make the author unvisible on all the seperat pages like this? 🙂 * [https://www.hemonto.com/finansordbog/hedgefonde/](https://www.hemonto.com/finansordbog/hedgefonde/) * [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/) * (@etoilewebdesign) * [6 years, 10 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11763856) * Hi [@julieselarsen](https://wordpress.org/support/users/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](https://wordpress.org/support/users/julieselarsen/) * (@julieselarsen) * [6 years, 10 months ago](https://wordpress.org/support/topic/styling-search-shortcode/#post-11769694) * 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) 1 [2](https://wordpress.org/support/topic/styling-search-shortcode/page/2/?output_format=md) [→](https://wordpress.org/support/topic/styling-search-shortcode/page/2/?output_format=md) The topic ‘Styling search shortcode’ is closed to new replies. * ![](https://ps.w.org/ultimate-faqs/assets/icon-128x128.png?rev=1803957) * [Ultimate FAQ Accordion Plugin](https://wordpress.org/plugins/ultimate-faqs/) * [Frequently Asked Questions](https://wordpress.org/plugins/ultimate-faqs/#faq) * [Support Threads](https://wordpress.org/support/plugin/ultimate-faqs/) * [Active Topics](https://wordpress.org/support/plugin/ultimate-faqs/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/ultimate-faqs/unresolved/) * [Reviews](https://wordpress.org/support/plugin/ultimate-faqs/reviews/) * 18 replies * 2 participants * Last reply from: [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/) * Last activity: [6 years, 10 months ago](https://wordpress.org/support/topic/styling-search-shortcode/page/2/#post-11809404) * Status: resolved