Adding clickable links to Header area (solved!)

[ArdisRamey]

I'm using the Side Navigation skin, and have a requirement to add clickable links to the header bar/area of the page.

I can't find any documentation on how to accomplish this, but it seems like it should be doable.

Has anyone tried it - successfully or otherwise? Does anyone know how to approach it?

As always, thanks for all input.

[ChoccieMuffin]

I want to add a bit of text to it, and I don't think it can currently be done, unfortunately. Well not by using the skin editor anyhow. I'm hoping there's some nifty javascript way to do it - fingers crossed!

Let's hope someone comes along and answers your query, I'll be watching intently. Meanwhile, please do add a feature request to allow other stuff to be added to that header area. (Link to feature request page in my signature.)

[NorthEast]

You can't do this using Flare's skin editor, so if you want to do this you'll need to use a manual hack using javascript.

For example, you could add the links to your master page:

Code: Select all

<div id="header-links">
   <a href="#">Link goes here</a>
</div>

Then insert a script in the master page to move your links. It'll move the div with ID #header-links inside header area, in this case into the logo container div.logo-wrapper.

Code: Select all

$(document).ready(function(){
   $("#header-links").appendTo("div.logo-wrapper");
});

[ChoccieMuffin]

@DaveLee, will the same thing work if I want to include a .png file in the header?

[NorthEast]

@DaveLee, will the same thing work if I want to include a .png file in the header?

It'll include whatever you put inside div#header-links.

[ChoccieMuffin]

@DaveLee, will the same thing work if I want to include a .png file in the header?

It'll include whatever you put inside div#header-links.

Cheers Dave, that'll be really useful as I want to use the same stylesheet and master pages for all my products but I want to add the name of the product or a product-specific logo to the header, beside our company logo. Now to see if I can add a variable to the stylesheet (I'm guessing no, but I'm willing to give it a try!)

[NorthEast]

@DaveLee, will the same thing work if I want to include a .png file in the header?

It'll include whatever you put inside div#header-links.

Cheers Dave, that'll be really useful as I want to use the same stylesheet and master pages for all my products but I want to add the name of the product or a product-specific logo to the header, beside our company logo. Now to see if I can add a variable to the stylesheet (I'm guessing no, but I'm willing to give it a try!)

You can't add variables to the stylesheet.

If you want to use variables, then you could (a) set the product name as a variable, and (b) set the logo filename as a variable.
For the logo, use something like <img src="Resources\Images\[%=MyVariables.MyLogo%]" />, where MyVariables.MyLogo would be the filename like Product1_Logo.png
It'll probably say "missing file" in the editor, but work in the preview/output.

Then you could set individual name and logo variables for each target.

[ArdisRamey]

You can't do this using Flare's skin editor, so if you want to do this you'll need to use a manual hack using javascript.

For example, you could add the links to your master page:

Code: Select all

<div id="header-links">
   <a href="#">Link goes here</a>
</div>

Then insert a script in the master page to move your links. It'll move the div with ID #header-links inside header area, in this case into the logo container div.logo-wrapper.

Code: Select all

$(document).ready(function(){
   $("#header-links").appendTo("div.logo-wrapper");
});

This is wonderfully helpful information, Dave Lee. Thank you.

In trying this, I'm not having success. I wonder if there's any in-depth information out there for how/where to add this information in the Master Page? I have searched, but could not find anything. However, if there's a step-by-step doc out there that describes how to add <div> information or scripts to the Master Page, then I can troubleshoot where I may be making errors.

Alternately, do you know why I might be able to add the clickable link either above or below the header bar, but unable to get it to show up WITHIN the header bar? To be clear, I'm trying to get it to appear in the same horizontal space as the logo and search bar.

[ChoccieMuffin]

Dave, until Flare allows text to be put in that header area as a variable, your solution is absolutely brilliant, thank you SO MUCH!!!

Going to give it a go tomorrow.

[NorthEast]

I wonder if there's any in-depth information out there for how/where to add this information in the Master Page?

1. Open the master page, go to Text Editor view, then copy and paste the HTML code for the div inside the body section.
2. Save the master page, go back to XML Editor view, select Insert > Script, then copy and paste the javascript code.

You should easily find info on scripts in the help - e.g.: https://help.madcapsoftware.com/flare20 ... Topics.htm

There is no step-by-step information for this sort of thing because Flare doesn't support adding stuff to the header. This is just a simple hack to do this.

[ArdisRamey]

Dave Lee, that is so helpful. Thank you for taking the time to enumerate these steps.

You're right - inserting the script with Insert > Script in the XML Editor, rather than copy/pasting it into the Text Editor is what did the trick.

[ArdisRamey]

Once this has been achieved (following Dave's method), how does one style the link in the header?

The link is crowding my logo and isn't vertically centered in the header area. On top of that, my terminal goal is to have a line of 3 clickable links justified to the right, so that my header will display:

|<logo> ........................ <link> <link> <link> <search bar>|

With the link inserted the way Dave's method makes possible, what is the right way to style it? I'm sure it's possible, I just don't know how/where.

[NorthEast]

Once this has been achieved (following Dave's method), how does one style the link in the header?

The link is crowding my logo and isn't vertically centered in the header area. On top of that, my terminal goal is to have a line of 3 clickable links justified to the right, so that my header will display:

|<logo> ........................ <link> <link> <link> <search bar>|

With the link inserted the way Dave's method makes possible, what is the right way to style it? I'm sure it's possible, I just don't know how/where.

Well, for this part you need to experiment yourself - we're hacking the skin, so there's no "right" way.

The container for the links (in my example) is div#header-links, so perhaps try adding some left padding to move it away from the logo, and top/bottom padding to centre it.

One tip - I'd strongly recommend learning how to use developer tools in your browser - if you press F12, you can add/edit CSS to test out how it looks. This is a lot quicker than editing CSS in Flare and rebuilding your target each time.

[ChoccieMuffin]

Also see this thread, which discusses similar stuff:

viewtopic.php?f=13&t=30342&view=unread#unread

[ArdisRamey]

Sorry - I see now where I wasn't clear.

I literally don't know where to put the styling. Does it go in <div id="header-links">? I'm confused regarding how to style the link position relative to the header area (I could make it bold or change its color no problemo). I don't understand how that HTML and the script work together to place the link in the header, so I don't know where to apply the styling to adjust its relative placement.

(HTML I'm comfortable playing with, but I don't know anything about the computer science behind how the JS script is doing its thing, making this a fascinating black box.)

[NorthEast]

Sorry - I see now where I wasn't clear.

I literally don't know where to put the styling. Does it go in <div id="header-links">? I'm confused regarding how to style the link position relative to the header area (I could make it bold or change its color no problemo). I don't understand how that HTML and the script work together to place the link in the header, so I don't know where to apply the styling to adjust its relative placement.

(HTML I'm comfortable playing with, but I don't know anything about the computer science behind how the JS script is doing its thing, making this a fascinating black box.)

The script selects the whole div by its ID #header-links, then moves it (using appendTo) inside div.logo-wrapper, which is the container for the logo in the header.

Press F12 and inspect the HTML for the header - you'll see the div#header-links there.

So CSS changes you make to div#header-links are relative to div.logo-wrapper. As I suggested, try adding padding to div#header-links.

[ArdisRamey]

I couldn't ask for a more thorough, actionable explanation.

Thanks, as always, Dave Lee!

[AJoy]

The script selects the whole div by its ID #header-links, then moves it (using appendTo) inside div.logo-wrapper, which is the container for the logo in the header.

Press F12 and inspect the HTML for the header - you'll see the div#header-links there.

So CSS changes you make to div#header-links are relative to div.logo-wrapper. As I suggested, try adding padding to div#header-links.

It is working well and good, except the links added are appearing as plain text, with no hyperlink. What I am doing wrong! Also, to make the clickable links available above the header, what is the change I should make in the script.
TIA

[NorthEast]

The script selects the whole div by its ID #header-links, then moves it (using appendTo) inside div.logo-wrapper, which is the container for the logo in the header.

Press F12 and inspect the HTML for the header - you'll see the div#header-links there.

So CSS changes you make to div#header-links are relative to div.logo-wrapper. As I suggested, try adding padding to div#header-links.

It is working well and good, except the links added are appearing as plain text, with no hyperlink. What I am doing wrong! Also, to make the clickable links available above the header, what is the change I should make in the script.
TIA

I just provided an example of a simple script that shows how you could add your own content in the header.

It's really up to you to investigate how to take that further, to style and position the content that you put in the header.

[ikumar]

The script selects the whole div by its ID #header-links, then moves it (using appendTo) inside div.logo-wrapper, which is the container for the logo in the header.

Press F12 and inspect the HTML for the header - you'll see the div#header-links there.

So CSS changes you make to div#header-links are relative to div.logo-wrapper. As I suggested, try adding padding to div#header-links.

It is working well and good, except the links added are appearing as plain text, with no hyperlink. What I am doing wrong! Also, to make the clickable links available above the header, what is the change I should make in the script.
TIA

Hi, was wondering if you were able to make the link work? I am able to make the links appear next to the logo on the header but it is not clickable.

[rogersm]

Hi, also wondering if you were able to make the links clickable?

[NorthEast]

The links are probably not clickable because the link for the logo is being displayed in front of them.

You can move the links in front by setting the z-index in your CSS (assuming links are in #header-links, as in the example):

Code: Select all

#header-links { z-index: 10; }

[rogersm]

Perfect, thank you very much.