What is the journal title?
As it says, it's the title you will give to your journal while writing and has to stati:
- A text field in which you enter the name of your journal while in sta.sh writer
- A link that directs to the journal deviation page when it's submitted.
The styling of
.gr-top h2 a is not visible in sta.sh writer!So what's the problem?
To make things easier for myself (and for you) I created a Skin Template that can I use when creating a new skin and you can use it, too. And to make things even easier, I combined the two stati of the journal title into one CSS rule.
[The skin template has been updated now.]
.gr-top .gr h2, .gr-top .gr h2 a {}
This is so that the look of the journal title while writing it and the title while viewing it look the same. That means if you change the font-family, font-size, color, anything that regards the text only, it will look the same in both stati.
This, however, is problematic, when you are trying to place the elements using margin, padding or position or when adding background values.
You see, elements stack. This means that the link is contained inside the title and it is not visible in sta.sh writer. The link only becomes visible on preview of the live view.
So if you apply a padding to both the
h2 and the a it will look alright in sta.sh writer, but once you preview the journal, the horizontal values will be doubled! h2
Is a block elment, which means it always takes up the whole width of one line. It forces all elements that preceed or follow on it into another line by default.
a
Is an inline element, which means that it does not change the position of elements that surround it. It can be styled to move other elements, but if you do not change the display property, any change will only be applied horizontally.
Is a block elment, which means it always takes up the whole width of one line. It forces all elements that preceed or follow on it into another line by default.
a
Is an inline element, which means that it does not change the position of elements that surround it. It can be styled to move other elements, but if you do not change the display property, any change will only be applied horizontally.
That is why when you combine the rule for the block element
h2 and the inline element a, the values will only be doubled horizontally.How do we solve this?
Simple: we add a single line for the title
.gr-top .gr h2 and apply any positioning, sizing and background styling only to that class..gr-top .gr h2 {}
.gr-top .gr h2, .gr-top .gr h2 a {}
Put all the background, margin, padding, position, height and width into the .gr-top .gr h2 element only and put everything about color, fonts and text into both.
Example
The first example shows the problematic case:
.gr-top .gr h2, .gr-top .gr h2 a {background: url("…/pattern.png");
color: teal;
font-family: 'Abril Fatface', cursive;
font-size: 24px;
margin: 0px;
padding: 40px;
text-shadow: dimgrey 0px 1px 0px;
text-transform: uppercase;
}
.gr-top .gr h2 a:hover {color: royalblue;
}
So this will look pretty terrible.
The text seems to have an additional 40px before it, not taken into account by linebreaks though as the link is an inline-element and so it will appear as if there was an indent.
To add insult to injury, the transparent patterned background image is applied to both elements and it appears three times, once for the
.gr-top .gr h2 and one time for each line of the link. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
Here's the fixed code, where we use an additional rule:
.gr-top .gr h2 {background: url("…/pattern.png");
margin: 0px;
padding: 40px;
}
.gr-top .gr h2, .gr-top .gr h2 a {color: teal;
font-family: 'Abril Fatface', cursive;
font-size: 24px;
text-shadow: dimgrey 0px 1px 0px;
text-transform: uppercase;
}
.gr-top .gr h2 a:hover {color: royalblue;
}
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
FYI: If you are using the properties of
.gr-top to position .gr-top h2 and subsequently .gr-top h2 a then you won't have this problem.And that's it. It's just something to remember
I hope it helps 
Have a suggestion?
Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.
