Shop Mobile More Submit  Join Login

How to: Modifying the Header

Tue Mar 26, 2013, 6:42 AM
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 ginkgografix
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 ginkgografix
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 ginkgografix

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 ginkgografix
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 ginkgografix
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 ginkgografix
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 ginkgografix
(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 ginkgografix
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 ginkgografix
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 ginkgografix
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.

Explaining a few basic things about how to modify the header section of a journal.


:bulletwhite: More of this series
How to: Scrollboxes
How to: Request CSS help
How to: Modifying the Header
How to: Margin + Padding






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.
Add a Comment:
 
:iconryxiall:
Ryxiall Featured By Owner Jun 7, 2015  New Deviant Professional Digital Artist
Hi! I'm trying to add a picture to my header :) I need to put it in the  .gr-top{} section I believe? But what coding do I use to link said image? (Like an imgur.com one)?

I tried;
.gr-top {
background-image: "i.imgur.com/3O97KP0.png";
background-color:#2c2c2c;
color: #fff;
padding: 20px;
}


But my result was a DA default grey-green line just above my menu/below my title. I tried bumping up the padding but still no luck XD

Thankyou in advance! <3
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 7, 2015
Even though this is not perfect (spacing-wise) yet, the image shows up for me when I use your code.
If you already have added more code, the reason why you just get that green line might be somewhere else.
Reply
:iconryxiall:
Ryxiall Featured By Owner Jun 7, 2015  New Deviant Professional Digital Artist
Ah well it's a journal CSS made by someone else that I'm attempting to modify slightly.

Thanks anyway :) 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 8, 2015
If I should take a look at the code, to spot the reason, send me a note.
Reply
:iconryxiall:
Ryxiall Featured By Owner Jun 8, 2015  New Deviant Professional Digital Artist
Thankyou! :)
Reply
:iconmangakido:
Mangakido Featured By Owner Mar 15, 2015  Hobbyist Digital Artist
I'm trying to add an image to the header. Is this possible? To have my image with the journal title on it?
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 16, 2015
Yes, you just need to add it as a background image to your header class.
Reply
:iconmangakido:
Mangakido Featured By Owner Mar 16, 2015  Hobbyist Digital Artist
thanks! ^_^
Reply
:iconshizukananatsu:
ShizukanaNatsu Featured By Owner Aug 29, 2014  Hobbyist Traditional Artist
These are awesome and very helpful! Thank you!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Aug 30, 2014
You're welcome! :aww:
Reply
:icond-0-e:
d-0-e Featured By Owner Jul 26, 2014  Hobbyist Digital Artist
How do you do the separating lines you used a couple times and once in the description??
I keep seeing people using it but I can't find how people are doing it ?? ;;
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jul 26, 2014
You mean the <hr> tag?
Reply
:iconiyd:
iyd Featured By Owner Jun 15, 2014  Hobbyist Digital Artist
Ich habe ein paar buttons, die ich gerne über beiden text boxen hätte, aber wenn ich die codes in den header mache, tauchen die buttons über der unteren box auf, wie kann ich es hinkriegen dass die buttons ganz oben auf dem journal zu sehen sind?
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 15, 2014
Bin mir nicht so ganz sicher was du mit "über beiden text boxen" meinst. Kannst du mir mal ne schnelle Skizze in Muro machen?
Oder hast du eventuell eine live preview wo ich mir das angucken kann?
Reply
:iconiyd:
iyd Featured By Owner Jun 16, 2014  Hobbyist Digital Artist
i.imgur.com/vCV4Xib.png

dann hat mir einen code gesendet, aber dann ist das passiert!

imgur.com/7cHUKRg
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 16, 2014
Ah ok, jetzt hab ichs.
Normalerweise bleibt der reguläre Inhalt im Content-Bereich "gefangen" und du musst ihn rausheben. Allerdings sehe ich gerade, dass du die alte Journal-Struktur verwendest, da kann ich dir nicht genau sagen ob das auch klappt.

Im Normalfall musst du overflow:visible!important; position:static!important; zu .gr-body hinzufügen. Die Klasse hast du da aber nicht zur Verfügung. Du könntest es mit .journaltext versuchen. Vielleicht klappt das.
Anschließend musst du die Links noch mit einem z-index höher als 25 nach oben befördern (ebenen-mäßig, nicht optisch). Am einfachsten ist das, wenn du deine Links mit nem Container umrahmst und für den dann z-index:30; definierst.
Reply
:iconiyd:
iyd Featured By Owner Jun 16, 2014  Hobbyist Digital Artist
Hmmm, es scheint zu funktionieren! Vielen dank <3

Aber, das mit dem Container versteh ich noch nicht ganz, und die eine journal box ist mit den buttons nach oben gerutscht..

pastebin.com/43hrK9Ss
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 16, 2014
Wenn du .journaltext wie unten änderst, dann sollte es funktionieren:

.journalbox .journaltext {
background-color: transparent;
height: 480px;
width: 550px;
overflow: visible!important;
position: static!important;
text-align: center;
padding: 20px;
margin: 410px auto 0 auto;
font-size: 13px;
color: #7898A0;
}
Reply
:iconiyd:
iyd Featured By Owner Jun 16, 2014  Hobbyist Digital Artist
Danke danke danke! Es hat endlich funktioniert <3

Danke für deine Zeit!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 16, 2014
Kein Ding :hug:
Reply
:iconashuriwolf:
AshuriWolf Featured By Owner Oct 27, 2013  Hobbyist Digital Artist
but, if I want to add something down of the header and then a separator down?
Reply
:iconginkgografix:
ginkgografix Featured By Owner Oct 28, 2013
Sorry, ignore my other comment. Got confused with another conversation :B

I am not sure what you mean with "down of the header"? Below the actual header area? That would be placed in the journal skin area - just like everything else.
Reply
:iconashuriwolf:
AshuriWolf Featured By Owner Oct 28, 2013  Hobbyist Digital Artist
Oh thanks!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Oct 28, 2013
Should that go inside the scroll area or outside?
Reply
:iconashuriwolf:
AshuriWolf Featured By Owner Oct 27, 2013  Hobbyist Digital Artist
divider*
Reply
:iconkjherstin:
Kjherstin Featured By Owner Jun 8, 2013
This is the most fun part of journal coding :#1:
Reply
:icontifa22:
Tifa22 Featured By Owner May 27, 2013  Hobbyist Digital Artist
Yay, danke!
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 27, 2013
Büdde :hug:
Reply
:iconthagirion:
Thagirion Featured By Owner May 13, 2013  Professional Digital Artist
I have my journal basically looking the way I want now. I will change some of the colors later to greens. I want to know how to use some simple coding to place an image centered above the subject and I want to keep all my elements because I like having the subject and date on my entries. CSS blows my mind for some reason and I was only able to make what I have by punching in the colors into one of those sites that generates code for you. Any help would be appreciated.
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 14, 2013
With subject you mean the journal title? And when you talk of an image above it, do you mean a thumb from dA or an image that is part of the journal design?
Reply
:iconthagirion:
Thagirion Featured By Owner May 14, 2013  Professional Digital Artist
Yes.
An image around 450px of my own design that appears over the subject each time. I would place this in the box that says Header Skin?
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 14, 2013
You can add that via CSS, so that you don't need to pay attention to it every time.

Either you can place it to the journal header area (.journaltop/.gr-top) or it can become part of h2 (which is the title) directly. You add that image via background: url(IMAGEURL) no-repeat center top; and then adjust the time stamp and title via padding-top: ..;
Reply
:iconthagirion:
Thagirion Featured By Owner May 14, 2013  Professional Digital Artist
Ok, thank you for the help. I will give that a try soon. I will let you know if I get stuck.
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 14, 2013
Good luck :aww:
Reply
:iconthagirion:
Thagirion Featured By Owner May 17, 2013  Professional Digital Artist
It almost worked. I tried it with my bird pic. That's not the main pic I will be using. Mine will be bigger. This was just a test. It placed it behind the subject instead of on top and didn't show the whole image. [link]

I found the h2 line. But how come you don't just use that box at the top that says skin header?
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 17, 2013
Also what i forgot. If you add a background image that has a height of for example 300px but the element you added it to is only 50px high, you will only see those 50px from your background image. That's why we need to work with padding (or you can also define a height) to let the full image appear.
Reply
(1 Reply)
:iconginkgografix:
ginkgografix Featured By Owner May 17, 2013
If you use padding-top: 200px; for the element you have added the background too, the space above the text will increase. That way more of the image will appear. With padding you can increase the "unused" space between the content of an element and its borders.

That box won't help us here. Everything that is placed in Skin Header or Footer is part of the actual content area. The header-area (with title, timestamp) isn't part of that. So everything that you place in Skin Header will always be below those elements - unless you define otherwise via CSS. But then again you can use CSS directly for images.
Reply
:iconastrikos:
Astrikos Featured By Owner Apr 18, 2013   General Artist
So useful and well written! You're amazing, Anne!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 18, 2013
Thanks! :blowkiss:
Reply
:iconastrikos:
Astrikos Featured By Owner Apr 22, 2013   General Artist
:love: You are an amazing coder/ designer.
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 22, 2013
:heart:
Reply
:iconastrikos:
Astrikos Featured By Owner Apr 22, 2013   General Artist
:huggle:
Reply
:iconkjherstin:
Kjherstin Featured By Owner Mar 30, 2013
You always explain things so well. You are organized in your approach and visually appealing. Excellent!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 30, 2013
You can't imagine how happy it always makes me to hear that. Mainly because i am always afraid, that people might not be able to follow what i am trying to say or that i add too much random stuff or explain too less/much at once.

:rose:
Reply
:iconkjherstin:
Kjherstin Featured By Owner Apr 3, 2013
[deep breath in] For those, that don't understand, they can read it a 2nd time and accompanied with a big cup of coffee, to give them mental stamina for CSS/HTML.[deep breath out]
Reply
:iconvanmall:
vanmall Featured By Owner Mar 28, 2013  Hobbyist Digital Artist
Well written! Definitely useful and I have to try it some time soon! :lol:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 28, 2013
Good to hear, often i have no idea if my babbling makes sense and can be understood by others as well :giggle:
Reply
:iconvanmall:
vanmall Featured By Owner Mar 28, 2013  Hobbyist Digital Artist
lol, it's all good here! :rofl:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 28, 2013
Good to hear, often i have no idea if my babbling makes sense and can be understood by others as well :giggle:
Reply
:iconkatryano:
Katryano Featured By Owner Mar 27, 2013
Oh my, so helpful series! c:
Reply
Add a Comment:
 
×

:iconginkgografix: More from ginkgografix


Featured in Collections

CSS Help by PirateLotus-Stock


More from DeviantArt



Details

Submitted on
March 26, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
8,475
Favourites
252 (who?)
Comments
108
×