Webhelp skin customization

Hi,
I've been trying to get some good information on how to customize skins for WebHelp in RoboHelp HTML 8, but I haven't been very successfull. I get the basics you see in the Skin editor, but my bosses would like to customize the look so it better matches our software. I have two main issues:
Is there a way for me to display the company logo on the left side inthe header, rather than in the About Box on the right side?I was thinking I could just add it as another button, but you can't seem to customize the order of the buttons, thus I can't get it on the left.
Is there a way for me to move the main navigation over?Rather than having it all line up on the left, I'd like it to be more centered, since I'll be making custom tab images to mimic tabs.
Any information, resources, etc. you can offer would be a big help. I know from reading the forums that several users have done some extensive customization, I'd love to know how.
Thanks!

Hi there
You might begin by downloading the Skinny on Skins file.
Click here to visit the site
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

Similar Messages

Looking for a specific webhelp skin

I noticed a webhelp skin that I would like to use for my robohelp project's output, but I can't seem to find it in the options provided in the following adobe page:
http://www.adobe.com/cfusion/exchange/index.cfm?s=5&from=1&o=desc&cat=316&scat=317&l=-1&ev ent=productHome&exc=11
I captured a pic of the skin I am looking for and it is attached to this post. I am hoping someone can take a quick look and identify the name of the skin template for me.
Any help is greatly appreciated.
Thanx,
Bill

Hi all
For anyone interessted I've put together a CHM file so one may easily see each Skin appearance before having to download it to see what it looks like.
They used to have the images up there for you to see. Not sure why they aren't there any longer.
I'll be happy to provide the CHM if you wish. Just shoot me a private message to rstone75 (at) kc (dot) rr (dot) com. I'll send you a download link.
Cheers... Rick
Begin learning RoboHelp HTML 7 within the day - $24.95!
Click here for Adobe Authorized Captivate and RoboHelp HTML Training
Click here for the SorcerStone Blog
Click here for RoboHelp and Captivate eBooks

Skin Customization in Oracle Identity Manager 11g Release 2 (11.1.2)

I was recently tasked with branding an OIM instance to match pretty stringent branding standards. To accomplish this task, I extended the fusion theme which is provided out of the box into a new custom skin. In the example below, I took the design as far as I could, which required decently advanced css knowledge; however, even a novice web designer could easily make simple updates to the backgrounds and fonts which would also greatly enhance the user experience.
Utilizing FireBug for Firefox, I inspected elements of the OIM interface to see which div's I needed to modify in the css file. You can edit as little or as many elements as you'd like in your custom skin; however, I'd recommend preserving the primary elements original placements to avoid confusion for users that are already used to an out of the box version of OIM.
This is the Oracle doc I used when creating the custom skin: http://docs.oracle.com/cd/E27559_01/dev.1112/e27150/uicust.htm#BABJIJIA
Notes regarding the Oracle tutorial mentioned above:
Be sure and remove the temp directory, shut down your OIM server, upload your files, then restart your OIM server with each css modification.
30.3.1 - Configuring Skins: 1. After you create the skin in the trinidad-skins.xml file, make a copy of the trinidad-skins.xml from the /iam-consoles-faces.war/WEB-INF/ directory to the
oracle.iam.console.identity.sysadmin.ear/WEB-INF/ directory AND the
oracle.iam.console.identity.self-service.ear/WEB-INF directory.
(The doc references admin.ear: the fully qualified name of the ear is: oracle.iam.console.identity.sysadmin.ear)
30.3.1 - Configuring Skins: Make all of your changes in the /oracle.iam.console.identity.sysadmin.ear/WEB-INF/trinidad-skins.xml file, /oracle.iam.console.identity.self-service.ear/WEB-INF/trinidad-skins.xml file, and the /iam-consoles-faces.war/WEB-INF/trinidad-skins.xml file.
(The doc doesn't mention making your css edits in the oracle.iam.console.identity.self-service.ear directory which is required)
Here is a link to my blog post with screenshots: http://www.idmworks.com/blog/entry/skin-customization-in-oracle-identity-manager-11g-release-2-11-1-2

I was recently tasked with branding an OIM instance to match pretty stringent branding standards. To accomplish this task, I extended the fusion theme which is provided out of the box into a new custom skin. In the example below, I took the design as far as I could, which required decently advanced css knowledge; however, even a novice web designer could easily make simple updates to the backgrounds and fonts which would also greatly enhance the user experience.
Utilizing FireBug for Firefox, I inspected elements of the OIM interface to see which div's I needed to modify in the css file. You can edit as little or as many elements as you'd like in your custom skin; however, I'd recommend preserving the primary elements original placements to avoid confusion for users that are already used to an out of the box version of OIM.
This is the Oracle doc I used when creating the custom skin: http://docs.oracle.com/cd/E27559_01/dev.1112/e27150/uicust.htm#BABJIJIA
Notes regarding the Oracle tutorial mentioned above:
Be sure and remove the temp directory, shut down your OIM server, upload your files, then restart your OIM server with each css modification.
30.3.1 - Configuring Skins: 1. After you create the skin in the trinidad-skins.xml file, make a copy of the trinidad-skins.xml from the /iam-consoles-faces.war/WEB-INF/ directory to the
oracle.iam.console.identity.sysadmin.ear/WEB-INF/ directory AND the
oracle.iam.console.identity.self-service.ear/WEB-INF directory.
(The doc references admin.ear: the fully qualified name of the ear is: oracle.iam.console.identity.sysadmin.ear)
30.3.1 - Configuring Skins: Make all of your changes in the /oracle.iam.console.identity.sysadmin.ear/WEB-INF/trinidad-skins.xml file, /oracle.iam.console.identity.self-service.ear/WEB-INF/trinidad-skins.xml file, and the /iam-consoles-faces.war/WEB-INF/trinidad-skins.xml file.
(The doc doesn't mention making your css edits in the oracle.iam.console.identity.self-service.ear directory which is required)
Here is a link to my blog post with screenshots: http://www.idmworks.com/blog/entry/skin-customization-in-oracle-identity-manager-11g-release-2-11-1-2

Edit WebHelp Skin Buttons?

On the Toolbar tab in the WebHelp Skin Editor, can the
default buttons (Contents, Index, etc.) in The Main and Nav Bar
lists be rearranged or deleted? When I select one of these buttons,
the delete button ( - minus button) is disabled. And there seems to
be no way to reorder them.

Hi dchell and welcome to our community
When you generate WebHelp in the following manner:
Locate the Single Source Layouts area and double-click the
WebHelp layout
You have options in the ensuing dialogs that allow you to
choose whether the TOC/Index/Search/Glossary buttons appear and in
which order.
Cheers... Rick

Refernce to external image in WebHelp skin

Hi,
Using RH 8.0.2.208. Need to add a reference to an external .gif file in WebHelp skin such that a logo image, in top right of help viewer, can be changed post generation and deployment (across multiple, merged projects).
Any help greatly appreciated!
Regards,
Graham.

Hi,
Is it in CRM2007 or CRM7.0
CRM7.0 provides transaction CRMC_SKIN_WB where you can select the skin, upload images and adjust stylesheet.
If it's the logo to be changed, goto stylesheet thtmlb_stand.css and find the appropriate stylesheet entity
Logo is located in styling/lshape/logo.png
In CRM2007 it's slightly different tool to handle the skins.

Custom RH9 WebHelp skin: Problem opening PDF file from custom button

Hi, I've been troubleshooting and checking forums trying to figure out how to get a PDF file to open from a custom button on my WebHelp skin. It worked for me once upon a time, but I changed something in the document and tried to upload the new version and it has errored out ever since.
I want to have the ability to open the PDF in a new window from the custom button (called 'Printable PDF' on my skin), so I am using the following custom JavaScript in the 'Click On' field of the the custom button's components: window.open('print_test.pdf','printWindow','menubar=0,resizable=0,width=900,height=500,scr ollbars=1'); I know the script is good because I have the same script for the Support custom button and it works great. The only difference between those scripts is the Support script calls an .html file instead of a PDF and the window names says 'supportWindow' instead of 'printWindow'.
I've tried deleting and recreating the custom button, changing the JavaScript with a developer's help, generating the help on another machine thinking it was a glitch with my browser (using IE8) or RoboHelp license, and combing the help files numerous times. I've also ensured that the PDF file is stored in the skin and project folders along with the other project files/folders. I've used previous versions of RoboHelp and had no problems attaching a Word document and PDF, so I'm wondering if this is a bug in RH9?? Especially since it worked for me initially. Any assistance and/or fresh ideas are welcomed! Thank you!

Hello again
Happy I was able to help.
MOTW is only present and affects things when you are running content off your local C drive. It's value is in preventing that Yellow Information Bar and all that from appearing when you are using IE. Once you publish content to a server and access it that way you are in a different security zone and MOTW has no influence either way. So there would be no adantage to enabling it before publishing to a server. The only reason you might want to consider enabling it would be if you were copying the WebHelp to everyone's hard drive and having them run it from their hard drives.
Make sense?
Hope so... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7, 8 or 9 within the day!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

Adobe Air Skin Customization ...

Hello all,
I am after some advice and am hoping, the fine people here can help me, I am struggling to find an answer! Essentially, I am looking to customize the standard skins of the Adobe Air ouput generated by RoboHelp 8. Similar threads didn't come up with any definitive answers, these can be found here and here.
Is it possible?
Thanks in advance for your help, it's most appreciated.
Regards,
Alex.

Hi Peter,
Thanks for moving the thread and for your reply.
I fully expected developer involvement (I have one lined up) but I couldn't find any clear guidance on how a developer goes about this?!? The developers in question have experience with Adobe Air applications in general but not with those applications created in RoboHelp 8. Could the RoboHelp 8 output be imported into Flex for example?
Thanks again for your help,
Regards,
Alex.

Adding option to "Add to favourite" to my webhelp skin

Hi,
I have a webhelp project to which I want to have a button in
the skin that can enable me to add the current page to the
favourite list..
I have found numerous options on the internet that provide
options to add intenet pages to the list.
However, the WebHelp I am generating is to be delivered on
the local system and none of the above metnioned options provide
the requried solution....
Is there any solution for this issue???

I would suggest storing your user's favorites in cookies.
The size of each cookie is limited (about 4 K) depending on
the browser, but you are allowed up to 20 of them. You could store
a lot of URLs using several cookies. Internet cookies can be
fragile (too many, and they start getting deleted), and have a
'shelf life' of three years (unless updated).
Happy baking!

Custom Buttons in WebHelp Skin

Hi all,
I am trying to add a button to my WebHelp version of my
project to enable readers to print the current topic. In my skin
editor, I managed to add a custom button, Print, with an image
entered window.print() in the JavaScript onClick field that is
provided (this is a standard JS call that prints the window). After
updating the view in the Skin Editor, the button is displayed, but
after re-generating the WebHelp layout, I can't see my new button.
I thought maybe the Advanced tab's Dependancies list might have
something to do with it, but I am not sure what it is for exactly.
Is there a trick to adding custom buttons to skins to get them to
display in the generated format?
Thanks in advance for your thoughts,
darkagn

Hi Captiv8r and thankyou for the super-fast response :)
Your reply allowed me to add the custom button to my skin.
However, the window.print() function only prints the area
with the buttons, not the topic itself. So I thought I'd re-post
and explain how I actually solved the problem of printing topics in
WebHelp in case anyone else needed the same info.
I ended up adding a button to the template that all of my
topics are derived from, in the footer so that the button remained
below the topic itself. I had to add the button in the HTML editor
with the following code:
<form style="text-align: right; padding-right: 10px;">
<input id=printbutton type=button onClick="window.print()"
value="Print Topic" style="width: 90px;">
</form>
Now, because the Print button appears in the same area of the
screen as the topic itself, the call to window.print() prints
everything in that frame (which unfortunately includes the button
itself, but this is a small price to pay to be able to print topics
from WebHelp).
Anyway, I hope this solution helps someone out
there...

Skin Customization not working in OBIEE 11.1.1.5.0

Hi,
I followed the Oracle white paper (http://www.oracle.com/technetwork/middleware/bi/customizing-oracle-biee-11g-176387.pdf) & defined the custom skin and stylesheet in analyticsRes folder. I also defined the CustomerResourcePhysicalPath,DefaultSkin and DefaultStyle tag in instanceconfig.xml.
When I restart the services, it works fine and I am able to see the custom skin. When I do a "view page source", I can see that it's referring to analyticsRes folder. But after couple of hours it again reverts back to original skin (sk_blafp). When I restart the services then it works fine. But it again reverts back to original after couple of hours.
I am not sure if I am missing something.
Thanks,
Satya
Edited by: Satya on Mar 22, 2012 8:46 AM

Are you in a single environment or a clustered one. If you are on a clustered environment, the folder needs to be setup on both servers.

Custom WebHelp skin

I want to disappear the SearchInput Textbox and add My LOGO on the right of the toolbar in RoboHelp HTML 8.0.
But do not find a way to solve it, any suggestions?

Hi there
For inserting your own logo, click View > Pods > Project Set-up and edit the skin. You are interested in the About item.
After you add the logo, you turn the Search Input field off and on by editing the Single Source Layout properties.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

ADF Skin customization

how to override ADF SKin components? what are alll best practices ? Can you please suggest how to control look and feel completely ?

Hi.
This link may fit with your requirement(can override ADF SKin components)
See: http://technology.amis.nl/blog/5722/using-adf-faces-11g-skinning-for-setting-the-styles-of-specific-component-instances-or-groups-of-instances

Need help with WebHelp skins - top nav button padding

RH8 HTML
hi all
I'm working on a csutom skin for a client, and I'm running into a couple prioblems.
The top nav area, Contents, Index etc etc has been made but between the buttons I get spacing. All around them infact, above, below and between. The main issue is the spacing between the buttons, its causing me problem because the buttons when all joined have a banner of text reading across them, with this spacing it of course looks broken and seperated.. Im sure I've taken it out before, but I cant seem to do it.
Any help greatly appreciated!!!
~Nick

Hi,
There are two approaches. You'll have to check which one works for you:
1. position the buttons only
2. position the entire table with the buttons.
1. If you only position the buttons, you’ll leave the rest of the rendering intact. Open whtbar.js and go to line 278, the function getImage. On line 290 there’s a line sI+=”border=0 align=\”absmiddle\”>”;. Replace this line with:
      sI+=" border=0 align=\"absmiddle\" ";
      if(gbIE == false)//Not Internet Explorer
            sI+="style=\"position: relative; top: -1px; ";
      sI+=">";
Replace the value -1px until it renders correct.
2. The second option is to completely move the table. In whtbar.js, go to line 148, the function writeStyle. On line 247, replace sStyle+="margin:2px;}\n"; with:
sStyle+="margin:2px;";
      if(gbIE == false)//Not Internet Explorer
            sStyle+="position: relative; top: -1px;";
      sStyle+="}\n";
Two notes:
·         Both modifications target all browsers other than Internet Explorer. To target specific browsers, check the variables you can use in whver.js.
·         Changing either one of these functions will also change the minibar! So double check for the desired result! Hope this helps.
Greet,
Willam
This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

Open link (PDF) in new window from WebHelp custom skin button

This question relates to my work with FM>RH integration. But the task I'm trying to accomplish is something specifically done in RH with customization of WebHelp skins, so I'm posting in this forum. I'm running RH9 on Windows XP Pro.
We have recently replaced WebWorks with RH and finally have the mapping files set up to generate Help from our FM source files. Celebration was short, because then we realized that our users wanted a PDF option. We haven't done any mapping to create PDFs from RH, and that seems kind of silly anyway, since we have superior PDF generation from the FM files.
So I set about making a custom button in the header of a WebHelp skin that will link to a PDF. I accomplshed that work, but its behavior falls short of the functionality I'd like to see. Currently, you click on the button and it opens the PDF in the browser window of the Help system. I want it to open in a new window, so I can keep the experience clean for the users, separating Help and PDF. I don't know if this is possible.
Here is where I am at. To create button I navigated to:
Project Set-up/Skins/NEW SKIN/WebHelp Skin Editor/ Main/NEW BUTTON
When I choose the edit icon to customize the new button, there is an option to choose Link or JavaScript. I got the PDF to open inside the Help browser by just using the Link option and specifying the PDF. I have tried to use the JavaScript option without success. My JS may be wrong, but when I choose inline JS option and place anything there, it turns all the navigation buttons to gobbledy ****. Specifying an external JS file doesn't work at all.
Any direction or help would be appreciated.
Thanks,
Douglas

I see one other shortcoming with this solution now that I've implemented it. Our Help follows the applictions through a convoluted path of development servers, amongst other strangeness with the way we deploy Help and PDF documentation. My concern is referencing a single URL/file on a server. Since we're moving things around, that doesn't really work well, we want the PDF to be with the Help system, if possible. Is there a way to reference the PDF as a relative link in the baggage files, so it will pull it from whatever server the Help system resides on without having to make changes?
UPDATE:
It seems if you place the PDF in the WebHelp folder and reference it as the JavaScript, the Help system automatically reats it as root folder and find it there. So, I think this is the solution to my question? However, this is a bit annoying, as it means you have to remember to manually place the file in the compiled Help system. I had earlier experimented with placing the PDF as a baggage file, but those don't seem to carry over when you compile Help. Is there any way to put the PDF in the Baggage Files and designate that it be included in compiled Help?

How can I customize the skin of my AIR app

Hi all,
I have created an AIR app from my RoboHelp v7 WebHelp.
Works and looks quite nice. Great. It's just that it did not use the WebHelp skin I created. It uses some default skin.
How can I customize the skin of my AIR app? When I run the RH Packager for Adobe AIR, I get a dlg box come up, called, "General Options - RoboHelp Packager for Adobe AIR" and it offers me a few default skins, but it does not offer me the skin I made for my WebHelp.
I also heard that if you learn FLEX you might be able to change the skins.
TIA
avi

Heya,
In order to change it alle just set it up as ordinary html webpage so heres and example of css:
style.css - In the main directory of your app.
body {
     margin:0;
     padding:0;
#wrap {
     margin:0;
     padding:0;
     text-aling:left;
#header {
     padding:2px;
     background:#000;
     color:#fff;
#content {
     padding:1em;
     margin:0;
     background:#ccc;
#footer {
     padding:2px;
     background:#000;
     color:#fff;
Now for the html file:
<html>
     <head>
          <title>My App</title>
          <link href="style.css" rel="stylesheet" media="screen" />
          // Scripts go here
     </head>
     <body>
          <div id="wrap">
               <div id="header">
                    My Application title
               </div>
               <div id="content">
                    bla bla bla lorem lipsum.
               </div>
               <div id="footer">
                    Copyright'n stuff
               </div>
          </div>
     </body>
</html>
If you need more help or examples I recomend that you go here and read some stuff on a lot of it all , you can also download theese samples it contains a lot of good stuff which makes it all A LOT easier to understand, the way I learnt most of what I know even though I am still missing some things.
Hope it helped!
Best Regards
Buch

Webhelp skin customization

Similar Messages

Maybe you are looking for