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: 96
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: 1844
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: 96
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: 96
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: 1844
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: 96
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: 32
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: 5376
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Document title in side navigation skin

Postby Jeanne_W on Tue Aug 07, 2018 1:37 pm

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
Jeanne_W
Propeller Head
 
Posts: 13
Joined: Mon Jun 27, 2016 11:50 pm

Re: Document title in side navigation skin

Postby chuck_agari on Tue Oct 09, 2018 12:38 pm

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?
chuck_agari
Propeller Head
 
Posts: 97
Joined: Wed May 30, 2018 2:40 pm

Re: Document title in side navigation skin

Postby Dave Lee on Tue Oct 09, 2018 11:28 pm

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5376
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Document title in side navigation skin

Postby ChoccieMuffin on Wed Oct 10, 2018 4:05 am

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">&#160;&#160;|&#160;&#160;<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.
You do not have the required permissions to view the files attached to this post.
Last edited by ChoccieMuffin on Wed Oct 17, 2018 9:17 am, edited 1 time in total.
Started as a newbie with Flare 6.1, now using Flare 2018.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Propellus Maximus
 
Posts: 1834
Joined: Wed Apr 14, 2010 8:01 am

Re: Document title in side navigation skin

Postby chuck_agari on Wed Oct 10, 2018 9:53 am

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.
chuck_agari
Propeller Head
 
Posts: 97
Joined: Wed May 30, 2018 2:40 pm

Re: Document title in side navigation skin

Postby chuck_agari on Wed Oct 10, 2018 10:22 am

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.
chuck_agari
Propeller Head
 
Posts: 97
Joined: Wed May 30, 2018 2:40 pm

Re: Document title in side navigation skin

Postby chuck_agari on Wed Oct 10, 2018 10:55 am

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.
You do not have the required permissions to view the files attached to this post.
chuck_agari
Propeller Head
 
Posts: 97
Joined: Wed May 30, 2018 2:40 pm

Re: Document title in side navigation skin

Postby chuck_agari on Wed Oct 10, 2018 11:31 am

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.
chuck_agari
Propeller Head
 
Posts: 97
Joined: Wed May 30, 2018 2:40 pm

Re: Document title in side navigation skin

Postby Dave Lee on Thu Oct 11, 2018 12:26 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5376
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Document title in side navigation skin

Postby chuck_agari on Thu Oct 11, 2018 11:02 am

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.
chuck_agari
Propeller Head
 
Posts: 97
Joined: Wed May 30, 2018 2:40 pm

Re: Document title in side navigation skin

Postby Dave Lee on Thu Oct 11, 2018 11:26 am

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!
Dave Lee
Master Propellus Maximus
 
Posts: 5376
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Document title in side navigation skin

Postby chuck_agari on Thu Oct 11, 2018 11:28 am

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.
chuck_agari
Propeller Head
 
Posts: 97
Joined: Wed May 30, 2018 2:40 pm


Return to Flare's General Discussion

Who is online

Users browsing this forum: No registered users and 10 guests