Shop Mobile More Submit  Join Login
×

Featured in Collections

CSS Tips by poserfan

css tutorials by MelikeBAt

Support by xxxbluewolf


More from DeviantArt



Details

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

Stats

Views
4,229 (8 today)
Favourites
109 (who?)
Comments
49
×


This article is written for fellow CSS coders who already have basic+ knowledge of deviantART journal codes.  This is not a beginner's tutorial.


User Friendly Journal Skin Coding

I've been making journal skins on DeviantART since 2010, I'd dabbled in CSS before, but never for other people.  I know what my codes are and how to use them to their full potential and often, just code on the fly when I want something to do something.  But making free and commission skins here showed me that I needed to make them as easy to use as they are pretty.  And really, who wants to type in a lot of extra HTML when they go to write a journal?  It is easy enough to access the artist's comments.

Artist Comments by GillianIvy

But even then, copy & paste, memorize that....  It can be a lot to deal with if you do not know CSS and HTML.  Which is the reason most people get someone else's skin design in the first place.  So, to minimize the code work you can actually use standard HTML for quite a lot.  You want your user to just install and begin writing a journal right away without having to look up how to use it.  Extra codes and fancy things are wonderful, but the core use of text is where the focus needs to be.  And there are ways to add extra fancy boxes, etc without the need for additional HTML.  

What are the Core Standard HTML codes?

First, text formatting.  Such as Bold, Strong, Italics, Emphasis, Underline, Strikeout, Abbreviation, Acronym, Code, Teletype, Insert, Subscript, Superscript and Small.  These all need little extra than basic knowledge HTML.  Even if someone does not know how to do the bold or italics text, this is in the Sta.sh Writer's WYTIWYG editor.  And users can switch to HTML mode to do more advanced editing.  There are also Subheadings 1-6, though the editor only offers 1-5 and normal.  
Stash menu by GillianIvy

So that is Bold, Italic, Underline, then Subheading sizes.  After that, we have Unordered List, Ordered List and Blockquote.  Then Left alignment, Centered and Right alignment.  And finally, the links.  I like to code for just about everything, including paragraph.  I like to use paragraph to make an alternate blockquote style or feature box.  Instead of a long div class with a code name to memorize,  they can simply use the <p></p> tag.  


How do you write the HTML for these?


  • <b>Bold</b>
  • <strong>Strong</strong>
  • <i>Italics</i>
  • <em>Emphasis</em>
  • <u>Underline</u>
  • <ins>Insert</ins>
  • <abbr title="#">Abbreviation</abbr>
  • <acronym title="#">Acronym</acronym>
  • <small>Small</small>
  • <code>Code</code>
  • <tt>Teletype</tt>
  • <strike>Strike</strike>
  • <sub>Subscript</sub>
  • <sup>Superscript</sup>
  • <blockquote>Blockquote</blockquote>
  • <p>Paragraph</p>
  • <hr> -- Horizontal Rule
  • <h1>Subheading 1</h1>
  • <h2>Subheading 2</h2>
  • <h3>Subheading 3</h3>
  • <h4>Subheading 4</h4>
  • <h5>Subheading 5</h5>
  • <h6>Subheading 6</h6>

How do you write the CSS codes?

  • b{} 
  • strong{}
  • i{}
  • em{}
  • u{}
  • ins{}
  • .abbr{}
  • acronym{}
  • small{}
  • code{}
  • tt{}
  • strike{}
  • sub{}
  • sup{}
  • blockquote{}
  • p{}
  • hr{]
  • h1{}
  • .text h2{} (I add .text so it does not effect the title of the journal)
  • h3{}
  • h4{}
  • h5{}
  • h6{}

You can actually write things that are all going to be the same style stacked:
b, i, u, small{color:#ffffff;}
I like to stack a lot of elements, less coding to write and not so long!

Lists and Things

Writing a list, I recommend everything be written all in one line.  This way, they do not have weird spacings in between and look nicely grouped together.  <ul>Unordered List <li>Unordered Item</li> <li>I like to add spaces</li></ul> It may not look as pretty on the input box, but on the live journal it makes a huge difference.  Coding can get a little bit more complicated if you make child elements on this, but it really is not very difficult.
  • ul{} -- Unordered List
  • ul li{} -- Unordered List Item
  • ul li li{} -- Unordered List Item Child
  • ol{} -- Ordered List
  • ol li{} -- Ordered List Item
  • ol li li{} -- Ordered List Item Child

Okay, not really so bad, but the problem is that your moods are also list items.  So they will adopt the list styling unless you specifically tell them not to:
.list li{list-style:none;}
That should eliminate that!

Images and dA Embeds

Here's the fun part!  At least to me, but I really enjoy doing CSS, which if you don't, maybe it is not the best activity for you...  I like this especially since it is what can really make a journal skin shine.  Everyone likes featuring art.  But to really make their feature stand out, it needs a lovely layout and lots of options.  Now there are several different types of images, not just your standard thumb code.  The codes for these can sometimes be tricky, as a simple thumb actually has layers of codes.  And a secret one most people might not even know about!  How do I find these secrets?  I right click and "Inspect Element" in Google Chrome or Firefox.  I use Chrome now.  If you don't really know your way around this, play with it a bit.  The Firefox version has a 3d view that lets you dissect a website like it were cake.  If that makes sense...  That would be how I discovered the code for the secret italic, embedded deviations and embedded videos.  Let's have a look:
Shadow-holder by GillianIvySecret Italics by GillianIvy
Standard Thumb with secret italic!

Embedded Deviation by GillianIvy
Video Embed by GillianIvy
Embedded Deviation and Embedded Video.

Assuming my readers do not know how to code standard thumbs, I will go ahead and explain it.  The thumb code is the code dA generates when you submit a deviation or journal.  This is located on the info bar, just under the fav.me link.  :thumb#:.  You post that in your journal and a thumbnail of the deviation is generated.  Behind the scenes there is a lot more to it.  
  • .shadow{}
  • .shadow-holder{}
  • .shadow-holder img{}  

or
a.thumb{}
a.thumb img{}

which I rarely ever use.  Just as it seemed redundant since I am already using the shadow-holder which has more layers.
This code effects big thumbs :bigthumb#: and the lit thumb as well.  As more and more people are featuring literature and other articles in their journals, it is important to include the oft forgotten lit thumb codes.  Because otherwise, they may end up entirely illegible and ruin your gorgeous skin.  And if you don't code it neurotype will give you a :stare: face.  Lit CV's appreciate lit thumbs.
  • a.lit{} -- The entire thing
  • q{} -- The text area
  • q strong{} -- The title
  • img.lit{display:none;} I remove the image usually, because I can!

I like to make additional styles for emotes/stamps/png thumbs where the bg is transparent and might not look very good with a border or something.  So I make a cancel code.  I use <em>:thumb#</em> as it is easy to remember em=emote.  But really, you can use any standard core html codes to contain the thumb code.  And here is how the CSS would look:
  • em .shadow{}
  • em .shadow-holder{}
  • em .shadow-holder img{}  
The em version of thumbs is the only one effected.  And this code is simple enough rather than making a div <div class="clear">:thumb#:</div>.  Easy for the coder and the user.
I do the same thing, only using <small>:thumb#:</small> to create a mini gallery effect.  So much less code and HTML than making a container just for these little thumbs when I can write small and that's it.  Easy to remember and gives an extra feature style to the user.
  • small .shadow{}
  • small .shadow-holder{}
  • small .shadow-holder img{}  

Back to this secret italic thing.  Why is it even there?  You may have noticed that in official skins, they may have a neat hover effect where a little magnifying glass may pop up on the image or something along those lines.  The code is already there for you to implement this!  Nothing for the user to do.  You simply add an image to the hover of the image italic:
  • .shadow-holder img:hover .shadow-holder i{}

Moving on.  I'm sure you may have noticed large images in journals.  In Sta.sh, it is as simple as adding images from the "add items" sidebar.  But there is actually an easy code for this.  At least, easier than looking up the urls for the link and the image to use <a href.... > and <img src...> tags.  DeviantART has their own special codes. <da:deviation id="#" /> where the # is the thumb code without the word thumb before it.  So you simply copy the thumb code into the id and it generates your link and thumbnail.  You add in the width (height is not needed) and you have a preview image any size you like.  Previously, I would make a special container to display these, as the da code is not effected by the thumb code styles.  So I thought it would be extra codes for the user to have to input.  Or so I thought:
  • .embedded-deviation{}
  • .embedded-image-deviation img{}

Finding the video embed was simple after that.  I haven't tested on the Vimeo ones, but the following codes work for Youtube and dA Film.  First your embed, <da:embed  profile="youtube|vimeo|film" id="#" />.  And your code:
  • .daembed{}
  • iframe{}

Conclusion

With the above codes, you can make extra fancy journals that the user needs very little HTML knowledge in order to get it to work.  Of course, there is so much more you can do, adding special divs and all.  But the point of this article is ease.  I have made a template of my blank codes to ease my own use of them.  It can be tiring typing all of that ;D  And you are welcomed to have a look.  I update it as I find new things or change how I code.  Generally, I will put in a small notation and bold newer things.  You may copy and save it.  I do not need credit for anything.  But if you find my template useful, I do not mind a shout out, a thank you or pointing people in my direction.  DevART also changes their codes periodically, so I would add those as well.  Gillian's Journal Skin Template.  

Sorry that this is not really a beginner's lesson.  But there are several tutorials that can be found to start off delving into deviantART CSS.  Groups such as deviantCSS eCSSited CSS-Babes journalcss are good places to look at resources.  I also keep a collection of most Frequently Referenced resources, for things like custom boxes and handy CSS guides.  People ask me all the time how to code this or that, so I keep these thumbs handy.  I recommend faving them yourselves and saying a thank you to the creators.  I hope newcomers will find that we have a very tightknit and welcoming community of coders.

Thanks for reading, hope you learned something new or useful!  
~Gillian




Disclaimer: this is not for beginner's.  These are some tips on how I create my skins and make them as user friendly as possible, yet still filled with extra features and special coding.  I find it easier for myself as well.  I use standard HTML codes to make skins with lots of variety and character.
Add a Comment:
 

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconrissingflower:
RissingFlower Featured By Owner Aug 6, 2013
All though I'm a beginner it's the first time I see lots of info that gives me a head start, thank you. 
Reply
:icongillianivy:
GillianIvy Featured By Owner Aug 6, 2013  Hobbyist General Artist
;D  Glad to hear it is beneficial to you.  Good luck!  
Reply
:iconrissingflower:
RissingFlower Featured By Owner Aug 7, 2013
Thanks
Reply
:iconserafina-rose:
serafina-rose Featured By Owner Apr 20, 2013  Hobbyist Digital Artist
Wow! You sure have put a lot of work and effort into this. I appreciate this so much as I'm learning and it seems easy to follow. :iconbouquetplz:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 20, 2013  Hobbyist General Artist
Thanks, I'm glad it is useful for newcomers and experienced coders. Feel free to ask me CSS questions, I don't mind ;D
Reply
:iconserafina-rose:
serafina-rose Featured By Owner Apr 20, 2013  Hobbyist Digital Artist
Awww thanks so much.. that's so lovely of you, I may if I get stuck. :D
Reply
:iconastrikos:
Astrikos Featured By Owner Apr 14, 2013   General Artist
Incredibly useful! :love:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 14, 2013  Hobbyist General Artist
Aw, thanks! Glad people are enjoying this. ;)
Reply
:iconastrikos:
Astrikos Featured By Owner Apr 14, 2013   General Artist
:love:
Reply
:iconmiontre:
miontre Featured By Owner Apr 6, 2013  Hobbyist Photographer
:worship: Thanks Gillian! You inspired me to make this skin with your article: [link] :D
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 7, 2013  Hobbyist General Artist
:D I love the lit thumbs, they really mirror the entire design. Kudos!
Reply
:iconmiontre:
miontre Featured By Owner Mar 31, 2013  Hobbyist Photographer
By the way, something you might want to add to your skin template:

.put-art-here

It affects the area where the user writes the journal text. By default, it's set at 90% width (of the , which I find is misleading and annoying. You can change the width or center it, whatever works for you, but you've got to use !important with it. :nod:
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 31, 2013  Hobbyist General Artist
Added note on it. Will help me remember to try to use it.
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 31, 2013  Hobbyist General Artist
I tried using the .put-art-here and it only seemed to be part of the preview structure? I might not have been using it right, since I think I was trying to do some layered thing with it... I'll have to look at it again. I just wrote up a CSS DYK about layers. Maybe you can write a note to Bradley to add a blurb/mention on that and how to use it. Since those articles are two parts and that would go together.
Reply
:iconmiontre:
miontre Featured By Owner Mar 31, 2013  Hobbyist Photographer
Oh, forgot to mention that it doesn't affect the actual outcome of the journal. :lol: It affects the journal editor, the text box where the user enters the text they want in their journal. And you've got to !important everything for it to work. :nod:
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 31, 2013  Hobbyist General Artist
Ah, yes, I thought it was something like that. So not good for the design aspect. Oh, I should probably add .journal-edit-mode{} as well, since that effects how the editor looks and if you have title hidden or some wonky thing, that will unwonk it. You just have to write it like .journal-edit-mode .gr-top h2{} (or whichever section needs to be fixed for editor)
Reply
:iconmiontre:
miontre Featured By Owner Mar 31, 2013  Hobbyist Photographer
Awesome article Gillian! :la: I learnt (learned?) some new things I didn't know about before. This goes to my "Useful" bookmarks folder ;P

Forgive me, lit community, for I always forget to style lit thumbs :crying:
Except for once when I saw someone using one of my skins with a lit thumbnail in their journal and it looked so bad that I updated the skin and told them to re-install :XD:
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 31, 2013  Hobbyist General Artist
Oh yes, my old skins before lit thumbing. Lit thumb coding needs to be made the standard. Only through skinning for other people did I realize how other people use their journals. So it made me change how I skinned. Like the cancel out for emote thumbs.

I think learnt and learned are both correct, though it may be a difference in how the sentence is structured for the correct grammar. Like "he is a very learnt scholar" or "we learned to code in class today". I might be mistaken... I usually Google "learnt vs learned" to make sure I'm using the correct tense.

I have a dA Faves folder for frequently referenced, for things people are constantly asking me about like custom boxes and css basics. I used to have to dig through my resources and tutorials folder, but that got ridiculous. I have waaaay too many faves!
Reply
:iconthestockwarehouse:
TheStockWarehouse Featured By Owner Mar 30, 2013  Hobbyist General Artist
Very interesting and informative. I never went beyond the beginner stage for coding, so all my CSS journals I make myself are just boxy. I spend much more time creating banners or CSS backgrounds.
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 31, 2013  Hobbyist General Artist
There is a collab contest going on right now for dA related, perhaps you can find a partner there to work on a skin: [link]

Hope my article might come in handy, thanks for the comment.
Reply
:iconthestockwarehouse:
TheStockWarehouse Featured By Owner Mar 31, 2013  Hobbyist General Artist
:aww: :nod:
Reply
:iconkjherstin:
Kjherstin Featured By Owner Mar 30, 2013
It sure is challenging making easy to use journals and that is part of the fun. It pushes us into learning new codes, especially since DA versions keep changing and old CSS codes keep becoming redundant :rofl:

SAY WHAT? "Sta.sh Writer's WYTIWYG editor" I have not explored the sta.sh properly. :iconrunsiesplz:
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 30, 2013  Hobbyist General Artist
The Sta.sh is both wonderful and annoying. If you write in your codes that you want to be visible, it is a little tedious. All those < above were so hard to get them to not automatically think I meant everything to be bolded or something :XD:

I think I am always coming up with a better way to code with every single skin I make. Oh my old skins, they look so terrible to me now. Since now, it is my standard to code all the subheadings and font styles, and now I must code embedded images and videos! :giggle: But I won't redo all the old skins, it is way too many and there is no easy way to just update them. And I always would find things that needed changed right after uploading. :B
Reply
:iconkjherstin:
Kjherstin Featured By Owner Apr 3, 2013
We are our own worse critics! :XD:

It is such a pity we can't edit the code once we upload it
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 3, 2013  Hobbyist General Artist
Of course. But when you get better at something then see the old version... It makes you cringe a little. CSS improvement meme! ;D
Reply
:iconkjherstin:
Kjherstin Featured By Owner Apr 3, 2013
hehe
Reply
:iconpizzapotatonbacon:
PizzaPotatoNBacon Featured By Owner Mar 29, 2013  Student General Artist
:icontearplz:
:iconcrazyarmsplz:
This didn't only help me with making user friendly skins (As of now, I'm making my first journal skin! :dummy:), but somehow, it kinda gave me the basics (despite this not being intended for beginners) and I loved it.Very comprehensive. :D
This week is so much win
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 29, 2013  Hobbyist General Artist
Aw, I'm glad! Feel free to ask me for tips and pointers. I have some in my forum: [link] I welcome CSS discussions there, it's a good way to keep track of random coding thoughts.
Reply
:iconpizzapotatonbacon:
PizzaPotatoNBacon Featured By Owner Mar 30, 2013  Student General Artist
Well, I kinda need help with my header links.
You see, I'm trying to change the color, but it doesn't work, and the color of the links are the default colors for links. :/ (Well, the header links anyway. The normal links are fine.)

Here is the code I am using for the headers:

h1 {font-family: 'Montserrat',serif;
font-size: 38pt;
color: #C6E399;}
h1 a {color: #DDF8B2;}
h1 a:hover {color: #E4FFB9;}
em h1 {border-style: dashed;
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;}
em h1 a {color: #ddf8b2;}
em h1 a:hover {color: #e4ffb9;}
.text h2 {font-family: 'Montserrat', serif;
font-size: 32pt;
color: #C6E399;}
.text h2 a {color: #ddf8b2;}
.text h2 a:hover {color: #e4ffb9;}
.text em h2 {border-style:dashed;
border-top-width: 0;
border-left-width: 0;
border-right-width:0;}
.text em h2 a {color: #ddf8b2;}
.text em h2 a {color: #e4ffb9;}
h3 {font-family: 'Montserrat', serif;
font-size: 30pt;
color: #c6e399;}
h3 a {color: #ddf8b2;}
h3 a:hover {color: #e4ffb9;}

Not quite sure what I'm doing wrong here... Hopefully you can help me out with this.
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 30, 2013  Hobbyist General Artist
Okay, it is the dA code, you need to override it. For color you must declare it important. color:#ffffff!important; otherwise it will remain default colors. This is true for subheading links and hovers as well. I probably should have added that as a note in there. Though wasn't thinking of that.
Reply
:iconpizzapotatonbacon:
PizzaPotatoNBacon Featured By Owner Mar 30, 2013  Student General Artist
Thank you! :hug: It works.

I wonder, what is the difference between a span class and div class? That's because I noticed it in a journal skin I was using... :/
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 30, 2013  Hobbyist General Artist
Divs are containers which can hold more divs and spans, etc. Spans cannot hold divs and spans. They have a smaller scope. I guess that would be a basic explanation of it. I don't really know more than that. Same thing with p class. And you can add class to a lot of different areas. In my current project I'm using h2 class. That way it only effects the h2 that is defined as that class. I could have made it as a div class that contained an h2, but that was an extra container I didn't really need.
Reply
:iconneurotype:
neurotype Featured By Owner Mar 29, 2013  Hobbyist General Artist
Yes we do :giggle:

Huh, so editing iframe is working for you? I've no idea why it's not available for big lit thumbnails, although I can hazard a guess.
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 29, 2013  Hobbyist General Artist
iframe{} worked for the dA film video embed. Not sure if it works for the lit one....

I think it shall be my goal to make everyone start coding for dA embeds! ;D I love it.
Reply
:iconneurotype:
neurotype Featured By Owner Mar 30, 2013  Hobbyist General Artist
Huuuuh. Okay, if you can get it to work on lit, I must know! :eager:

hahaha, it's pretty awesome.
Reply
:iconlintu47:
lintu47 Featured By Owner Mar 29, 2013  Hobbyist General Artist
Congrats for the effort to compile such a great resource :clap:
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 29, 2013  Hobbyist General Artist
Ha, thanks. Amazingly, I wrote it all super fast and submitted it too early, had to put back into my Sta.sh to hide it ;P Thank you.
Reply
:iconlintu47:
lintu47 Featured By Owner Mar 29, 2013  Hobbyist General Artist
As long as you know these so well as you do no wonder you wrote it fast :happybounce:
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 29, 2013  Hobbyist General Artist
:giggle: Yea, well, can't help it. I love coding. So have learned a lot since I started on dA.
Reply
:iconlintu47:
lintu47 Featured By Owner Mar 30, 2013  Hobbyist General Artist
:squee:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 29, 2013
:clap:
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 29, 2013  Hobbyist General Artist
:D I accidentally secretly posted this when I first wrote it. Only one person naw it :giggle:, it was ^neurotype! haha. There is more codes for the dA embeds though. I need to practice with these more :nod:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 29, 2013
Haha, can happen :B
One day i will give those a try as well!

btw what is this "Artist comment" that you highlighted at the top? Am i missing something, because i have no idea what it is or where it comes from D:
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 29, 2013  Hobbyist General Artist
It is the artist's description. When you go to edit (an installed skin) you will see those links at the bottom (where the share option is). Clicking artist's comment gives you the description the artist wrote up so you don't have to go back to the original deviation. I included a screenshot of it since I figured a lot of people may have never seen this and found it useful. Most people probably just go back to wherever they got the skin from and read the instructions.
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 30, 2013
Was already explained. Guess i never saw it before, because i don't install that many other skins or check for such options. Good to know that it is there though.
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 30, 2013  Hobbyist General Artist
Yea, saw that after I replied ;P It needs to be more common knowledge. I only found it because I poke around at stuff.
Reply
:iconicefire8521:
icefire8521 Featured By Owner Mar 29, 2013  Hobbyist General Artist
The artist comments? When you click edit skin, at the bottom, if you downloaded a skin, you can check out the artist comments from the deviation you downloaded it from at the bottom.
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 29, 2013  Hobbyist General Artist
Ah, you beat me to it, I answered any ways ;D
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 29, 2013
Ah ok, don't install that many skins or look for such infomation :lol:
Thanks for telling me!
Reply
Add a Comment: