Shop Mobile More Submit  Join Login


Being devious is srs bsns

Hello! :wave: rvmp Welcome to the sixth edition of 'Teach Me, Senpai!' here at fella. If you're unfamiliar with what this is, it's essentially a monthly feature of tutorials, made by deviants, explaining individual tasks, which then come together into one whole project. This month, we'll be making a journal skin! La la la la

The Basics

Project Educate: User Friendly Journal SkinningThis 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.

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 firs
DA journals CSS tutorial by barninga CSS Tricks: Journal break-downThis has been done before by many others :dummy: I don't want to step on anyone's toes, I just wanted to give this a go myself :)
If you still write CSS NOT using gruze … stop that! Start using gruze. Just do it!
There are a few "hacks" that you will need to make it work totally under your control, but there's always help with those :XD:
Well, here comes help with those hacks :la: (I gotta give ginkgografix credit for some of it, go hug her! That's an order :evileye:)
At the end of this CSS Trick I will provide you with a template, that I use myself, as a base for creating new skins. It will only contain the basic classes of the journal deviation, from which it is made up of, the basic HTML, without any content.
Beforehand explanation
Now, I know you will say: but that is not the default skin! That is not how journals without CSS look like! And you are right. But. There is always a but. But the default journal skin for coders is not the same as an unsk
PE: CSS3 101 - Pseudo Elements/Classes

Table of Contents
This article has two major topics:
1. Pseudo-Elements
::first-letter :dalogo:
::first-line :dalogo:
::selection :dalogo:
::before and ::after :dalogo:
2. Pseudo-Classes
Dynamic pseudo-classes :dalogo:
:nth-child(N) :dalogo:
:last-child :dalogo:
What's the difference between Pseudo-Elements and Pseudo-Classes?
Pseudo-Elements are used to address sub-parts of elements. They should come after any class or ID names found in the selector ex: p::first-letter where p is the element and ::first-letter is the sub-element. Pseudo-elements are usually static and can be used for common typographic effects such as caps and fonts. They can also address generated content that is not in the sour
Journal CSS for Beginners by smokin9mirrorsABC of dA CSS - Part 1 by ginkgografixJournal Skins for Dummies Part 1 by SimplySilent


CSS Tricks: Background ImagesToday's CSS Trick will be about using background images in Journal Skins.
There are three types of images that are mostly used in journals skins: big background images, seamlessly repeatable patterns and icon/logo-like images.
Images can be used for all elements of a journal: in the header, footer, behind text, next to text etc.. Any journal element has the ability to contain an image
I cannot stress enough that the main objective of a journal is making written content enjoyable to read. It is all about readability and making it as easy for the reader as possible. Very often I come across pretty journal skins, that have a complete lack of readability. In one of my previous CSS Tricks I already mentioned the dangers of text lengths and how to limit the .text width to improve readability.
Problems with using images:
Despite being big an images turns out to be too small for a journalAn image does not repeat seamlesslyText becomes non-re
dA CSS - image height+width by kuschelirmel-stockSeamless Patterns and How to Use Them With CSS by fantasy-alive Let's code! Background PropertiesIntroduction
Custom shapes and images are an integral part of any journal skin. They can include buttons, icons, header backgrounds, dividers, textures - sometimes the whole design is one big, sliced image artwork with a text area so one can rightly call it a journal skin. Other times the custom image usage is low or non-existent, and you wouldn't believe how coders make their skins rock anyway (or because). In this Let's code! I'm going to address the different background properties and their values.
1. The Background Property: Structure
        1.1 background-color
        1.2 background-image
        1.3 background-repeat
        1.4 background-position
            + a nifty tip
        1.5 background-attachment
        1.6 Shorthand Form
1. The Background Property: Structure


Skeleton Journal With Comments/*--------------------------------------------------------------------
Blank Journal (gets rid of all tiny images and preset backgrounds, borders, margins & paddings)
* {background: transparent; border: none; margin: 0; padding: 0;}
.gr-top img, .gr1, .gr2, .gr3, .tri {display: none;}
a {font-weight:normal;}
a.external {text-decoration:none!important;}
a.external:after{display: none!important;}
Journal Design overall (you can put font, background colour, border etc for the whole journal in gr-box -- the other tags are optional to style, but as they work with the menu it makes sense to include them)
.gr-box {}
a {}
a:hover {}
blockquote {}
h1 {}
h2 {}
h3 {}
h4 {}
ul {}
ul li {}
ol {}
ol li {}
Mini Thumb Gallery Code Snippet by SimplySilentCode Basics: Hover Menu by ginkgografixCode Basics: Sidebar- Floating by ginkgografixCircular Lit and Visual Thumb Snippet by im-not-sanaColumns Snippet: Equal Height and Width by im-not-sanaBasic CSS Journal Template by quinnypin


!CSS Fonts: NormalAll Browsers
The following fonts would display in all browsers you use. (Title Font: 28px, Normal Text: 12px)
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Stencil Std;
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Trebuchet MS;
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Arial Black;
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
CSS Tricks: Fonts and Text BasicsToday I want to talk about fonts in journal skins :XD: You probably saw this one coming :giggle: And maybe you also saw coming that this will be a rather long tutorial :faint: There is just a lot to say about this! Actually this will only be the first one about fonts and text. This one will cover the basics of working with fonts.
I will start by talking a bit about web-safe fonts and the concept behind a fallback hierarchy. Further down you'll find a selection of properties that can be styled with examples and explanations.
So, let's go! :eager:
The standard web safe fonts
A font is defined as web safe when it is installen on a great number of user's computers. They are also called system fonts, and can vary depending on your PC. Fonts on a Mac OS are not necessarily the same as fonts on a Windows OS.
Here's is a little example: on the left side is an image, an image created in PS on the right side. If both sides look the same, or at least very similar, it means they a
dA Font Formatting Guide
To READ this with a Fancy Layout WITH source code, see
Did YOU Know that you can use the < font > tag in boxes, journals, descriptions, and in litterature?
Well, yes you can! No Premium Membership REQUIRED!
To prove my point, :eyes: below!
The Tag
Did you enjoy the awesome presentation of the "Test." text above? Well, here's the source code:
<font face="Droid Sans" size="9">Test.</font><font face="Arial" size="3">Test.</font><font face="Tahoma" size="1">Test.</font><font face="Oswald, Droid Sans, Lucida Sans Unicode, Arial" size="5">Test.</font><font face="Brainly, Nunito, Testt, Times New Roman" size="4">Test.</font><font face="Helskini, Klavika, FF Me

Fancy Bits

TUT: Using CSS Scroll Boxes by TaleiEdit 'Skin Header' and 'Skin Footer' by ginkgografix CSS: Element PositioningI'll warn you in advance, this is not a reference for every available position value in existence, it's about
position: relative;
position: absolute;

Why do you want to assign any position value to an element? Because you don't have much of a choice in the matter. See, position has a set default for when you do not specify the property, so it's specified whether you like it or not. The default is static, which means that every element follows the document flow if not otherwise stated. You can try and move an element by using the top, bottom, left, or right property, whichever - your static element won't budge an inch. That's when you'll want to use absolute and/or relative positioning. By giving position either of these values, you'll be able to move an element and position it.
The main difference between the two is that absolute disregards every other element in your document. It is disconnected from the document flow, so to speak, which comes in handy when you have an element
Let's code! Pushable ButtonsIntroduction
You all know buttons, because buttons are everywhere. We mostly take them for granted. They are there to direct us to somewhere else and God protect a button that doesn't do exactly that. We rarely give them a second thought, despite the fact that the appearance of a button is as much a design choice as any other element; a button can make or break a design.
Small advice: Simple (or rather: easy to navigate) is the new black. We established that buttons are part of that equation. It is my experience that buttons in journal designs aren't that highly sought after. People want them for their function, and even then rarely use them. Myself, I love to make buttons for one simple reason: It's a tonnage of fun.
What we'll be doing
The button base
Hover and active states

1. What we'll be doing
This CSS button.
Kidding. We'll make a spiff one. I'll elaborate. We will mak
PE: CSS3 101 - Transition Animations

Table of Contents
This article has four main topics:
Transition-property :dalogo: |
Transition-duration :dalogo: |
Transition-timing-function :dalogo: |
Transition-delay :dalogo: |
:dalogo: - Works in dA for All Members
:dalogo: - Doesn't work in dA for Premium Members
- Works in dA for Alpha Testers at devBUG
What is a Transition?
This time, I'll explain with an example. Let's take this awesome emote  by jahw.
When I see that emote, I'm imagining it saying "CHAAAARGE!" and running forward! So I want to make the emote do that, but instead of opening it up in Photoshop to animate (which I'm not allowed to do anyway since it's not my work), I'm just going to add a simple code that will do the animation for me! Hover over the emote below to see this magic in action!
PE: CSS3 101 - Color Gradients

Table of Contents:
This article contains two major topics of Gradients:
1. Linear-Gradient :dalogo:
Vertical :dalogo:
Horizontal :dalogo:
Diagonal :dalogo:
Angled :dalogo:
Repeating-Linear-Gradient :dalogo:
2. Radial-Gradient :dalogo:
Repeating-Radial-Gradient :dalogo:
Supported by:
Firefox 16+
Chrome 26+
Safari 5.1+
Internet Explorer 10+
Opera 12.1+
What are Gradients?
A color gradient, in terms of comput
CSS: CursorsAll Browsers
Internet Explorer (Only)
Firefox | Flock | Safari | Opera
Hidden cursor for Firefox only!
CSS Snippets: Wrapped Header:iconikue:
CSS { Snippets : Wrapped Header }
Welcome to the first installment of my CSS Snippets journals. I've had a lot of questions over the years about how I create/achieve some of the elements in my journal skins so I thought I'd try my hand at a tutorial of sorts for the different elements I find fascinating and some of the work arounds needed to make them function properly when limited by deviantART's  journaling system. Although, "limited" doesn't feel like the correct word. To me it's more of a challenge and to persevere through it really gives me a thrill I just can't explain. It's not really a limitation as it forces one to think outside the box and hopefully when you get it just right, you'll get that same thrill.
I had originally planned to start these journal tuts after the new Journal/News system and Writer had been launched. I think showing you live what happens when C

As always, suggestions for future projects are appreciated, and I'd love to see your results! :la:

This fortnight's media: MANGA & ANIME!

fairy by dead-robot Lazy Lady by SilentHome
. I fell in love in April . by Nanahii Music of Sakura by Kenneos Rain (Comm) by KinanFuntom23nyan
Ami by Kotikomori Night Hail by luien
Creperie Toutatis Delices - Mytho Fanart by giz-art 6619120472352184776 by CuoZ
.:. Shine Like the Stars .:. by StephanieRosario | U n e x p e c t e d F l o w e r | by Emy-san Magic by Naussi
[SM] Sleep by tshuki imperial sol by Seo-Yeong-Hee
Winter Butterfly by Eranthe Commission: Koro and Major by Lovepeace-S Ducking by Na0h
El Necio by AlixR Generator No.90 by harousel Alice in the Wonderland by TiRaPuW

Challenges Around DeviantArt

Mon May 18, 2015, 1:32 AM

Contests, projects and challenges around deviantART to inspire your creations and to give you the opportunity to win some goodies! :dummy:

CRFractals Monthly Challenge: May 2015 hosted by CRFractals

May Monthly Challenge: Sci-fi and Space hosted by Digitalists

M/A Repeating Contest: May 2015! hosted by MARepeatingContests

Animal of the Month hosted by Wildlife-Awareness

The Deity Prose Contest hosted by AlexanderPaupoff :new:
  • Medium: Literature - Prose
  • Registration deadline: June 7th
  • Submission deadline: June 28th
  • More information...

dAWishingWell Mascot Contest hosted by dAWishingWell

Host a contest, project or challenge?

If you are currently running a contest, project or challenge and would like fella to promote it for you, please send us a note with the following information:
  • Title of your contest/project/challenge:
  • Hoster(s):
  • Medium:
  • Deadline/Running time:
  • Contest, project or challenge information journal link

More Journal Entries

Recent Journal Entries



Add a Comment:
MikaMilaCat Featured By Owner Dec 5, 2014  Hobbyist Digital Artist
Success fella (Reactions) winker Fella (Reaction) I Heart deviantART Gear fella (Badges) 
Tye2000 Featured By Owner Nov 9, 2014
Fella! Why 
pigiama Featured By Owner Oct 31, 2014  Hobbyist General Artist
Hi! I asked the same question to DeviantArt HQ group and heidi, but no one replied :( Isn't DeviantArt going to plan something special for Halloween? Last year there was the Mystery Murder challenge with the fairytale characters which I enjoyed very much, so I was looking forward for something similar this year, but so far......nothing. Should I assume there will be nothing for Halloween?? :( :( :( 
cinyu Featured By Owner Nov 2, 2014  Hobbyist Digital Artist
Hey! On Halloween there were chat and forum events hosted by Community Volunteers: Click here for schedule
We also have one contest hosted by CVs that's Halloween related: Honey, We're Getting a Monster
Gnasvipzem Featured By Owner Sep 20, 2014  Professional Digital Artist
There is no more monthly contest? :(
iDJPanda Featured By Owner Sep 28, 2014  Student General Artist
We are currently working on it. :)
Jenny345 Featured By Owner Sep 15, 2014
Fella is an awesome mascot.
jaegershark Featured By Owner Aug 20, 2014  Hobbyist Filmographer
vry srs bsns indeed B)

I'm sorry but the tagline somehow amused me with the 'srs bsns' part x'D
Gnasvipzem Featured By Owner Aug 19, 2014  Professional Digital Artist
And happy birthday Fella, thank you and love youuuu I love deviantART! I love deviantART! 
Thanks so much for hard work
Gnasvipzem Featured By Owner Aug 19, 2014  Professional Digital Artist
May i ask where was monthly contest of Fella this August? I was really hope for it :(
Ehsartem Featured By Owner Aug 10, 2014  Professional Digital Artist
Thank you for choosing my works :D (Big Grin)
Rockstar Fella wink Fella fella thinking Repairman Fella Study fella fella Gift Success fella fella postman The timed fella crying fella Nothing fella dance fella 
XxTaraTheChibixX Featured By Owner Aug 7, 2014  Student General Artist
 Happy Birthday!  Sini Birthday 
CherubFeet Featured By Owner Aug 7, 2014  Hobbyist General Artist
Add a Comment: