• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Image in master page header

New Here ,
Oct 09, 2014 Oct 09, 2014

Copy link to clipboard

Copied

RoboHelp 11

I'm trying to use our company logo and another image (as background) that should repeat across the header. The logo should display on the left with the 'background' image tiled across the page. I'm assuming the logo should 'sit' on top.

I've looked at ww3 and found this example

Set a background-image for the <body> element:

body {
     background-image: url('paper.gif');
     background-color: #cccccc;
}

Also there's the background-repeat property. Based on the descriptions, it sounds like this is an approach that should work.

But I don't know how or where to use the information. Do I need to edit the master page header placeholder or the project CSS or both? Or is there a better/preferred way?

Views

2.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

Normally, you add this to the CSS of the page having this image. Depending on the output you're creating (WebHelp?), most of the time in the topic CSS.

With background repeat, use:

body {

     background-image: url(myimage.png);

     background-color: transparent; /* A colour and an image together may not play nice. Use transparent if you have a repeating image unless you really need a specific colour. */

     background-repeat: repeat-x; /* This setting only repeats horizontally. For repeating only vertically, set repeat-y. For repeating in both directions, use repeat. */

     background-position: left top; /* You can also give the numbers of pixels from the left and top to position the image. */

}

Kind regards

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

Thanks for the quick response. I’m still a little confused. I’m trying to do this in the header placeholder on the master page for the WebHelp project. I don’t understand the relationship (if any) between the master page (its elements) and the CSS. According to RoboHelp 11 help, I should be able to put an image in the master page header placeholder so that the image displays on every topic that is ‘associated’ with the master page. I also read the discussion regarding the change from templates to master pages. I thought I understood that master pages allow you to make a change on the master page and it is applied to all pages using that master page.

This is a very confusing issue to me.

Thanks, Mary

Mary Coffee

Lead Technical Writer

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

Hi Mary

Hopefully I can shed a bit of light.

Master Pages used to be called Topic Templates. Just different names for the same beast really.

So these are used in two completely different ways. It depends on what you want to influence. Existing content or New content?

For Existing content, you edit a Master Page and configure the Header and/or Footer areas to contain what you want. Then you select existing topics and associate the Master Page with them. Poof! All the topics now sport what you put in the Header or Footer. If you decide later to adjust some aspect of the Header and/or Footer, the changes are propagated across all topics using that Master Page.

For New content, you configure the Master Page Body area to have a specific arrangement. Perhaps you are creating pages for a catalog. You always want an image as the first item in the upper left corner and a description in the right. So maybe you insert a table there with a placeholder for the image and text advising to replace it with the actual description.

Then as you add pages by creating topics, you tell the topic to use the Master Page. When the topic is created, a copy of that body placeholder is copied into the topic. And from there you edit as needed. Subsequent changes to the Body placeholder of the Master Page will have no effect on topics created using that Master Page.

Hope that helps a bit... Rick

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

Rick,

This was a very helpful explanation. This is what I thought I understood about master pages but your last paragraph kind of ‘threw’ me.

Then as you add pages by creating topics, you tell the topic to use the Master Page. When the topic is created, a copy of that body placeholder is copied into the topic. And from there you edit as needed. Subsequent changes to the Body placeholder of the Master Page will have no effect on topics created using that Master Page.

Isn’t this why we use master pages? Make a change/update and have it applied everywhere the master page is used? I think this is why this is so confusing. Parts of the master page behave as you desire/expect but  the body content placeholder doesn’t.  Your parts catalog example made a great deal of sense—I hadn’t thought about body content being structured in such a way. But if I change the image for the catalog, I’ll need to do it in each existing topic and the change will only apply to new and subsequent topics??? Am I over thinking this?

Mary Coffee

Lead Technical Writer

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

Hmmm, well, see if this makes sense.

Imagine you have a piece of paper. You draw a form on it. You make a line for Name, one for Address, one for City, State, Zip and Phone. That form is exactly like the Master Page as far as the BODY area is concerned. When the paper form goes through the copier, it's identical to the original. But later, different names, addresses and such are added. Each copy is then different from the original.

Later, you decide you really should have added Email addresses. So you modify your source form. Just like you modify the BODY area of the Master Page. Now, any NEW copies of the form will have a spot for the Email address, but existing copies are untouched. Likewise, new topics created from the Master Page will sport the new info, but the existing topics remain as they were.

The bottom line here is that the ongoing relationship is ONLY maintained for the Header and Footer areas.

Cheers... Rick

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

To accomplish this via the RoboHelp UI:

From the Project Manager pod, find the CSS file. Depending on the view you have it configured for, you may find it inside a "folder" named Style Sheets, or it may simply be listed among your other files.

Right-click the file and choose Edit.

Now expand the "Other" category. Usually it's at or near the bottom of the list.

Now click Background + Text (BODY)

In the lower left corner of the dialog, click the button labeled Format, then choose Borders and Shading...

Now click the Shading tab.

In the Pattern area, click the spyglasses icon, then click the file browsing icon. Navigate to and choose the desired image.

Dismiss the dialogs until you are back to the Borders and Shading dialog.

Now you are able to configure the X and Y positions, control whether it repeats the image and whether the background is stationary or if it scrolls with the page.

Fun, eh?

As for the company logo, you are likely best to do that on the master page.

Cheers... Rick

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

Thanks--I’m going to try this and see if I can get it to work. I would not thought this would be part of Borders and Shading ☺

Mary Coffee

Lead Technical Writer

TeraMedica, Inc.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

Wow!! It worked—just need to adjust logo image position. The banner image flows/repeats across the top of the page as a banner should. But the logo image extends below instead of sitting exactly on top of the ‘banner’.  Any thoughts on where to make the adjustment?

Thanks, Mary

Mary Coffee

Lead Technical Writer

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

If it were me, I'd simply make the banner really wide. Then add the logo where you want so it is all a single image.

Perhaps Willam has some nifty CSS adjustment to accomplish what you want.

Cheers... Rick

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

I checked the image sizes; they are the same height. They should just sit on top of one another. I looked in help but couldn’t find a way to place the logo image at the top of the header placeholder. There’s space above the logo image but I can’t see how to remove it. Any thoughts??

Thanks, Mary

Mary Coffee

Lead Technical Writer

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 10, 2014 Oct 10, 2014

Copy link to clipboard

Copied

Sorry, but nothing other than what I already suggested.

At this point, if you wish to continue and use the logo separate from the banner, you are pretty much at the mercy of CSS.

As I said, hopefully Willam will pop in to advise what to try from the CSS perspective. Or, you could just use Google to search for how to remove image margins in CSS. I believe you will find there are a few different adjustments. And not all browsers will treat it the same way.

Cheers... Rick

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 29, 2015 Apr 29, 2015

Copy link to clipboard

Copied

I have a further question for Captiv8r‌ I want to do exactly what you provide code for to place an image on every page. However, I want the image to be an image map. Can I do that?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 29, 2015 Apr 29, 2015

Copy link to clipboard

Copied

or add an image map to a header or footer?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 29, 2015 Apr 29, 2015

Copy link to clipboard

Copied

Hi Carol

I'd have to try that out and test before claiming it will simply work. The problem would be that if you have topics in folders, the master page header or footer changes path. And that might impact image maps.

I'll try that here in a while when I catch my breath and let you know the results. (I've been outside mowing, so am a bit on the shaky and have to rest side)

Cheers... Rick

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 29, 2015 Apr 29, 2015

Copy link to clipboard

Copied

Carol, just so we are on the same page here, what version of RoboHelp please?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 29, 2015 Apr 29, 2015

Copy link to clipboard

Copied

Ahhh, well I think I found the answer and it's no. Sorry. I created a Master Page and configured a footer. Added an image to the footer. Image Map regions are not available for that image in the footer.

Now, that's not to say that you can't maybe make it work. I also tested by creating a Snippet with an image and image map in the snippet. While I wasn't successful in inserting the Snippet into the Master Page footer proper, I *WAS* able to utilize that "no man's land" area between the Body placeholder and the Footer. And that allowed me to populate it across topics. After I generated WebHelp, it seemed to work. And I tested by inserting links from the image via the image map to different topics in different folders.

Remember, keep your hands inside the vehicle at all times, no flash photography and use at your own risk! (Your mileage may also vary)

TriedAtHome.png

Cheers... Rick

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 21, 2016 Jan 21, 2016

Copy link to clipboard

Copied

Hey,

Sorry to reopen this can of worms but I am currently struggling with a similar problem.

The new template I need to incorporate into all our RoboHelp Projects (RH v 11) includes an image component in the header. I initially tried adding this into the master page and got mixed results. So the new approach I took was a combination of Text, HTML Line element and one small logo in the right hand side of the header. This seems to work just fine except for one major glitch: The logo image (a .gif file) appears only for topic files that are at the root level in the RoboHelp project. Any file that is moved to a sub-folder, which is the standard I follow given the large number of topic files, does not display the logo gif. The text and html line element that are part of the header appear just fine, both in the preview and the final output file. However, it is only the gif image of the header that goes missing. Move the files back to the main root folder of the project and things are all rosy again.

NOTE: The logo image in the header was added as per the same steps outlined in the thread above - Header Properties --> Shading --> Image selection. (Scrolling turned on, repeat turned off. X axis aligned to the right)

A work around for this was including the text and line in the master page header and adding the logo as part of the CSS file. This solved the problem of the logo not appearing for files in project sub-folders. However, this resulted in the logo appearing at the extreme right end of the page, which did not auto-align with the rest of the header elements. On some pages where we have large tables, the logo was cut out of view altogether (appearing on the extreme right-hand side) and seemed completely disjointed from the rest of the page header elements.

So my question here is this:

Is there a better way of doing this? And is this bit of header images disappearing from master pages in case the files are moved around in sub-folders expected behavior?

Our project structure replicates the TOC which makes it easier to locate and edit files in large projects. Ideally, I would like to maintain the same format. However, given these limitations, I might be forced to move out everything to the root folder.

Any ideas would be greatly appreciated.

Thanks!

Tanmay

Specialist - Technical Writing

FIS

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 25, 2016 Jan 25, 2016

Copy link to clipboard

Copied

The image path is relative to the file that holds the path. If you put in the CSS, it's relative to the CSS file so it will work for all topics. What positioning are you using? There is something in the CSS that is moving it to the right.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 27, 2016 Jan 27, 2016

Copy link to clipboard

Copied

Hi Willam,

I aligned it to the right in the CSS settings. That's what threw it off to the extreme end of the page. When using the same alignment in the Master Pages file, the logo adjusts very well.

Is there any other setting that can be applied in the css to align it properly?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 30, 2016 Jan 30, 2016

Copy link to clipboard

Copied

LATEST

For the background image, you can use the background-position property. (CSS background-position property)

You can also add the image as an image to the header and position it there manually.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 14, 2014 Oct 14, 2014

Copy link to clipboard

Copied

Hi,

The output is WebHelp. I’ve implemented the tip from Rick (CSS—Other—Borders +Body (text)..) and the image I want to repeat across the header is doing that but when I place the logo image in the header placeholder, it does not sit perfectly on top of the banner image. It is offset to the right and down. I tried to ‘edit’ the image by selecting it in the header placeholder. I set the margins all to 0. That made no difference. Then I did as Rick suggested by going to Google and searching for “how to remove image margins in CSS”. There were several answers—reset, remove padding and margins, etc.

But I’m new to CSS and don’t know how to apply the answer. I’m trying to make changes in the <>HTML view of the master page header place holder. Thinking now it should be the project CSS instead. I really don’t understand the relationship between what I see in <>HTML view and the project CSS.

Any help would be greatly appreciated.

Thanks, Mary

Mary Coffee

Lead Technical Writer

TeraMedica, Inc.

414.908.7716

Click here<http://www.teramedica.com/signup/rsna14> to make your RSNA 2014 appointment. Visit us Nov. 30th-Dec. 4th in booth 7530, McCormick Place North.

<facebook.com/teramedica> <https://twitter.com/TeraMedica> <http://www.linkedin.com/company/teramedica-healthcare-technology?goback=.cps_1287172148136_1> <http://www.youtube.com/1teramedica>

Confidentiality Notice: This communication, including any attachments, is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure, printing, saving, or distribution is prohibited. If you are not the intended recipient, please immediately contact the sender by reply e-mail and destroy all copies of the original message.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 16, 2014 Oct 16, 2014

Copy link to clipboard

Copied

For CSS

img { margin: 0 !important; }

That removes all margins from all images. If you have a specific image, you can do the following in HTML:

<img src="myimage.png" style="margin: 0 "/>

The thread is becoming a bit convulated so I'm not sure what your requirement is exactly. It started with a background image, so I'm unsure what you need at this point.

Kind regards,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp