Aligning Search bar in Tripane skin

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Finner
Propeller Head
Posts: 49
Joined: Tue Jul 26, 2016 9:51 am

Aligning Search bar in Tripane skin

Post by Finner »

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?
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Aligning Search bar in Tripane skin

Post by doc_guy »

Can you post a screen shot so I can see exactly what element you're wanting centered?
Paul Pehrson
My Blog

Image
Finner
Propeller Head
Posts: 49
Joined: Tue Jul 26, 2016 9:51 am

Re: Aligning Search bar in Tripane skin

Post by Finner »

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.
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Aligning Search bar in Tripane skin

Post by doc_guy »

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.
Paul Pehrson
My Blog

Image
Finner
Propeller Head
Posts: 49
Joined: Tue Jul 26, 2016 9:51 am

Re: Aligning Search bar in Tripane skin

Post by Finner »

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.
Post Reply