Not logged in. · Lost password · Register
Forum: General Help and Support Installation and Configuration RSS
Resolved: Change width of search bar
Avatar
rogerjames #1
Member for 3 months · 15 posts
Group memberships: Members
Show profile · Link to this post
Subject: Resolved: Change width of search bar
What file would I need to edit to change the width of the search bar on the top bar. I have tried looking at tons of files and not able to find this. I have users that is requesting to have the size changed so it is longer. Any advice on this would be apricated. Thanks.
This post was edited on 2019-03-17, 06:15 by rogerjames.
Avatar
LarsDW223 #2
Member since Sep 2014 · 398 posts · Location: Paderborn
Group memberships: Members
Show profile · Link to this post
You can try to create your own usertstyle.css in the conf folder. Also see https://www.dokuwiki.org/devel:css#user_styles.
In that file you can place CSS code to modify the layout of a DokuWiki template without chaning the template itself.

Assuming that you use the standard DokuWiki template you could try the following CSS code:

#dw__search {
    width: 50%;
}

Please try it out, I haven't tested it. If you are using a different template then you will need to tell us it's name so that people can help you.
Avatar
rogerjames #3
Member for 3 months · 15 posts
Group memberships: Members
Show profile · Link to this post
Thanks for the reply. I am using the Bootstrap3 template. Not sure if that makes a difference or not. I added that file to the wiki\config\ folder and all that seem to do is make the top bar bigger and the search bar is on the top row and the Menu's are under it. Any other ideals or suggestions to fix this? Thanks.
This post was edited on 2019-03-17, 03:35 by rogerjames.
Avatar
rogerjames #4
Member for 3 months · 15 posts
Group memberships: Members
Show profile · Link to this post
Ok, got this figured out now. Took a while. Just incase some one else has the same question. In the userstyle.css file add the follow below and your search bar will be longer and moved over to the left so it does not cover up the menus. Thanks.

#qsearch {
  width: 100%;
  min-width: 25em;

}
form#dw__search {
  display: block;
  font-size: 100%; 
  min-width: 26em;
}
Avatar
LarsDW223 #5
Member since Sep 2014 · 398 posts · Location: Paderborn
Group memberships: Members
Show profile · Link to this post
I am using the Bootstrap3 template. Not sure if that makes a difference or not.

Yes, CSS code is always template specific. But nice to see that you good it working yourself. The good thing about the userstyles.css file is that it will survive an update of your template. But if you ever switch to a new template you most probably will have to adjust it.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-05-25, 20:19:15 (UTC +02:00)