How do I add a giant header image?

(Nnamso Anthony) #1

(Jeff Wong) #2

Discourse’s header is fully customizable via HTML. Find the Header section in your site’s theme. Admin > Customize > Themes > Common > Header.

(xiasummer) #3

Great, but how to edit the two parts?

I want the Big background picture with Words on it.

How do I upload the picture and write the words?

(xiasummer) #4

Actually when I read your

I found it great.

Could you please tell us how to have

  1. The Giant Header Image?

  2. The beautiful “Read/Share/Inspire” header?

  3. The Ads in the footer?

(Nnamso Anthony) #5

Login as Admin

Under Customize


Custom sections:

Desktop: Header , CSS , After Header , Footer
Mobile: After Header , Header , Footer , CSS

The Giant Header Image?

#custom-header {
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
background-color: rgba(0, 0, 0, 0.38) !important;
background-image: url( put image url ) !important;
background-size: 100%;
background-repeat: no-repeat !important;

The beautiful “Read/Share/Inspire” header?

  <div id="greywrap">
  	<div class="row">
  		<div class="col-lg-4 callout">

  		<!--	<span class="glyphicon glyphicon-book"></span>-->



The Ads in the footer?

The footer is not an Ad just a custom design.

Copyright 2017

(Nnamso Anthony) #6

Thanks to @awole20 I was able to follow the instruction and make that UI look that cool.

(smota) #7

can you share how did you do that, I’m noobie :frowning:


If you’re trying to add a banner then your best bet would be to follow the instructions in this topic: