Aligning Search bar in Tripane skin

This forum is for all Flare issues related to styles, stylesheets and XML.

Aligning Search bar in Tripane skin

Postby Finner on Thu May 23, 2019 10:35 am

In my HTML5 help project, I want to set the template so that the Search bar shows either at the left or middle of the navigation bar. On p. 855, the Flare Styles Guide shows an "Alignment" option for the Search bar. My project, however, does not show that alignment option at all. Can anyone tell me how I can get that option?
Finner
Propeller Head
 
Posts: 39
Joined: Tue Jul 26, 2016 9:51 am

Re: Aligning Search bar in Tripane skin

Postby doc_guy on Fri May 24, 2019 11:18 am

Can you post a screen shot so I can see exactly what element you're wanting centered?
User avatar
doc_guy
Propellus Maximus
 
Posts: 1954
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Aligning Search bar in Tripane skin

Postby Finner on Tue May 28, 2019 8:39 am

Ideally, I would like the Search box to align at left with the topic area below.

[attachment=0]Searchbox.png[/attachment
You do not have the required permissions to view the files attached to this post.
Finner
Propeller Head
 
Posts: 39
Joined: Tue Jul 26, 2016 9:51 am

Re: Aligning Search bar in Tripane skin

Postby doc_guy on Wed May 29, 2019 7:46 pm

If I had to guess, I'd say the reference you see in the Flare Styles guide is for a different output. You are using the tri-pane output, which does not have an alignment option.

However, you can still move this with CSS. It just isn't very easy. You can't do it in your main style sheet in the project, because that only controls what is in the iframe, which is the text of the topic. The search box is outside the iframe, so you don't have any control of it through the main project style sheet.

The solution is to create a new style sheet, and add the properties you need to it, and then you need to add a script to the skin that will call your style sheet in the output.

Dave Lee wrote an excellent post that will get you there. The thread is here: viewtopic.php?f=9&t=18878

In your skin.css file, you'll want to add the following property:

Code: Select all
.search-bar {
     left: 350px;
}


I hope this helps.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1954
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Aligning Search bar in Tripane skin

Postby Finner on Thu May 30, 2019 5:28 am

Thanks for getting back to me! I had finally realized that I wasn't able to control the placement of the Search box because I was using the Tripane skin. Now I'm working with starting from a Side Navigation skin. But your information is very helpful.
Finner
Propeller Head
 
Posts: 39
Joined: Tue Jul 26, 2016 9:51 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: Google [Bot] and 7 guests