Changing the search bar

Developers
1

So I’m combing through this main.css file for all the different parts of the search bar and I’m having a bit of time trying to piece together all the different parts. Where they are located…etc.

This particular line of the “index” file which I would assume lives in index.php, however it does not. I’m wanting to change the styling of this, but it does not live in main.css file. Where can I over ride this?

{code}

ul.token-input-list-facebook { width: 300px; float: right; height: 25px!important; margin-right: -5px; background: #fff; }div.token-input-dropdown-facebook { width: 298px !important; z-index: 99999999 }table.fastFinder { margin: 0px 0px; opacity: 0.8; }table.fastFinder td { border-top: none }.fastFinderTotal { font-size: 9.6px; font-weight: normal; font-style: italic; line-height: 80%; color: #888; }.fastFinderRow td { border-bottom: 0; }#header-finder h2 { padding: 0;}
var fastFinderSearchValidate=new LiveValidation('fastFinderSearch', { }); {/code}

Fast Finder: Actions, Classes, Students, Staff

ul.token-input-list-facebook { width: 300px; float: right; height: 28px!important; margin-right: 0px; box-sizing: border-box; padding-left: 0px;}div.token-input-dropdown-facebook { width: 300px; z-index: 99999999 }
2

Hi eswbitto, you’ve stumbled upon some legacy code that is still inline, but really ought to be in CSS. The last person to work on this part of the codebase was @ross, our Senior Developer, so I am going to ask her if she has any thoughts on moving this into the theme in v16. If she is happy with this approach, then I’ll make the change. Thanks, Ross.

3

Hi eswbitto,

You can find those css sections in lines 2176 of functions.php and 126 of <code class="CodeInline">src/Forms/Input/Finder.php. There’s even a little TODO item on line 124 :sweat_smile:

We’ve been undertaking a lot of refactoring recently on the back-end with the aim of facilitating a responsive theme update for the front-end, so what you’ve found is somewhat transitional for the time-being. This responsive update will involve introducing new css classes and a new set of Sass files for creating themes with. We’re not quite there yet though, our current target is v17. If you’re happy to hack on the current theme and code absolutely feel free to (you can fork the GitHub repository to track your changes so they’re not overwritten for new versions), otherwise if you’re at all interested in diving into some of the upcoming theme work be sure to give a shout.

Thanks!
4

@ross

Thank you for the information! Yes, this will definitely help. I will look into it and see what I can come up with. Right now I’m mainly using this as a project to sharpen my skills in css, php, and JS. I see this solution having great promise. Keep up the good work!

Once I have mastered my skills I would like to contribute. :slight_smile:

5

@ross

Have you looked into doing something like this for a theme? https://adminlte.io/ this is the goal that I’m currently going forward with. I really like the design and it would a great way to not only encompass the existing core, but also be able to leave room for addons.