Banner logo from custom html

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

7 answers

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

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

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!

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">

Didn't realize you needed that code.

Probably do something like this:

&lt;img src="http://images.clipartpanda.com/banner-20clipart-banner1longclipartbnw.jpg" height="50px" width="100%" /&gt;

in the same spot

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

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

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,

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.

Thanks Robert, i will give it a go.

Steve

@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

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/....

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Jul 10, 2018 in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

599 views 20 11
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you