Banner logo from custom html

[Steve Boydon]

Is it possible to create a full width banner image by using custom html. I have seen code that puts text above the header and provides a site wide message.

If so, how would you reference the image file.

thx

Steve

[Steffen Heller]

By the way, the "official" explanation is here:

https://confluence.atlassian.com/display/DOC/Customising+Exports+to+PDF

Adding an Image to the Title Page

(...)

Follow these instructions to include an image on your title page:

1. Attach the image to a Confluence page.
2. View the list of attachments on that page, then right-click the image and copy its location.
3. Paste the link into the appropriate src="" attribute in your PDF Stylesheet, as shown above.
4. Edit the image URL so that it is relative, by removing the first part of the URL before /download/....

[Steffen Heller]

@Steve:

To reference an image in confluence, do the following:

• Attach an image to any confluence page
• Copy the image URL
• Trim the URL until it looks like this (the number code and image name will be different, obviously):
  "/download/attachments/132056490/worddavd688676b602ddf5c96bd282317d69f93.png"
• Go to Space Admin > PDF Layout > PDF Space Export Title Page and enter this:
  "<img src="/download/attachments/132056490/worddavd688676b602ddf5c96bd282317d69f93.png">"

To make it full width is a topic of its own.
For full width images I would do it differently and use a background image instead. I briefly explained at https://answers.atlassian.com/questions/268224/single-page-pdf-export-with-image-in-footer

[Steve Boydon]

Thanks Robert, i will give it a go.

Steve

[RobertH]

Steve,

I don't see why not. I would just right click on that image and copy the image URL and set that as the src in your image tag. Then adjust the sizes until you are happy.

[Steve Boydon]

Thanks Robert, so is there a way to refer to an image within a confluence page. Could I create a page, attach an image and have that in the img src tag?

thx

Steve

[RobertH]

Steve,

I don't see why not. I would just right click on that image and copy the image URL and set that as the src in your image tag. Then adjust the sizes until you are happy.

[RobertH]

You can do the same thing that Pietro mentioned in Confluence. It's located here:

Confluence Admin -> Look and Feel -> Custom HTML

Then in the 'Beginning of Body' add your custom HTML. I have something like the following which matches my JIRA instance:

<b class="banner-status">The wiki will be inaccessible from 9:30PM until 11:00PM central on Saturday, 06/28/2014.  Please save any work inside of the system before this time.  </b>

<style type="text/css" media="screen">
.banner-status {
   color: #990000;
}
.ghx-issue-subtask {
    margin-left: 0px;
}</style>

Hope this helps!

[Steve Boydon]

Hi Robert,

Sorry, I am not looking to add text, I just want to have a full width picture from a jpeg or gif file. I think I can use custom html but need to know how to include a picture and not text.

So using the img tag

<img src="fullwidthlogo.gif" alt="Site Logo">

[RobertH]

Didn't realize you needed that code.

Probably do something like this:

<img src="http://images.clipartpanda.com/banner-20clipart-banner1longclipartbnw.jpg" height="50px" width="100%" />

in the same spot

Obviously your sizes will differ depending on the image. You shouldn't need any of that css.

[pschaff01]

Hi Steve

This customisation can be applied in JIRA's Announcement Banner:

https://confluence.atlassian.com/display/JIRA/Configuring+an+Announcement+Banner

In the announcement banner you can use any HTML/Javascript code you want. If you write a message in the banner, is going to appear right below the header of your JIRA instance.

Cheers,

Pietro

[Steve Boydon]

Sorry, Pietro, my mistake, this is with confluence.

I'm also looking to do a full width image banner. I think it can be done with custom html, but i am not sure how to include an image, usually with you reference a folder and the file or url location. I am thinking this will be different in confluence.

thx

Steve