It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Banner logo from custom html

Steve Boydon Jul 17, 2014

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

0 votes

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 Jul 17, 2014

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

0 votes
RobertH Jul 17, 2014

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 Jul 17, 2014

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 Jul 17, 2014

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.

0 votes
Steve Boydon Jul 17, 2014

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 Jul 17, 2014

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.

0 votes
RobertH Jul 17, 2014

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.

0 votes
Steve Boydon Jul 18, 2014

Thanks Robert, i will give it a go.

Steve

0 votes
Steffen Heller Jul 20, 2014

@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

0 votes
Steffen Heller Jul 20, 2014

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
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Published in Confluence

6 Awesome Ways to Apply Trello, JIRA and Confluence to your Project

I attended  Atlassian Summit 2019  and learned a lot from the presenters, attendees and knowledgeable Atlassian product managers. The presentations I attended focused on applying Agile, pla...

854 views 6 16
Read article

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you