Does anyone have an example of a custom html header?

[Patrick Smith]

Does anyone have an example of a custom html header?

[Ben Crothers]

Hi Patrick,

Here's a CSS block that I use for a custom header, for some of my Confluence pages. Try putting this in an HTML block:

<style>
#main-header {
background: url(https://images.unsplash.com/photo-1505413687799-90481dfc0203) top left no-repeat; margin: -30px -20px 0 -20px;
padding: 0; background-size: 100%;
}
/* Just replace the URL of the image (above) with the image of your choice */

#main #main-header {
margin-top: -20px; margin-left: -40px; margin-right: -40px;
}

#title-text {
color: #eeeeee; 
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
padding: 0 0 10px 20px;
}

#title-text {
padding-top: 90px !important;
}
/* The pixel amount for padding-top controls how far down the text of your title appears. Experiment. */

.with-breadcrumbs {color: #ffffff !important;}

#breadcrumb-section {padding: 10px 0 0 20px; color: #ffffff;}
#navigation {padding: 10px 10px 0 0;}
#title-text a {color: #ffffff;}
li.page-metadata-modification-info {display: none;}
li.ajs-button a:link, li.ajs-button:visited {border: #ffffff;}
</style>

I've added a few comments to help you understand it. Mileage may vary, so try it on a private sandbox page first. ;)

[Patrick Smith]

Awesome thanks so much , I’m a html css newbie

how about just a text header instead of a image?

thanks again 

[Ben Crothers]

Try just using this CSS block (again, in an HTML block at the bottom of your Confluence page):

<style>
#title-text a {
color: #ff6600;
font-size: 3rem;
font-family: serif;
}
</style>

This CSS targets the link text within the page's title (i.e. the text header you mention). This should make it relatively easy to play around with different values for each property (color, font size and font family). I hope this helps! :)

[Boris Berenberg - Atlas Authority]

<p>Example</p>

But more seriously, I assume you're looking for something with styling that looks nice with the default Confluence theme?