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:
farand Featured By Owner Jul 6, 2012
Oh, to live in a pineapple!
Wiggsly Featured By Owner Jul 6, 2012
super fancy llama house
deviantART muro drawing Comment Drawing
miontre Featured By Owner Jul 6, 2012  Hobbyist Photographer
:iconfancy-plz: Fancy!
Wiggsly Featured By Owner Jul 6, 2012
3K-more Featured By Owner Jul 6, 2012
I AM YOUR FELLA! :icondarthvaderplz:
deviantART muro drawing Comment Drawing
Arichy Featured By Owner Jul 6, 2012  Hobbyist General Artist
House with a lot of symbols? :giggle: Find them all! :la:
deviantART muro drawing Comment Drawing
neurotype Featured By Owner Jul 6, 2012  Hobbyist General Artist
lives inside my computer :shifty:
deviantART muro drawing Comment Drawing
Arichy Featured By Owner Jul 6, 2012  Hobbyist General Artist
yay :3
neurotype Featured By Owner Jul 8, 2012  Hobbyist General Artist
miontre Featured By Owner Jul 6, 2012  Hobbyist Photographer
..... :B Fella's house! :dummy:
deviantART muro drawing Comment Drawing
Firepoppy Featured By Owner Jul 6, 2012  Hobbyist Digital Artist
i bet you live in a straw hut, hmm? on a carribean island.
deviantART muro drawing Comment Drawing
farand Featured By Owner Jul 6, 2012
I've always imagined you (Fella) living in a little teapot. :aww:
deviantART muro drawing Comment Drawing
Coalonfire Featured By Owner Jul 6, 2012  Hobbyist General Artist
Am I allowed to use Fella to create a montage piece of deviantart?
0toto Featured By Owner May 29, 2012  Student Digital Artist
Heey what gives?! D':

How come the page buddies are disabled?!
Can someone tell me?
Axel-DK64 Featured By Owner May 15, 2012  Hobbyist Traditional Artist
If Fella was in Brawl, what would his level theme, boss theme, and victory jingle be?
Add a Comment: