Add Image to Text in HeaderBox of eWriter skin

This forum is for discussions on the Help & Manual Premium Pack and the Premium Pack Toolbox configuration utility introduced with Premium Pack 3

Moderators: Alexander Halser, Tim Green

Post Reply
User avatar
Sheri Steeves
Posts: 130
Joined: Tue Aug 05, 2008 5:06 pm
Location: Ottawa, Ontario,CANADA
Contact:

Add Image to Text in HeaderBox of eWriter skin

Unread post by Sheri Steeves » Wed Jul 29, 2020 9:01 pm

Is there a way to add an image next to the %TITLE% text in the HEADERBOX.HTML?

Looking for our logo in the left corner and a product image next to the title text. I've been able to update to our logo, and hack in an image next to the text but the image is not vertically centered with the the h1 text.

My HEADERBOX.HTML

Code: Select all

<IF_VAR[OPT_NOHEADERLOGO=false]><a id="headerlogo" href="<%HEADERLOGO_URL%>" title="<%HEADERLOGO_TITLE%>" target="_blank"></a></IF_VAR[OPT_NOHEADERLOGO=false]>
<div id="headerwrapper"><h1 class="page_header" id="hm_pageheader"><img class="page_header" src="/images/<%TITLE_LOGO%>"/>&nbsp;<%TITLE%></h1></div>


And I added a img style to the css (desktop section only for now to see if I can even get it working):

Code: Select all

h1.page_header {
	padding: 5px 10px; margin: 0;
	font-size: 1.8rem;
	font-weight: bold;
	position: relative;
	height:50px;
	line-height:50px;
	}	 
img.page_header {
	padding: 5px 10px; margin: 0;
	float: left;
	height:32px;
	}

I'm not sure if I am going about this the correct way, I know just enough CSS to be dangerous. Is it possible to add this?

User avatar
Tim Green
Site Admin
Posts: 21747
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Add Image to Text in HeaderBox of eWriter skin

Unread post by Tim Green » Thu Jul 30, 2020 7:20 am

Hi Sheri,

This seems like a rather roundabout way to achieve this. You already have a facility for putting an image here in the headerbox with the logo function, and that is already set up to be positioned correctly to the left of your title. The reason you are not seeing a reference to the image in the header box code is because it is applied as a background image and referenced in the CSS file, which is a much better way to control it.

This page in the help explains how to do this for the eWriter skins:

http://www.it-authoring.com/info/pp4hel ... dfoot.html

Also note that eWriter only has a desktop mode because it can never be displayed on phones or tablets as it is Windows only. 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.

User avatar
Sheri Steeves
Posts: 130
Joined: Tue Aug 05, 2008 5:06 pm
Location: Ottawa, Ontario,CANADA
Contact:

Re: Add Image to Text in HeaderBox of eWriter skin

Unread post by Sheri Steeves » Thu Jul 30, 2020 12:53 pm

Tim,

Thanks! I had found that information and already using it.

It was a request by the web/marketing people. We've got the company logo already set in that left corner. They were interested in having the product logo next to the floating title.

I'm using the minimalist_white eWriter and webhelp skins - is there a way to turn on a top banner for these skins, or would I have to switch to a boxed style to have a banner? A banner may be a better approach.

User avatar
Tim Green
Site Admin
Posts: 21747
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Add Image to Text in HeaderBox of eWriter skin

Unread post by Tim Green » Thu Jul 30, 2020 1:00 pm

Hi Scheri,

The banner would definitely be easier. Use one of the boxed skins for that. Let me know if you need further help after trying that out. 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.

Post Reply