Adding clickable links to Header area (solved!)

This forum is for all Flare issues related to styles, stylesheets and XML.

Adding clickable links to Header area (solved!)

Postby ArdisRamey on Wed Oct 03, 2018 10:19 am

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.
You do not have the required permissions to view the files attached to this post.
Last edited by ArdisRamey on Fri Oct 12, 2018 11:05 am, edited 1 time in total.
ArdisRamey
Propeller Head
 
Posts: 32
Joined: Wed Sep 05, 2018 9:04 am

Re: Adding clickable links to Header area

Postby ChoccieMuffin on Wed Oct 03, 2018 10:23 am

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.)
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: 1797
Joined: Wed Apr 14, 2010 8:01 am

Re: Adding clickable links to Header area

Postby Dave Lee on Wed Oct 03, 2018 11:51 pm

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");
});
Dave Lee
Master Propellus Maximus
 
Posts: 5306
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Adding clickable links to Header area

Postby ChoccieMuffin on Thu Oct 04, 2018 2:19 am

@DaveLee, will the same thing work if I want to include a .png file in the header?
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: 1797
Joined: Wed Apr 14, 2010 8:01 am

Re: Adding clickable links to Header area

Postby Dave Lee on Thu Oct 04, 2018 2:26 am

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

Re: Adding clickable links to Header area

Postby ChoccieMuffin on Thu Oct 04, 2018 3:00 am

Dave Lee wrote:
ChoccieMuffin wrote:@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!)
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: 1797
Joined: Wed Apr 14, 2010 8:01 am

Re: Adding clickable links to Header area

Postby Dave Lee on Thu Oct 04, 2018 3:39 am

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

Re: Adding clickable links to Header area

Postby ArdisRamey on Thu Oct 04, 2018 9:02 am

Dave Lee wrote: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.
ArdisRamey
Propeller Head
 
Posts: 32
Joined: Wed Sep 05, 2018 9:04 am

Re: Adding clickable links to Header area

Postby ChoccieMuffin on Thu Oct 04, 2018 10:14 am

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.
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: 1797
Joined: Wed Apr 14, 2010 8:01 am

Re: Adding clickable links to Header area

Postby Dave Lee on Thu Oct 04, 2018 11:31 pm

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

Re: Adding clickable links to Header area

Postby ArdisRamey on Fri Oct 05, 2018 9:24 am

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
Propeller Head
 
Posts: 32
Joined: Wed Sep 05, 2018 9:04 am

Re: Adding clickable links to Header area

Postby ArdisRamey on Wed Oct 10, 2018 7:47 am

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.
ArdisRamey
Propeller Head
 
Posts: 32
Joined: Wed Sep 05, 2018 9:04 am

Re: Adding clickable links to Header area

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

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

Re: Adding clickable links to Header area

Postby ChoccieMuffin on Thu Oct 11, 2018 3:01 am

Also see this thread, which discusses similar stuff:

viewtopic.php?f=13&t=30342&view=unread#unread
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: 1797
Joined: Wed Apr 14, 2010 8:01 am

Re: Adding clickable links to Header area

Postby ArdisRamey on Thu Oct 11, 2018 1:07 pm

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.)
ArdisRamey
Propeller Head
 
Posts: 32
Joined: Wed Sep 05, 2018 9:04 am

Re: Adding clickable links to Header area

Postby Dave Lee on Thu Oct 11, 2018 11:28 pm

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

Re: Adding clickable links to Header area

Postby ArdisRamey on Fri Oct 12, 2018 11:04 am

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

Thanks, as always, Dave Lee!
ArdisRamey
Propeller Head
 
Posts: 32
Joined: Wed Sep 05, 2018 9:04 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 2 guests