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 CSS/HTML

Custom sections:

Common:
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>-->
  			<h2>Read</h2>

content

  		</div>

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:


#8

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