There seem to be several posts asking about this but none had an answer that I was able to make sense of and most people seem to have given up and moved to using a sidenav skin (not an option for me).
I want to eliminate the wasted space at the top of the page that only contains the search field (it could also contain a logo, but we're not doing that). I would therefore like to move the search field to be in the toolbar at the top of the body panel (between the two sets of buttons shown in the image).
I have gathered from the similar questions in this forum that it's not possible to do this within Flare directly, but that is should be feasible by playing with Javascript and stylesheets. I've tried following the tutorial in https://ukauthor.wordpress.com/2014/08/ ... tml5-skin/ but I can't get it to work; possibly things have changed in the 8 years since it was written, but equally possibly I'm missing some important piece of information!
Has anyone successfully done this and, if so, could you share the changes that you had to make to various files to get it to work?
Thank you. Fiona
HTML5 Tripane: Move search field
HTML5 Tripane: Move search field
You do not have the required permissions to view the files attached to this post.
Re: HTML5 Tripane: Move search field
It's certainly doable, but it takes a few pieces.
In the skin, in the Toolbar tab, in the Custom JavaScript to include in Toolbar page, add this:
$('<link>')
.appendTo($('head'))
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', 'Content/skin.css');
In your Content folder, create skin.css, and reposition the search field with something like this (you may need to fiddle with the numbers to make it look right in your skin):
div.search-account-container
{
position: fixed;
top: -9px;
right: 50px;
}
You can, if necessary, restyle other elements of the skin you can't set on the Styles tab.
Finally, back in the skin, on the Styles tab, under Header | Height set the height to 1 px or 0 px to eliminate all the space.
In the skin, in the Toolbar tab, in the Custom JavaScript to include in Toolbar page, add this:
$('<link>')
.appendTo($('head'))
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', 'Content/skin.css');
In your Content folder, create skin.css, and reposition the search field with something like this (you may need to fiddle with the numbers to make it look right in your skin):
div.search-account-container
{
position: fixed;
top: -9px;
right: 50px;
}
You can, if necessary, restyle other elements of the skin you can't set on the Styles tab.
Finally, back in the skin, on the Styles tab, under Header | Height set the height to 1 px or 0 px to eliminate all the space.