HTML 5 skin customization - Nav column is huge!

[sdcinvan]

Hello all,

I am tweaking the HTML 5 skin and noticed that when changing to mobile dimensions (tablet and mobile), the nav column is huge, when activated.

Skin_HTML-adjustments.png

I was successful with reducing the font size but.. note the green boxes...
1) It appears that the icons are fixed in size; do I actually need to individually edit them or can I resize them in HTML or CSS?
2) The width of the nav column is too long! Can this be reduced, either with a fixed value or *ideally* dynamic, based on the longest text, in the nav menu?

Thank you

[heal]

Hi, did you try to resize the navigation pane in the skin file? Go to Setup > Pane Size as shown in the image below.

2014-06-02 14-39-44.png

[sdcinvan]

Hi, did you try to resize the navigation pane in the skin file? Go to Setup > Pane Size as shown in the image below.

Thanks for your response BUT...
- I didn't provide enough information.

The Navigation Pane, Pane Size only controls the width of the normal pane. It does not control the width of the responsive Tablet Medium and Mobile Medium. The Web Medium pane isn't a problem but when I reduce the size of the Web document, then this huge navigation pane kicks in.

Skin_HTML-adjustments_B.png

Thanks

[doc_guy]

I have clients I'm working with that are also quite frustrated by the size of the slide-out panel in tablet and phone mode.

I haven't yet found a way to modify the width of the slide-out panel in responsive mode. If somebody knows, I'd love to hear about it.

[sdcinvan]

I have clients I'm working with that are also quite frustrated by the size of the slide-out panel in tablet and phone mode.

I haven't yet found a way to modify the width of the slide-out panel in responsive mode. If somebody knows, I'd love to hear about it.

Ha...

Thank you for validating that it isn't just me. I submitted a support ticket but be patient, support has recently slowed down from a very quick 2 - 3 hours to over 12 hours per ticket; not certain what happened.

I'll share what I learn with this group.

[sdcinvan]

Wow! Someone at MadCap dropped the ball on this....

BAD NEWS.... from MadCap support:

Currently, adjusting the size for the responsive output navigation panel within Flare is not supported. However, I have forwarded a request to able to do this in the future to the product developers (#89300).
Please use the link below to submit any future feature suggestions. Your request will go directly to our Product Managers.
https://www.madcapsoftware.com/feedback ... quest.aspx

The icons will also need to be re-sized in an external program and re-inserted into the skin. When images are inserted into the skin, its current size will be used. The current work flow used is to resize the images as necessary and re-insert the icons into the appropriate location within the skin. Thanks.

[doc_guy]

Bummer. I'm going to see if I can't find a way to do this post-build by editing the resulting Default.htm file that Flare generates. It's a pain to do the change after every build, but the Default.htm file content doesn't change from build-to-build, so you can easily replace the whole file every time you build output with a modified Default.htm file.

In there, you should be able to override the CSS (if it is CSS) that is setting the width of the window. If it is set by script, that would be more problematic. But I'll try it and let you know what I discover. You could also probably do some coding there that would tell the CSS to resize the images under specific conditions, like tablet or phone mode, but that is kind of tricky too. I'm not sure what settings you would need to use to make that work reliably.

[NorthEast]

To adjust the responsive navigation panel width, you could use my standard technique for skin CSS modifications.
(There's rarely any need to change Default.htm - changes to the CSS or topic structure can almost always be achieved using a toolbar script.)

1) Add a stylesheet link to the skin, using the skin toolbar script.

On the skin's Toolbar tab, click Edit (on the right) to enter the custom Toolbar script:

Code: Select all

$('<link>')
  .appendTo($('head'))
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', 'Content/Resources/Stylesheets/skin.css');

Then create the stylesheet skin.css, and include the styles to modify the skin (see 2 below).
(Note the CSS file could be anywhere inside the Content folder, just make sure the path in the code above is correct.)


2) Set up the stylesheet for the skin modifications.

Adjust these CSS properties to 25% (for 25% width, instead of 50%).

Code: Select all

.hide-extras.active #navigation[role="complementary"]
{
	width: 25%;
}

.active #contentBody[role="main"]
{
	margin-right: -25%;
}

The changes I've noticed are that:
* When in responsive mode, (div)#navigation has role="complementary" added.
* When the responsive menu is displayed, body has a class of active added. (The hide-extras and active classes above are referring to the body tag.)

As far as I can tell, the CSS follows those changes in attributes.

[doc_guy]

Brilliant solution. I love it! I can't wait to try it.

[sdcinvan]

Absolutely brilliant Dave!

Tested and works very well!

I just made a small change to the width and margin values. I found that...
width: 35%;
margin-right: -35%;

worked better for my requirements.

Thanks again!

[sdcinvan]

Does anyone know if there is a way to change the size of the icons from the .css?

I believe the class is "tabs-nav-icon" and I tried a few things like "max-width: 10%;" but was unsuccessful in changing the size when the nav bar is in mobile mode.

[doc_guy]

David,

Any suggestion on how I force Flare to include the new style sheet in the project when it builds? Currently it's being excluded by the setting in the target that excludes files not linked directly or indirectly from the target. The help system I'm working with has 10,000 pages of content (if you printed it all out) and 50 different targets. It is not feasible to include all files in the project with all output types. Maybe I call the CSS page from a topic, so it is "included" indirectly?

Any other brilliant suggestions?

[doc_guy]

Never mind. I added it to the regular CSS as an @import rule. That works for me, and then Flare grabs it and includes it with the output.

Here is the code I used, if it is useful for somebody else:

Code: Select all

@import url('style.css');

In the code sample above, replace style.css with the name of your style sheet. Check to make sure the single quotes are in the statement, or it won't work.

[doc_guy]

David, when we meet someday, I owe you a drink. Please collect. That is the awesomest thing I've learned in a good long time. Thank you. A million times over.

[doc_guy]

One final note documented here for the sake of posterity:

David's JavaScript code that you add to the skin uses capital letters for the folder names that lead to the stylesheet folder.

There is a checkbox on the Advanced tab in the Flare target that allows you to "use lowercase file names." If this is checked, your javascript won't work if your server uses case-sensitive file names (like mine does). If this happens to you, you can do either (1) uncheck the box in the Advanced tab, but do this with caution, because if your help system is already published, it may cause incoming links to break; or (2) go into the JavaScript Dave provided and use lowercase names (simpler, and it won't affect existing links to your content). I went with option 2.

Cheers!

[NorthEast]

There is a checkbox on the Advanced tab in the Flare target that allows you to "use lowercase file names." If this is checked, your javascript won't work if your server uses case-sensitive file names (like mine does).

Yep, the implementation I use actually has this code duplicated with both upper and lower case variations, to make it foolproof.
That setting is a pain if you do any scripting that involves file/path names!

David, when we meet someday, I owe you a drink. Please collect. That is the awesomest thing I've learned in a good long time. Thank you. A million times over.

Cheers!

I'm currently doing some work in responsive layouts - so it's good timing that a few others are too.

For troubleshooting the CSS, I'd really recommend something like Firebug for Firefox; it makes it easy to see what CSS is used, and how it changes.

The skin toolbar script technique can be used to make a lot of skin modifications; such as adding your own CSS like above, or adding/manipulating content (example http://forums.madcapsoftware.com/viewto ... 878#p99068). For manipulating the skin structure, It's worth spending an hour or two learning the basics of jQuery, it's easy to pick up and makes life very easy.

[NorthEast]

Absolutely brilliant Dave!

Tested and works very well!

I just made a small change to the width and margin values. I found that...
width: 35%;
margin-right: -35%;

worked better for my requirements.

Thanks again! :D

Yep, 25% is just as an example so you can see a change.

However, I would check your settings on a number of devices.
I find the default 50% is actually a good size when you're viewing the help on a smartphone, it only looks big on a PC screen. It may be worth trying setting the sizes in px rather than %.

I'm setting the skin desktop/tablet breakpoint to about 850px-900px, so PC users won't usually see the responsive layout.

[sdcinvan]

Never mind. I added it to the regular CSS as an @import rule. That works for me, and then Flare grabs it and includes it with the output.

Here is the code I used, if it is useful for somebody else:

Code: Select all

@import url('style.css');

In the code sample above, replace style.css with the name of your style sheet. Check to make sure the single quotes are in the statement, or it won't work.

Thanks for the reminder Paul to add 'import url' to my stylesheet. I don't need that now but this will be a useful modification for future documentation.

[sdcinvan]

David, when we meet someday, I owe you a drink. Please collect. That is the awesomest thing I've learned in a good long time. Thank you. A million times over.

I also owe a debt of gratitude to Dave and you too, Paul.... and Nita and Rob and Tom and Lisa and Todd and Marjorie and... aw drats, the more I add, the more I'll feel bad forgetting another significant contributor (there are many more). Anyhow, my gratitude is also redeemable for drinks or cake or whatever.

In the meantime, I get back to paying in forward in a few weeks (when I release this document).

[sdcinvan]

Does anyone know if there is a way to change the size of the icons from the .css?

I believe the class is "tabs-nav-icon" and I tried a few things like "max-width: 10%;" but was unsuccessful in changing the size when the nav bar is in mobile mode.

My question may have become lost in the activity of this thread. Any thoughts on automatically resizing the icons when responsively changing to Tablet/Mobile modes?

Thank you

[doc_guy]

what about setting a specific width, rather than a max-width? Most everything else in that section uses specific pixels, I believe, so that might be an option.

Or a specific height. Whichever. Probably a specific height, in case there are slight variations in the size of you icons in terms of width (open books vs. topics)

[sdcinvan]

what about setting a specific width, rather than a max-width? Most everything else in that section uses specific pixels, I believe, so that might be an option.

Or a specific height. Whichever. Probably a specific height, in case there are slight variations in the size of you icons in terms of width (open books vs. topics)

Hello Paul,

Yes, perhaps my "max-width" suggestion wasn't the best!

Specific dimensions would be perfectly suitable but the problem is, I can't find a way to adjust the icon sizes for when it is in mobile mode.

[Dee Vincent-Day]

To adjust the responsive navigation panel width....

I just love this solution. Thank you!

Worked first time even after my tweaks!

Previous tech author used to go in manually after each build and edit directly. I am attempting to eliminate the need to do any manual editing to the output. We are trying to achieve straight through pipeline from Flare to our live servers with nothing more than an authorise step in the middle. This method eliminates some of the manual editing.

Thank you Thank you Thank you

I owe you a drink

Dee