Shop Forum More Submit  Join Login
I thought it would be a good idea, to give a short explanation of an issues that can occur between viewing a journal skin in Sta.sh Writer and the preview/live view in regards to the journal title.

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.
These two never appear at the same time!

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.


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 :la:

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.

DeviantART Journal Skin Template
Clearing up some issues regarding title styling and previous CSS Tricks :)



Previous CSS Tricks


:bulletgreen: Limiting .text width



Any questions? Just ask :eager: by darkmoon3636

I hope you like this and find it helpful Heart Peace
Add a Comment:
 
:iconlauraypablo:
lauraypablo Featured By Owner Feb 21, 2015  Hobbyist Digital Artist
thank you!! added to my favs :huggle:
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 23, 2015  Professional Interface Designer
:) 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 20, 2015   Digital Artist
I use to leave h2{} with "basic" stuff that I don't change in any of my skins, and code only h2 a{} and h2 a:hover{}. Displays perfectly ok :P
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 20, 2015  Professional Interface Designer
Yeah, if you always kept them seperate, there shouldn't be a problem. I mostly combined them, so I don't have to write certain things two times and I wanted the title in stash writer and the deviation to look the same. And apparently I never use position or padding or backgrounds on h2 and h2 a, so I never noticed it could cause issues. 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 20, 2015   Digital Artist
I didn't notice that the title in stash and journal looked different... :P
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 20, 2015  Professional Interface Designer
Well, yes. You did not make the mistakte I did. I felt the need to clear it up, due to my previous journals :B
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 21, 2015   Digital Artist
Everybody makes mistakes... :dummy:
Reply
:iconaerith-vii:
Aerith-VII Featured By Owner Feb 17, 2015  Hobbyist General Artist
I need to learn CSS. But it's so hard when we need to translate the lesson.
But one day I will learn, I think ... Sweating a little... 
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 18, 2015  Professional Interface Designer
Once you get the hang of it, it gets easier :)
And I always have cheat sheets around to look up things that I forget, I can't remember everything all the time :D
Reply
:iconaerith-vii:
Aerith-VII Featured By Owner Feb 18, 2015  Hobbyist General Artist
Thank you! I'll take all the lessons to study :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 9, 2015  Professional Interface Designer
:hug: 
Reply
:iconikue:
Ikue Featured By Owner Feb 17, 2015  Hobbyist Digital Artist
:worship:
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 17, 2015  Professional Interface Designer
Blush 
Reply
:iconnichrysalis:
Nichrysalis Featured By Owner Feb 17, 2015  Hobbyist Writer
Being the css noob I am, I always wondered why that was when learning from other's work.
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 17, 2015  Professional Interface Designer
I think it used to work fine before, I don't recall ever having had that issue since the linked titles were introduced. Or maybe I just never used positioning on those elements :shrug:
But yeah, it's a link in a headline and it's really inception :lol:
Reply
:iconnichrysalis:
Nichrysalis Featured By Owner Feb 17, 2015  Hobbyist Writer
:lol: True! And you probably understand that waaaaaaaaaaaay better than me, oh goddess of CSS. :B
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 18, 2015  Professional Interface Designer
InCSSeption… I really shouldn't :lol:

:blush: I would absolutetely not go that far in naming myself ;) More like a… shit, I wanted to say fairy, but that's already taken by ginkgografix. Maybe I can be a gnome :XD: 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Feb 19, 2015
But imagine all the confusion with two CSS fairies called Anne from Germany who are Communication Designers :nuu: :eyes:
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 19, 2015  Professional Interface Designer
I know, that's why there can only be one :catfight: :giggle:

Maybe we'd just say that magpie as magical creatues, then it's an easy naming decision :XD: 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Feb 19, 2015
Nono, it was more like a "LET'S CONFUSE ALL THE PEOPLE OUT THERE AND ESPECIALLY neurotype" kind of :shifty:

Haha, or that :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 20, 2015  Professional Interface Designer
There should be enough room for more than just one fairy :XD: I would not be green at least. Maybe I should hold a contest where people have to design me as a fairy :lol: That could be interesting :giggle: 
Reply
(1 Reply)
:iconneurotype:
neurotype Featured By Owner Feb 19, 2015  Hobbyist General Artist
O: the conspiracy is real
Reply
(2 Replies)
:iconnichrysalis:
Nichrysalis Featured By Owner Feb 18, 2015  Hobbyist Writer
Hmm... CSS otter? I dunno... and I like otters, they're so cute.
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 18, 2015  Professional Interface Designer
Otters are great, but they are not really magical. Maybe a Corgi? They are magical fairies ride them and I have short stumpy legs, too  :lol:
Reply
:iconnichrysalis:
Nichrysalis Featured By Owner Feb 18, 2015  Hobbyist Writer
Corgis are fairies? :O
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 18, 2015  Professional Interface Designer
No, they ride them :XD: There's some fur on their back/shoulders that's called "faerie mounts" which is basically the fairy's saddle :giggle: 
Corgi and Rider by MistressCat  
Reply
(1 Reply)
:iconkovowolf:
KovoWolf Featured By Owner Feb 17, 2015  Professional General Artist
:love:
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 17, 2015  Professional Interface Designer
:tighthug: 
Reply
Add a Comment:
 
×

:iconpica-ae: More from pica-ae


Featured in Collections

News and Journals by Nichrysalis

Journal Templates and Custom boxes by KovoWolf




Details

Submitted on
February 17, 2015
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
1,302
Favourites
20 (who?)
Comments
36
×