HTML5 skin: insert variable for project-level customization?

[3lliot]

Has anyone come up with an easy way to modify skin appearance or content at a project level?

I have an HTML5 skin that is shared by multiple projects, and is imported from my 'master project' at build. However, I'd like to change the skin (either by way of an image, or text in the header) for each project, so I can include the project name in the skin header.

I don't want an independent skin for each project, because I have lots of projects & I don't want to maintain lots of skins. I'm thinking maybe I could include a variable in the skin header somehow - I don't mind hacking the skin to insert a bit of code, if it means I can display a variable in the output. I'm not sure how I would go about that though, or even if it would be able to pull a variable in from the target.

Any tips much appreciated.

cheese
-E

[NorthEast]

I modify the header for our projects, changing the header text and logo.

Try the following:

1. In the skin Toolbar tab, click Edit (on right) and enter this script:

Code: Select all

$(document).ready(function(){
	// add div for header text //
	$("#header>a").after('<div id="header-content"></div>');

	// add styles for header text //
	$("#header-content").css({
		"position": "absolute",
		"left": "150px",
		"top": "50%",
		"margin-top": "-15px",
		"height": "28px",
		"font-size": "24px",
		"color": "#ffffff"
	});

	// set logo to Content/Resources/Skin/Logo.png //
	$('h1.logo').css("background-image","url('Content/Resources/Skin/Logo.png')");
		
	// load new header from file Content/Resources/Skin/Skin.htm file into #header-content //
	$("#header-content").load("Content/Resources/Skin/Skin.htm #header-content > *");

});

2. Create a new topic file - Content/Resources/Skin/Skin.htm, and include this somewhere in the body.

Code: Select all

		<div id="header-content">
			<!-- start header content -->

			<div id="header-title">Enter product title</div>

            <!-- end header content -->
		</div>

3. To customise for each project:
- In skin.htm, edit the text "Enter product title" for each project.
- Place your logo image in Content/Resources/Skin/Logo.png for each project.

[3lliot]

Thanks for that - looks like it should work (obviously, if it works for you) but it isn't, I'm getting nothing at all.

Are there any other requirements for this to work? I've tried switching off the logo in skin > styles > logo, but that didn't help.

When the original skin logo was there, it (the original logo) wasn't appearing, so I guess there's maybe some interference between the new elements and the logo element.

What about the existing background image for the header, could that be interfering?

Also $("#header>a") looks a bit odd - what does this do? does that add the new div after the <a> tag?

When I view source for the compiled project, there is no new div after <header>.

cheers
-E

[NorthEast]

Are there any other requirements for this to work? I've tried switching off the logo in skin > styles > logo, but that didn't help.

You will need the logo, the script expects it to be there.

Apart from that, it just requires you create the two files in the correct locations, logo.png and skin.htm.

When the original skin logo was there, it (the original logo) wasn't appearing, so I guess there's maybe some interference between the new elements and the logo element.

If the original logo is disappearing, then I would guess the part of the script which changes the image URL is working.

Code: Select all

   // set logo to Content/Resources/Skin/Logo.png //
   $('h1.logo').css("background-image","url('Content/Resources/Skin/Logo.png')");

If nothing is displayed, have you created a logo image and placed it in Content/Resources/Skin/Logo.png ?

What about the existing background image for the header, could that be interfering?

No, but bear in mind the heading text is white (#ffffff), so change it if you're using a white background.

Also $("#header>a") looks a bit odd - what does this do? does that add the new div after the <a> tag?

It might look different as it is jQuery code, which is used by HTML5 help.

$("#header>a") selects the element; #header>a is standard CSS, which means select the first 'a' tag ('>a') inside the element with the ID of 'header' ('#header').

Then, .after() means add this HTML after the selected element (the 'a' tag).

When I view source for the compiled project, there is no new div after <header>.

You won't see it by opening the compiled HTML page in an editor or using the browser's 'view source' option; that is the HTML before the script has been run. You will only see the modified HTML if you use a tool that inspects the 'live' HTML in the browser, e.g. using the built-in Developer tools in Chrome or Firefox.

[3lliot]

You will need the logo, the script expects it to be there.

So I need to have a logo specified in the Styles tab of the skin editor? I would imagine I can use anything there because it will be overridden anyway by the code set in the Toolbar tab?

Whether I specify a logo there or not, it still doesn't work.

I have the correct files added to the child project, all the paths are correct, I'm using the default background so white text should show up fine.

Are there any target settings that could interfere with the code? I've tried switching off lower-case filenames, and switching off 'exclude content not directly linked...' - no luck.

[3lliot]

Bumping.

Does anyone else have a solution for this, or alternatively can anyone see why the solution above might not work?

apparently I'm not the only one it doesn't work for (although the strategy & code looks fine to me).

cheers
-E

[sivatar]

This worked for me after several attempts. A couple of tips:

If your target is set to Exclude All content not linked directly or indirectly from the target (Advanced tab), then the logo file and htm file that you added to your project's Content\Resources\Skins folder won't be copied to the output. If you need this setting, then you can add a line to your CSS that will copy these files to the output like this:

ins
{
background-image: url("../MasterPages/logo.png");
background-image: url('../MasterPages/HTML5_skin_banner_title.htm');
}

When viewing the output in Chrome locally, you won't see the title so test in another browser. The title will display in Chrome when the output is on a server (http address).

[3lliot]

Update if anyone else is having trouble getting this working.

1) The ins css in sivatar's comment below:
background-image: url("../skin/logo.png");
does pull the logo into your output if your output is set to 'exclude content not linked directly...' but it doesn't pull the skin.htm file in.

As suggested to me by sivatar, you can include a hidden href in your master page (I put mine in the footer) with the target set to skin.htm (remember the path - if your skin.htm is in the resources/skin folder, the href should be <a href="../Skin/skin.htm" style="visibility:hidden">skin.htm</a>. This means the skin.htm file IS linked directly so it won't be excluded by your skin settings.

2) The logo selected in the skin (skin editor > styles > logo) should be the same dimensions as the logo you're replacing it with (skin/logo.png), otherwise you'll get a partial logo appearing, or it'll be positioned weirdly. I used a transparent png.

[Erik]

Hello MadCap forum!

That method worked perfectly for me, thanks for that. I just had a quick follow-up question.

When I build and view my content locally, I can view my HTML5 content with the new custom header in Firefox but not Chrome or IE.

You won't see it by opening the compiled HTML page in an editor or using the browser's 'view source' option; that is the HTML before the script has been run. You will only see the modified HTML if you use a tool that inspects the 'live' HTML in the browser, e.g. using the built-in Developer tools in Chrome or Firefox.

I have attempted to inspect the elements in the browser using the built-in developer tools, as David Lee suggested, and can find evidence of the Logo.png in Chrome but I receive an error for the Logo.htm that reads:

"XMLhttpRequest cannot load . . . Received an invalid response. Origin 'null' is therefore not allowed access."

Is this just an issue in viewing the content locally as sivatar suggested (quoted below) or is this referring to another error? If the former, is there a way for me to verify/view the content without having to upload it?

When viewing the output in Chrome locally, you won't see the title so test in another browser. The title will display in Chrome when the output is on a server (http address).

Thanks!

[NorthEast]

I have attempted to inspect the elements in the browser using the built-in developer tools, as David Lee suggested, and can find evidence of the Logo.png in Chrome but I receive an error for the Logo.htm that reads:

"XMLhttpRequest cannot load . . . Received an invalid response. Origin 'null' is therefore not allowed access."

Is this just an issue in viewing the content locally as sivatar suggested (quoted below) or is this referring to another error? If the former, is there a way for me to verify/view the content without having to upload it?

Since the original post in 2013, the jQuery load function will no longer work in Chrome if the file is local - so this would need to be run from a server, where the load will work.

To test it on your own PC, you could just use a local server on your PC (e.g. using Windows IIS), it doesn't have to be a live webserver.

If the help itself needs to run on a local PC dive, not a server, then I don't know how to fix the load function problem; but you could just include the content that you want inside the initial after('...') function, rather than using load to get it from a separate htm file.

[Erik]

Hey Dave,

Thanks for your help. I'll look into using a local server on my PC. That should solve my problem.

Thanks!