Page 1 of 1

Document title in side navigation skin

Posted: Tue May 08, 2018 10:26 pm
by 3lliot
Would I be right in thinking that there's no way to add a document title to the header for a side navigation skin...?

Re: Document title in side navigation skin

Posted: Wed May 09, 2018 8:24 am
by doc_guy
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.

Re: Document title in side navigation skin

Posted: Wed May 09, 2018 2:10 pm
by 3lliot
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).

Re: Document title in side navigation skin

Posted: Wed May 16, 2018 4:51 pm
by 3lliot
Any MadCap staff around that would know the answer to this by any chance...?

Re: Document title in side navigation skin

Posted: Thu May 17, 2018 10:22 am
by doc_guy
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.

Re: Document title in side navigation skin

Posted: Thu Jun 14, 2018 8:44 pm
by 3lliot
Thanks Paul, I'll give that a shot...

Re: Document title in side navigation skin

Posted: Mon Jun 25, 2018 2:11 am
by moshe
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

Re: Document title in side navigation skin

Posted: Mon Jun 25, 2018 4:35 am
by NorthEast
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

Re: Document title in side navigation skin

Posted: Tue Aug 07, 2018 1:37 pm
by Jeanne_W
I have implemented Dave Lee's approach (thank you, Dave!!), but with a couple of changes:
- I kept the logo (didn't set it to not display)
- I used 'appendTo' instead of 'prependTo' so that the document title displays to the right of the logo

This works beautifully.

Of course, you also need to add a new stylesheet for the skin or at least define 'div#skin-heading' in the stylesheet you are using, much like explained in the example here: http://ukauthor.esy.es/SkinMods/Default ... amples.htm (again kudos to Dave, who made this available in an older thread for regular HTML5 output: viewtopic.php?f=9&t=18878#p99068).

I hope this is helpful!

Thanks,
Jeanne

Re: Document title in side navigation skin

Posted: Tue Oct 09, 2018 12:38 pm
by chuck_agari
Hi Dave, I gave this a try and it did not result in what I expected. Also, a niggling issue.

First, I used Jeanne's code change. The idea was to have the logo followed by text. In theory, it worked, but the positioning is wonky. The text is too close to the logo, and it is not centered vertically in the heading space. It's also not styled the way I'd want it to match the rest of the content. Not sure how I'd go about doing all that in that code snippet, or if it should be done somewhere else. Maybe apply a class to the div?

But the biggest issue is that the variable System.Title didn't give me what I expected. It gave me the topic title, changing every time a new topic was displayed. I supposed I should have seen this from http://help.madcapsoftware.com/flare201 ... iables.htm. Is there an (undocumented) system variable that would give me a product name?

Fortunately, I have a variable for the product name. I used that, and it works.

Which brings me to another question. I have a title element in the head of the master page:

<script>
document.title = "Enterprise Protect Help - " + document.title;
</script>

But this is product specific, and I now have a single content repository that I use to produce outputs for multiple projects. So I tried this:

<script>
document.title = <MadCap:variable name="Variables.Product Name (short)" /> + " - " + document.title;
</script>

It failed miserably. The output ignored the first part completely. Is there a way to do this?

Re: Document title in side navigation skin

Posted: Tue Oct 09, 2018 11:28 pm
by NorthEast
chuck_agari wrote:The text is too close to the logo, and it is not centered vertically in the heading space. It's also not styled the way I'd want it to match the rest of the content. Not sure how I'd go about doing all that in that code snippet, or if it should be done somewhere else. Maybe apply a class to the div?
Yes, you need to use CSS to sort out the style and positioning of the content that you insert in the header.
chuck_agari wrote:Is there an (undocumented) system variable that would give me a product name?
No, Flare doesn't know what you call your product. Just use your own variable.
chuck_agari wrote:I have a title element in the head of the master page:
...
It failed miserably. The output ignored the first part completely. Is there a way to do this?
You can't use Flare variables in javascript.

So perhaps insert your variable somewhere in the HTML, and write some javascript to read that back from the HTML (examples). The variable doesn't need to be visible, you could stick it inside a div that's set not to display, a meta tag, a data attribute, etc.

Re: Document title in side navigation skin

Posted: Wed Oct 10, 2018 4:05 am
by ChoccieMuffin
I've put in a feature request to enable this, I suggest that others do the same.

And I am SO VERY HAPPY with this thread, I'm grinning like a Cheshire cat! NOTE: I HAVE EDITED THE CODE HERE SINCE I FIRST POSTED IT, SEE BELOW.

To make the added variable appear in the right place, you can add formatting. For my project I have wrapped the variable in <p class="Title-bar"> </p> tags, and added p.Topic-bar to my stylesheet, then played around with the padding until things lined up:

Code: Select all

p.Title-bar
{
	padding-top: 18px;
	padding-left: 30px;
	color: #ffffff;	
}
This is what's after my <head> </head> tags (our lot like the pipe character, so I added that bit in, but obviously you don't have to):

Code: Select all

    <div id="skin-heading">
        <p class="Title-bar">  |  <MadCap:variable name="Local_Data.ApplicationName" /></p>
    </div>
    <script type="text/javascript">/*<![CDATA[*/
		$(document).ready(function(){
		$("#skin-heading").appendTo("div.logo-wrapper"); 
		});
	/*]]>*/</script>
    <body>
        <MadCap:topicToolbarProxy data-mc-skin="/Project/Skins/HTML5_Topic_Toolbar.flskn" />
        <MadCap:breadcrumbsProxy />
        <div>
            <MadCap:bodyProxy />
        </div>
And this is what it looks like, web medium and tablet medium.
Title-bar.png
"Application Name" comes from a variable set that is different for each of my child projects, so I can use a single pair of masterpages (home and topics) that are imported from my globals project. I can't tell you how happy I am!

Thanks all who have contributed to this thread, you're all stars!

EDIT: I have edited this post because I had originally added h1.Title-bar, but that broke all my x-refs in the HTML5 output (because the x-ref was to the first heading on the page which was taken from the header in the master page rather than the topic), so I changed it to p.Title-bar and it now works beautifully AND my x-refs work.

Re: Document title in side navigation skin

Posted: Wed Oct 10, 2018 9:53 am
by chuck_agari
I had shrunk the height of the header, giving it just 10px of padding at the top and bottom. (I'm, a big proponent of minimizing eye candy and maximizing screen real estate for content.) After I wrote my last post, I went ahead and added this class to my CSS:

.helpheader
{
font-family: "Open Sans";
font-size: 1.6em;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #f68d39;
margin-left: 0.5in;
margin-top: 0;
margin-bottom: 0;
padding: 20px 0;
}

The challenge here is that there's no way currently in CSS to center vertically in a block-level element. So I guessed.

I then just added the class to the div:

<div id="skin-heading" class="helpheader"><MadCap:variable name="Variables.Product Name (long)" /> Help

Nailed it first try.

Re: Document title in side navigation skin

Posted: Wed Oct 10, 2018 10:22 am
by chuck_agari
But this is where my Javascript skills get rusty. Based on the above, and with a bit of extra research, I tried this:

Code: Select all

<meta class="prodname"><MadCap:variable name="Variables.Product Name (short)" /></meta>
		<script type="text/javascript">/*<![CDATA[*/
			$(document).ready(function(){
			$(document).attr("title", $( "meta.prodname" ).text() + " - " + document.title);
			});
		/*]]>*/</script>
Instead of adding the product name to the browser title bar/tab, it rendered a space above the header and dropped the product name into that space.

Oh, and the second part of that, the

Code: Select all

+ " - " + document.title
, didn't work at all. But the topic title still remains by its lonesome n the tab, so I still have that, at least. I'm guessing that document.title has to be jQueified somehow, but I'm not sure how.

Re: Document title in side navigation skin

Posted: Wed Oct 10, 2018 10:55 am
by chuck_agari
chuck_agari wrote:But this is where my Javascript skills get rusty. Based on the above, and with a bit of extra research, I tried this:

Code: Select all

<meta class="prodname"><MadCap:variable name="Variables.Product Name (short)" /></meta>
		<script type="text/javascript">/*<![CDATA[*/
			$(document).ready(function(){
			$(document).attr("title", $( "meta.prodname" ).text() + " - " + document.title);
			});
		/*]]>*/</script>
Instead of adding the product name to the browser title bar/tab, it rendered a space above the header and dropped the product name into that space.

Oh, and the second part of that, the

Code: Select all

+ " - " + document.title
, didn't work at all. But the topic title still remains by its lonesome n the tab, so I still have that, at least. I'm guessing that document.title has to be jQueified somehow, but I'm not sure how.
I stand corrected. That second part is appearing in the browser title bar/tab. I just noticed the hyphen and space before it.
flaretitlebar.png
You can see here what I'm getting out of this code.

Re: Document title in side navigation skin

Posted: Wed Oct 10, 2018 11:31 am
by chuck_agari
But wait! There's more!

Turns out that meta tag is what was putting that line of text at the top, above the heading. I commented it out and it disappeared.

I also realized that I didn't need jQuery to do what I wanted. So it tried this:

Code: Select all

<head>
		<!-- <meta id="prodname"><MadCap:variable name="Variables.Product Name (short)" /></meta> -->
	
        <script>
			
            <!-- document.title = "Enterprise Protect Help - " + document.title; -->
			document.title = document.getElementById("prodname").innerHTML + " - " + document.title;
		</script>
Sadly, it did not work. The hyphen is gone from the browse tab too, which tells me this line of code is either doing absolutely nothing or failing.

Re: Document title in side navigation skin

Posted: Thu Oct 11, 2018 12:26 am
by NorthEast
The meta tag you're using is invalid for a few reasons - meta tags go in the head area (not body), and they only contain attributes and not any content.
(https://www.w3schools.com/tags/tag_meta.asp)

If you want to insert a meta tag, I'd suggest doing it in the target's Advanced tab - note you can insert variables directly in here.
Setting up meta tags here will add them to every topic in your output.
For example:

Code: Select all

<meta name="prodname" content="[%=Variables.Product Name (short)%]" />

And to read it into a variable called prodname:

Code: Select all

var prodname = $("meta[name=prodname]").attr("content");
The jQuery selects the meta tag with the attribute name "prodname", and gets its attribute named "content" - so prodname will contain the Flare variable text from the meta tag.

Works fine for me.

If you're rusty with javascript, then Google is your friend.

Re: Document title in side navigation skin

Posted: Thu Oct 11, 2018 11:02 am
by chuck_agari
Awesome. Thanks Dave, that worked perfectly. And now that I've done it, I'm not sure I want it because the content experience now is that users will almost never see the topic name in the tab because tabs aren't rendered long enough for the content they contain. I may go back.

Couple of other things.

I did Google. That's how I got to where I was, but couldn't find anything more useful. That's what forums are for. :)

My local community college (CCSF) recently started offering a class on Javascript libraries. Once I finish the XML & JSON class I'm taking this semester, I plan to take Javascript next spring (to refresh my knowledge, plus gaps, and learn what's new with the language), and the take the libraries class in the fall.

Re: Document title in side navigation skin

Posted: Thu Oct 11, 2018 11:26 am
by NorthEast
chuck_agari wrote:My local community college (CCSF) recently started offering a class on Javascript libraries. Once I finish the XML & JSON class I'm taking this semester, I plan to take Javascript next spring (to refresh my knowledge, plus gaps, and learn what's new with the language), and the take the libraries class in the fall.
Yep, it's really worth learning some basics around HTML, CSS, and javascript (especially jQuery); as it will pay dividends when working with Flare HTML5 outputs.
I have no web dev background, and everything I know has been self-taught, which shows it's not that difficult!

Re: Document title in side navigation skin

Posted: Thu Oct 11, 2018 11:28 am
by chuck_agari
Dave Lee wrote:
chuck_agari wrote:My local community college (CCSF) recently started offering a class on Javascript libraries. Once I finish the XML & JSON class I'm taking this semester, I plan to take Javascript next spring (to refresh my knowledge, plus gaps, and learn what's new with the language), and the take the libraries class in the fall.
Yep, it's really worth learning some basics around HTML, CSS, and javascript (especially jQuery); as it will pay dividends when working with Flare HTML5 outputs.
I have no web dev background, and everything I know has been self-taught, which shows it's not that difficult!
I took a number of programming classes as part of my degree program way back when (including one in assembly language!), and routinely try to find something to learn just about every year. I've taken Javascript classes twice, but the last time was quite a few years ago, and if you don't use it, you lose it.

Re: Document title in side navigation skin

Posted: Tue Oct 22, 2019 5:00 am
by rogersm
Great thread! Probably a stupid question, but I have two screens. The larger screen has a screen resolution set to 1920 x 1080 so when I align the title to where I want it, all is fine.

However, on my smaller laptop sized screen (resolution 1600 x 900), the position of the title moves. I used padding (in pixels) to align the title. Is there a way to position the title so that it does not move irrespective of screen resolution?

Re: Document title in side navigation skin

Posted: Tue Oct 22, 2019 4:30 pm
by Psider
em might work better as that's proportional to the font size? You can do decimal numbers so 0.3em is a thing.

Re: Document title in side navigation skin

Posted: Wed Oct 23, 2019 5:50 am
by rogersm
Great, thanks. I will give that a go.