How to: Modifying the Header

14 min read

Deviation Actions

GinkgoWerkstatt's avatar
Published:
17.8K Views
For this tutorial series I am explaining different elements you can create or modify with the help of CSS. The level of experience that is needed to be able to understand the tutorials can differ and will be in no order.

Everything explained is based on the gruze-structure of journals. If you are still using the old structure or have a journal installed that used it, things won’t work the same way like explained below.
For simple skins the old structure is fine, but the more features you add, the more I would recommend using the gruze-structure. You can look up the differences here: ginkgografix.deviantart.com/ar…






This time I will explain you, how to modify the header section of a journal. I will try to cover everything important, but if there are still things you want to know more about, just let me know and I will try to add it here.
Nothing what I will explain here will affect the actual content area and it will always refer to the default skin.

At the bottom you will also see different basic versions of how to style the header section. They should just give you an idea what can be done and maybe inspire you to be creative on your own.


The Structure


More advanced coders should already know about the single elements of the header section, but for those who are new to this or haven’t paid much attention to it yet, we will take a closer look at how the header section is built up before we start.


Bild1 by GinkgoWerkstatt
This is what you see when you just apply some text to your journal. As you can see some elements are already defined where they are placed and how they look like. So let’s go further.



Bild2a by GinkgoWerkstatt
On the left side you see the actual header section called .gr-top.
The border created above is not part of it and thus will always be there, if you don’t hide it (more about that later). But the little triangle .tri placed below our marked area still belongs to the header section. It was just placed outside via CSS.



Bild4 by GinkgoWerkstatt

This is a non-visible wrapping element called .gr. It’s part of the gruze structure everywhere and mainly causes some spacing (purple areas). If you are more advanced it is another class you can make use of for your skins without adding any extra HTML.



Bild5 by GinkgoWerkstatt
h2 seem to be only the title of the journal, but it has two elements inside. The little book icon as well as the actual title as a link.
As you can see a spacing is already pre-defined here as well.



Bild6 by GinkgoWerkstatt
And finally the timestamp element wrapped by span.
 

And when we look at the code instead of images we get this:
<div class="gr-top" >
<i class="tri" usr=""></i>
   
<div class="gr">
      <h2>
     <img alt="" style="vertical-align:middle" src="…/journal.gif?2">
     <a href="…"> Devious Journal Entry </a>
     </h2>

    <span class="timestamp" title="…">Mon Mar 25, 2013, 1:40 PM</span>
</div>
</div>

So basically we have quite a few elements to play with, but are also restricted what we can adjust. That being said, let’s clean up the code a bit, to get rid of unwanted elements!



Cleaning the Header section


While it always depends on the layout you have created for your journal, there are some elements you don’t always need. In case of the little book icon it is not wanted most of the time.

So how do we get rid of those elements?
We just look up the class name or default HTML tag and use display: none;. For example, if we don’t need the book icon, we add .gr-top img{display: none;} OR h2 img{display: none;} to our CSS and it is gone.


Bild7 by GinkgoWerkstatt
As you can see this doesn’t affect the journal title even though both elements belong to h2.

Let’s assume we don’t want the timestamp and those borders either. So we going to add .timestamp, .gr1, .gr2, .gr3 {display: none;} to our CSS as well and will end up with this:

Bild8 by GinkgoWerkstatt
(instead of .timestamp you can also use .gr-top span)

:note: By using .gr1, .gr2, .gr3 {display: none;} you will also remove the borders at the bottom of your journal.

This can be done for pretty much any element within .gr-top, but you can hide that element itself as well. When you do so, the complete header section will be removed from your journal. It also means that you can’t change the journal title on your journal page (as it will not be shown) and will stay “Devious Journal Entry” all the time.



What to keep in mind


We now know the structure and how to get rid of what is not needed. Seems like we could start to modify our header now, but before we do so, there are some things we should keep in mind.

  • The actual title is a link. In the journal preview you will see the regular text color, not the defined link color.
  • Adding a margin or padding  to h2 a does have no effect for the top and bottom, as a is an inline element. Use it for  h2 instead.
  • If you have removed the title for your skin and still want to change it whenever you update a journal, so that your watchers don’t always get “Devious Journal Entry” use .journal-edit-mode h2{display: block;}.
    (This doesn’t work when you remove the entire header section.)
  • To remove all default settings for the header use .gr-top, .gr-top .gr, h2 {margin: 0; padding: 0!important; border: 0;}. The !important is needed to override the padding of .gr
    Using this method means you have to use !important to override the 0 values later as well.

    Another method would be .gr-top, h2 {margin: 0; padding: 0; border: 0;} .gr-top .gr{padding: 0!important; border: 0;}, to reduce the later usage of !important.

    Or you keep the default settings of .gr and work with them in your layout.
  • If you want to add menus or special images to your header section you have to do it via CSS and HTML. As we can’t add any HTML code to the header, such elements can only be added via the journal content. That will be covered another time.




Modifying your Header


Now it’s time to start playing with CSS! The examples below do all work without images. So you can just copy & paste the code to use and play with it on your own.

As a base code we always use this:
.gr1, .gr2, .gr3, .gr3, .tri, .gr-top img {display: none;}

.gr-box {width: 400px;}

.gr-top{
border: none;
padding: 0;
background: transparent;}

.gr-top .gr{
border: none;
padding: 0;
background: transparent;}

With that we will get a pretty blank header with just the padding of .gr; i have added a limited width just for this tutorial. It is not mandatory.



Example 1



Beispiel1 by GinkgoWerkstatt
In this example we decorate our header with rounded corners for the top, add a little border to h2 and align the timestamp to the right. The rest is just a little spacing here and there and solid background colors.

The code we are using:
.gr1, .gr2, .gr3, .gr3, .tri, .gr-top img {display: none;}

.gr-box {width: 400px;}

.gr-top{
border: none;
padding: 0;
background: #742189;
border-radius: 20px 20px 0 0;
padding: 40px 0 40px 20px;}

.gr-top .gr{
border: none;
padding: 0;
background: transparent;}


h2 {
padding: 20px;
background: #a647ae;
border-left: 5px dotted #fff;}

h2 a{color: #fff;}

.gr-top span{
display: block;
text-align: right;
margin: 5px 10px 0 0;

color: #a647ae; }



Example 2



Beispiel2 by GinkgoWerkstatt
Here we keep the rounded border at just one place and only move the timestamp a bit.
The title gets a different font and a little shadow. That’s all and again it looks different to our first example.

The code we are using: 
.gr1, .gr2, .gr3, .gr3, .tri, .gr-top img {display: none;}

.gr-box {width: 400px;}

.gr-top{
margin: 0 0 0 30px;
padding: 0;
border-radius: 0 50% 0 0;
border: 3px solid #8b5d2c;
padding: 40px 0 30px 0;
background: #bd8344;}

.gr-top .gr{
border: none;
padding: 0;
background: transparent;}

h2 a{
color: #e9bd8e;
font-size: 25px;
text-shadow: 1px 1px #8b5d2c;
font-family: 'Georgia', serif;
letter-spacing: 2px;}

.gr-top span{
padding: 0 0 0 20px;
color: #8b5d2c;}



Example 3



Beispiel3 by GinkgoWerkstatt
For this we use the rounded borders completely, align everything in the center and adjust the title a bit again (different font + shadow). But this time we also ‘move’ the header section a bit away from the content via margin.

The code we are using:
.gr1, .gr2, .gr3, .gr3, .tri, .gr-top img {display: none;}

.gr-box {width: 400px;}

.gr-top{
box-shadow: 4px 4px 5px #327c9e;
text-align: center;
border: 1px solid #2a91c1;
border-radius: 10px;
margin: 0 10px 30px 0;
padding: 20px;
background: transparent;}

.gr-top .gr{
border: none;
padding: 0!important;
background: transparent;}


h2 a{
color: #139ad8;
font-family: 'Risque';
font-size: 23px;
text-shadow: 3px 3px 5px #fff;}


Without using images the possibilities of what you can do are already endless. So if you add images and combine them with top menus or other nice features your journal can quickly become something truly unique.


Inspiration


Here are some examples of how to style headers when everything comes together. Simple or complex, you choose what you like the most.

Celebrating Diversity - Design by pica-ae
The title and the timestamp got centered, while the rest of the visible elements are completely hidden. In combination with a general background as well as one with more information, the header section looks more complex than it actually is.



Forgotten Memories Journal CSS by SimplySilent
The header section got separated from the content area and is supported by a nice image background.
In combination with the overall background the header doesn’t float around on its own, but becomes part of the whole layout.



FREE JRNL - Falling Zs by firstfear
Here everything except the timestamp was kept like it originally looks like. Only the space between the elements got adjusted and the timestamp became part of the actual content area.



Sunset by Drake1
With padding the space between content and header area got increased here. Timestamp and title are centered and regular header decoration is hidden again.



Pink Is Awesome Skin by Infinite705
The last example has the text aligned to the right, while the background image and the right spacing does the rest. Along with hiding all default borders and other backgrounds.






Have any questions or don't understand something?
Questions should be left in a comment directly to this blog so that people with similar problems can look them up later as well.

If there are certain things you want me adress the next time, either leave a comment here as well or note me directly.

© 2013 - 2024 GinkgoWerkstatt
Comments130
Join the community to add your comment. Already a deviant? Log In
Violets4Life's avatar
Question, Doesn't Doing This Require Core Membership? Or Is That Just For Saving?