Gamma theme

Gamma theme

4. Page header layout

christos October 22, 2013

Blog header

After setting the blog cover you can change the layout of the header by assigning the following classes to the header (the header code is located in partials folder. The “header-blog.hbs” partial is for the home page while the “header-post.hbs” partial is for the post headers)


ClassDescription

header-white This class will make the text on the header (blog title and description) to have white color. Its best when the blog image is dark and you want the text to pop out
header-black This class will make the text on the header (blog title and description) to have black color. Its best when the blog image is light and you want the text to pop out
header-overlay This class will add an overlay semitransparent layer on top of the blog image. This class can only be used when one of the two previous classes have been used also. You can use that class to maximize the readability of the header text
align-left This class will left align the contents of the header (blog logo, blog title and blog description)
align-right This class will right align the contents of the header (blog logo, blog title and blog description)
align-middle This class will vertically align the contents of the header (blog logo, blog title and blog description) in the middle
align-bottom This class will vertically align the contents of the header (blog logo, blog title and blog description) at the bottom of the header

Note!

you can change the header's height by changing the corresponding CSS rule (.post-header { .... height: 60%; ... } ) in the style.css file

Post header

Gamna is designed so that in the single post page it can display a post feature image in the header section. To do that wrap any image of your content inside a div with a class of “featured-image”

<div class="featured-image">..</div>