Document title in side navigation skin

This forum is for all Flare issues not related to any of the other categories.

Document title in side navigation skin

Postby 3lliot on Tue May 08, 2018 10:26 pm

Would I be right in thinking that there's no way to add a document title to the header for a side navigation skin...?
3lliot
Propeller Head
 
Posts: 95
Joined: Wed Mar 23, 2011 8:45 pm

Re: Document title in side navigation skin

Postby doc_guy on Wed May 09, 2018 8:24 am

I'm not sure what you are asking. Do you mean in the bar where the search box and logo are? There isn't a way to do that by default, but I imagine you could find a jquery or similar script that would let you move the text of the first h1 up into the header area. That's not my area of expertise, but maybe Dave Lee can chime in. He's sort of a genius in that area of output manipulation via script.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1843
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Document title in side navigation skin

Postby 3lliot on Wed May 09, 2018 2:10 pm

Yes, in the space where the logo & search box are. It's bizarre that there isn't an out-of-the-box function.

I had a solution for the old HTML5 skin that lived in the <toolbar> section of the skin which copied header text from an html file in your resources folder. But the sidenav skin doesn't have a toolbar section, and putting one in there doesn't do anything (unsurprisingly).
3lliot
Propeller Head
 
Posts: 95
Joined: Wed Mar 23, 2011 8:45 pm

Re: Document title in side navigation skin

Postby 3lliot on Wed May 16, 2018 4:51 pm

Any MadCap staff around that would know the answer to this by any chance...?
3lliot
Propeller Head
 
Posts: 95
Joined: Wed Mar 23, 2011 8:45 pm

Re: Document title in side navigation skin

Postby doc_guy on Thu May 17, 2018 10:22 am

I can get you part way there:

Code: Select all
h1 {
   position:absolute;
   z-index:2000; /* This is important because the header bar has a set z-index of 1000, so we need to be higher than that */
   margin-top: -145px; /* Your number may vary depending on your logo and header height */
   background-color:transparent; /* Don't know if you need this, but my H1 had a background color for some reason */
}


Problems:
  • You'd need to put this in a media query section so that it doesn't apply when the screen switches to tablet/mobile view because then it conflicts with the logo and the search box
  • If your company logo is wide, the header will conflict with the logo if the window is narrow.
  • If your h1 is long, it will conflict with the search box on the right.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1843
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Document title in side navigation skin

Postby 3lliot on Thu Jun 14, 2018 8:44 pm

Thanks Paul, I'll give that a shot...
3lliot
Propeller Head
 
Posts: 95
Joined: Wed Mar 23, 2011 8:45 pm

Re: Document title in side navigation skin

Postby moshe on Mon Jun 25, 2018 2:11 am

I realize that the request was for adding text to the header. But if the header text is the same for the entire project, you could simply put the text into an image with a transparent background, and add the image to the Flare header background. You will have to play with the spacing between your logo, the image containing the text, and the search bar. If the image is only in the "web medium", the image will disappear when the screen hits the "tablet medium" breakpoint and the logo becomes centered.

Hope this helps someone,
Moshe
Moshe Davis
Jerusalem, Israel
moshe
Propeller Head
 
Posts: 30
Joined: Tue Apr 05, 2016 10:10 pm
Location: Jerusalem, Israel

Re: Document title in side navigation skin

Postby Dave Lee on Mon Jun 25, 2018 4:35 am

I'm working on a side nav skin at the moment, and I'm inserting my own title into the header.

This is how I'm doing it...

(1) In your master page, add the following code:

Code: Select all
<div id="skin-heading">
   <MadCap:variable name="System.Title" />
</div>
<script type="text/javascript">/*<![CDATA[*/
   $(document).ready(function(){
         $("#skin-heading").prependTo("div.logo-wrapper");
   });
/*]]>*/</script>


* The div#skin-heading contains the HTML to add to the header, in this case the system variable for page title.
* The script moves whatever is inside div#skin-heading to the header, inside div.logo-wrapper.

(2) Set the logo so it does not display in the skin: Styles > Logo > Layout > Display : None
Dave Lee
Master Propellus Maximus
 
Posts: 5197
Joined: Mon Mar 05, 2007 8:33 am
Location: UK


Return to Flare's General Discussion

Who is online

Users browsing this forum: No registered users and 2 guests