Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconmiontre: More from miontre


More from deviantART



Details

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

Stats

Views
51,626 (50 today)
Favourites
3,027 (who?)
Comments
1,067

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×

Do-It-Yourself Journal Skin

Fri Mar 22, 2013, 12:40 PM


Do-It-Yourself Journal Skin

Get into Journal skinning by learning how to create your own Journal skin in this tutorial!

Written by miontre for dA Related Week in projecteducate


Jump to resources


Heya everyone! :la: In this tutorial, you'll be learning how to create your own Journal skin on deviantART. This tutorial takes a "Do-It-Yourself" or "Assemble-It-Yourself" type approach. I've pre-created a design, and it's up to you to put it together and customise it - with instructions, of course! :D

Note that you need a Premium Membership to use Journal skins! :)

This tutorial is aimed at anyone who is interested in starting to create Journal skins on dA using CSS. Those who don't know anything about CSS yet can follow along, and hopefully learn something along the way! Those who are beginners with CSS can learn how to turn a design into code, and how to use CSS to create a Journal skin on deviantART - hopefully some new CSS can be learned, too. This tutorial assumes you have some basic knowledge in things such as colour hexes and shorthand such as px for pixels.

For those who don't know, CSS is the code used to style webpages, or HTML. deviantART allows us to use it to customise our Journal skins. CSS code is very simple to work with, and easy to get the hang of. It is often a lot of fun, but as with anything it can become frustrating when it doesn't work how you want it to! :giggle:
An HTML page (or webpage), is made up of many different "elements" - using CSS, you can assign properties to these elements to affect how they look. When making a Journal skin, we use CSS to style the HTML layout for Journals made by deviantART. We can also add our own HTML, to give it a more unique touch.

Let's jump right in. Here's the design we're going to create:



It'll be up to you to select colours, fonts, basic layout options, and other options in order to make the skin your own! :nod: If you'd like to see some possibilities, jump to the bottom of the page!

Setting up a blank skin

To start with, you need to open the editor and create a new skin. Click Change skin if you're in Sta.sh Writer (it's hidden down the bottom right). Select the default skin, and click Edit skin. A window with four blank text boxes should open. The top one, which isn't labelled, is for the title of your skin. You need to title a skin before you can save it, so just write anything in there for now so that you know what it is in your list of skins. You can come up with a proper name later. The second field is labelled Skin Header. In this area, you can create some custom HTML which is inserted directly before the Journal's text. The third field, which is the main field for creating Journal skins, is labelled Skin CSS. This is where we'll be working to modify the CSS for our skin. The final field is labelled Skin Footer. This is the same as the header, only the HTML is applied after the Journal's text.

When you create a piece of art, you start with a blank slate. The same is true for Journal skins! We've got to cancel out the CSS styling of the default skin, so that we can start fresh on ours. Type this line into the Skin CSS section:

* {background: transparent; border: none; margin: 0; padding: 0;}

To begin with, the * selector selects every single element in the skin. This allows us to change every single element at once, rather than a specific set of elements. Here, we've set all backgrounds to transparent, gotten rid of all borders, and set all margins and padding to nothing. This results in a completely blank skin. Over time, you'll come to remember this line by heart! :D

The next step is to delete all the elements we don't want to use. Technically, we are actually just hiding them, but in effect they are "deleted". There is one obvious one, the little Journal image next to the title, but there are also a few hidden ones. The elements you choose to delete will change from skin to skin. Check out this useful resource to see what elements are available and which ones we're hiding. On a new line, type this into your CSS:

.gr-top img, .gr1, .gr2, .gr3, .tri, .hsep, .prevlink, .list {display: none;}

Let's break that down! The period before each piece of text allows us to select by class (an attribute given to HTML properties). The commas allow us to select multiple classes, or elements, in one go; so that we don't have to create a new line for each one. Note that img doesn't have a period before it - this is because we are selecting by type rather than class. In this case, all img elements. An img element is used to display an image - can you guess what that is?. That's right, .gr-top img selects the little image of the Journal next to the title! The .list selects the moods list - sorry! These are a hassle to code  and I've decided not to include them in this tutorial :lol: At the end though, you'll hopefully have the skills to customise it yourself. :)
Finally, the display: none; property at the end hides all the selected elements.

Note:OThe structure for a line of CSS works like this:
selectors {properties}
In other words, you select all the elements you want to style and then place the properties inside brackets.

There's just one more thing to do before we're ready to start working - a small indention is made to make space for the Journal image next to the title. Since we just removed this, we want to get rid of the indentation. This'll do the trick (add it on a new line to keep things tidy):

.gr {padding: 0 !important;}

Throwing an !important into a property will cause it to override other properties. More specific selectors will cause those properties to have a greater priority in affecting the styling of a certain element. For example, the first step we took was making all backgrounds transparent - we'd be stuck if this were to mean we couldn't change backgrounds later on for individual elements. By selecting a more specific element, greater priority is given to the properties you pick for it. Sometimes though, you'll want to override this. Adding !important at the end of the property will do this.

Finally, we've set up a blank skin, ready to be styled! :la: It should look like this when previewed:



Background and border

The first thing we'll do towards making our new skin is create a background for the rest of our journal, and add that pink border. This is the part where I encourage you to be really creative - the options you choose here will be the grounds for the rest of your skin! :)

To create the border, we won't be using the border property as you might expect. Instead, we'll put a pink background on the base element of the journal (the one which contains it all). Then, we'll give the next element in the tree of the journal structure (which also contains everything) a light background, and make sure a little of the pink shows through. To finish up, we'll add some shadows and borders to get the right effect. The reason for doing this instead of using the border property is that you can't get the effect we're after using just a regular border.

To start with, let's add the pink background. It would be a good idea to add two line breaks this time, instead of just one. This helps to keep your code tidy so that you can find your way around later.

.negate-box-margin {background: #E34869;
 border: 1px solid #B92D3C;}

.negate-box-margin is the base HTML element in a Journal skin. The only thing you can really use it for is to easily add a second background or border to your skin, but I'm sure you could think of a few more creative uses. There is a second containing element inside .negate-box-margin which we'll look at later.

The background property allows us to pick a colour for the border. I've selected #E34869 as my colour, as I'll be following the colour theme of Community Relations. However, I want you to pick your own colour! Anything can look good, really, so go crazy with it! ColorPicker.com is a useful quick online colour picking tool.

Pro Tip!:lightbulb:To add extra personality to your skin, try using a pattern image as your background! A few good places to look are in the deviantART Textures gallery and on Subtle Patterns. Just make sure you credit the stock owners - I'll instruct you on how to do that later. This code allows you to insert a repeat pattern to your background:
background: url("Image Url Here") repeat;

The border property allows us to add a small border to the "border", to improve aesthetics. I understand this part can be confusing. Remember we are creating a border for our skin by adding a background to an element behind the rest of the Journal, and allowing a bit of it to show through. Technically, we're picking a background colour for what will be the border. The technical border we're adding now allows us to add a bit of decoration. 1px defines the thickness of the border. I wouldn't personally go higher than this, but you can experiment with higher values to see if you like those better. solid picks a border type - CSS has a few different types of border. Other useful ones are dotted and dashed, but I find that a solid one is best for what we're aiming to do. You can find a list of other types here. As for the colour, pick something which matches your background! :D

Take a quick preview of your skin, and check that it looks somewhat like this (only, with your own colours of course!):



It doesn't look all that great for the time being. :lol: We're going to leave the border for now, and get back to it shortly after starting on the main body of the Journal. ;)

Setting up the main body

The next step is to create the main body of your Journal. Once this is added, the background you just added will appear to be a border. Add this to your code (once again, adding two line breaks):

.gr-box {background: #E6E6E6;
 margin: 6px;
 padding: 12px;
 border: 1px solid white;
 box-shadow: 0px 0px 2px 3px #E43A5D;}

You'll need to edit some colours here to match with your border, but we'll get to that later. .gr-box allows us to select an element within .negate-box-margin which contains the entire Journal. background: #E6E6E6; creates a nice light (but not too bright) background colour. You might like to pick a dark colour if your border is a light one, or if you'd just like a dark skin. margin: 6px; creates a six pixel margin all around the element - that is, blank space outside it. When used, this allows some of the coloured background to show through, giving the effect of a border. You can adjust the px value depending on how thick you'd like the "border" to be. padding, the next property we use, works much like margin, only it adds space inside the box rather than on the outside. This is used so that the contents of our Journal aren't all squished up close to the edge. Once again, you can adjust the pixel value to suit your preference. Next, we add a technical border, which once again serves for aesthetic purposes. As you can see, we're creating a one pixel thick solid white border. I've picked white as a lighter shade of my background colour - if you decided to use a darker background colour, you'll need to pick a slightly lighter (or darker?) tone than your background.

Finally, by using the box-shadow property we can cast a nice shadow from the element, which adds some depth to the border (makes it look as though there is a slight gradient). According to personal preference, you might want to remove the shadow (simply erase the line of code). Otherwise, you'll see that there are four pixel values and a colour value. The first and second pixel values affect the x-axis and y-axis offset, respectively. The third pixel value affects the blur or softness of the shadow. The fourth pixel value expands the shadow (so that it's bigger than the element by three pixels). The colour value of course selects a colour for the shadow. Obviously you'll need to change this, selecting a colour which is slightly darker than the colour of your border (in other words, the background colour you put on negate-box-margin). Here's how your skin should look now:



Now that the flesh and bones are looking better, we can move onto the real fun - picking text colours and fonts! :woohoo:

Customising the title

The first part we'll customise is the title, and work our way down. The title area a Journal works with an element called .gr-top, which contains h2 and a HTML elements for the title and a span HTML element for the timestamp. To get started customising the title, add these lines:

/* -- HEADER -- */
.gr-top h2 {font-family: serif;
 font-size: 20pt;
 font-weight: normal;
 color: #E34869;}

.gr-top a {color: #E34869;}

That strange /* -- HEADER -- */ is called a comment. In CSS, we can use comments to organise our code so that it is easy to work with later. Nothing written within a comment will affect your code. To create a comment, simply type /*, followed by the text you want to comment, and then closed with */.

.gr-top h2 selects the title. Remember that a selector such as h2 without a period before it will select all elements of that type, rather than elements with that class. Combining two selectors (in this case, .gr-top and h2) will select elements which fall under both the selectors.

The font-family attribute allows you to pick a font for your text. The only truly safe fonts to use online are sans-serif, serif, and monospace. You'll have to experiment with each to see what they do. However, if you want to pick an exact font, you can put it's name inside quotation marks. For example, font-family: "Ubuntu"; would display text in the font Ubuntu. Keep in mind however that it'll only appear to people who have the Ubuntu font installed on their computer. CSS allows you to choose a backup font in the case that your chosen font isn't installed. Simply separate fonts with a comma to do this. For example, font-family: "Ubuntu", sans-serif would make sure that the font sans-serif is put into use in the case Ubuntu isn't installed on a users computer. Thankfully, there is a safe way to pick more unique fonts. The only way we can do this on deviantART is through the use of Google Webfonts, an ever-growing collection of fonts to use online. I won't go into detail on how it works - but it's incredibly useful! The deviantART staff have integrated it into the skins system so that we can take advantage of it! Pick your desired font merely by placing it's name in your font-family property (inside quotation marks, of course)! Note that not all fonts are available for use on deviantART, so make sure you have a good backup font ;)

Note:OWhile the fonts sans-serif, serif, and monospace are safe to use online, you'll need to keep in mind that these are not actual "fonts". Each of these are set by the browser by picking a replacement font which is installed on the user's computer. By default, sensible fonts are selected, but they may be slightly different than the fonts you've got selected on your browser. There is also nothing stopping someone from picking crazy fonts which don't make sense. This means that you shouldn't assume the three safe fonts will come up the same for everyone.

The next property is font-size. This allows you to pick a font size. I've picked it in pt, or points, which is the same measurement as you's use on word processing software. You can also pick the size in px if you'd prefer. Pick a font size that you like - play around and see if you prefer big or small sizes! :)
The font-weight property allows you to select the thickness, or the boldness, of your font. You can type in "normal" or "bold" to pick either of these, but you can also use numerical values for different thicknesses. These are usually not available, but fonts like Source Sans Pro will allow you to pick between six different thicknesses! You'll see a number written next to each of these - this is the numerical value you need to enter if you wish to use the corresponding thickness. For example, font-weight: 200; will pick the lightest weight, and font-weight: 900; picks the heaviest.
Finally, color allows you to pick a colour for your text. I just picked the same colour as my skin border, which is pretty ordinary, so I encourage you to pick a more different colour to add flair to your Journal! In order for the title to actually use a colour, you also need to add a separate line, .gr-top a {color: inherit;}. It's just one of the many joys of deviantART's skinning system which you'll have to remember! (Note that inherit instructs the element to use the same value as it's parent element. In this case, it's inheriting the colour from the h2 element).



Now, let's add a little magic to the skin by making the title change colour when you move your mouse over it! Find a colour you'd like your title to take when you move your mouse over it - I'm using a (very) dark version of my original colour, #260110, but as usual I encourage you to use your own creativity and go crazy with it! Add this line of code to your skin (replace my colour with yours, of course):

.gr-top h2:hover {color: #260110;}

Preview your skin and watch the magic in action! :la:

The next step is to make the timestamp match the colour of your skin a bit better. I'm only going to change my colour; but if you'd like to change your font, font size, even the background and padding, then go for it! :D

.gr-top span {color: #A8A8A8;}

Finally, to complete the title and separate it from the Journal body, we'll add a bit of a margin to the entire title area. This can be done by utilising just the gr-top element! Instead of using the margin property, we'll use margin-bottom. This will add a margin to only the bottom of the element, since we don't want a margin around the whole title.

.gr-top {margin-bottom: 28px;}

Note:OCombining margin, padding, or border with -top, -right, -bottom, or -left will allow you to specify the attribute for just that side of the element!

Your skin should now be looking like this:



Customising the Journal body

The next step is to customise the body of the Journal, that is, the area in which you write your text! :D Before we can do this, we need some text we can actually customise. lipsum.com is a useful online tool for generating Lorem Ipsum dummy texts. Give it a go and paste the output into your Journal!

This is the part where you get to pick colours and fonts for your skin. Personally, I'm going to use #1C1B1C for my text colour and I'll stick with sans-serif for my font. For your text colour, I'd advise you pick something which contrasts the background colour of your skin, but not by too much - that means, don't use absolute black on absolute white or vice versa. It just looks bad and is painful to read. And as you did with the title, browse the list at Google Webfonts and see if anything else takes your fancy! Pick a font size too - maybe you want something big and easy to read, or small and compact. But remember that not everyone will be bothered to zoom the page just to read your latest meme journal! :B

.gr-body {color: #1C1B1C;
 font-family: sans-serif;
 font-size: 10pt;}

As you can see, .gr-body selects the body area of the Journal.

Next of all, we'll add some code to make links stand out in one way or another - I'm going to make mine stand out through a different colour, but I encourage you to try something different! Maybe add a "highlight" of sorts using a background colour and a bit of padding? Using just a, we can select all links within the Journal - remember, a selector without a period before it selects all HTML elements of that type. The a element represents links. We also have to add the .gr-body selector, so that only links in the body of the Journal are affected - otherwise your title will be affected too! :lol:

.gr-body a {color: #E34869;}

Add a few links to your Journal (you can quickly do this simply by adding a :dev: link) to see your links in action! Note that this will also affect the comments link. You'll be able to customise that differently later on.

Extra for Experts:brushteeth:Do you remember how to add mouse-over effects using :hover? Can you add one to your links?



Do your own customisation!

You've now hopefully learnt the ropes of the Journal skin, as well as some basic CSS too if you're new to that! There are still more elements in the Journal which you can customise - and I want you to give that a go yourself using the skills you've learnt! :D If you can't remember anything, scroll back through this Journal to find relevant information. Here are some things you could try customising:

  • Headers
    HTML provides six header tags which you can use to create headings to stand out in your Journal. The elements are h1, h2, h3, h4, h5, and h6 - so you can select them just by typing those in without a period! Try experimenting with different backgrounds, borders, padding, margins, fonts, and the like. You can use the headers in your Journal with the HTML code 1>Texth1> (replacing the 1 with the header you want to use).
  • quote>Blockquotesquote>
    Another HTML tag you can use in your Journals in the blockquote tag. It allows you to make a block of text stand out, such as a quote. As with the headers, try experimenting with different backgrounds, borders, padding, margins, and fonts. You can use the blockquotes with the HTML code quote>Quotequote>.
  • Bottom of the Journal
    You can customise the bottom of the Journal using the .bottom selector. This time we're selecting by class, so you need a period before the selector. You can customise the comment link with the selector .commentslink. I'll leave the possibilities up to your imagination!

Here's my skin with a header and a blockquote customised:



Overall my skin is pretty plain! :lol: I'm sure yours is much better. :giggle:

Using and sharing your skin

Congratulations! :party:
You've just created your own Journal skin! With this knowledge in hand, go forth and put all those skin commissioners out of business! ;P In all seriousness, I encourage you to continue learning the dA skinning system and/or CSS if this is something you enjoyed - I hope to see some of your own designs in the Journal Skins gallery some day! :)

If you decided to use a background image created by someone else for your border, there's just one important thing you need to remember, which is to credit the stock owner. First, check the stock owner's rules. Most stock owners don't make their stock in expectation that it'll be used for a Journal skin, so you've got to use your own judgement and try to figure out if you think it'd be okay. You can always send a note to the stock owner and ask if you are unsure. Otherwise, if you feel the stock owner would be happy for you to use their texture or other image, make sure you give them credit for it! You can do this right in your skin by adding a simple message in the Skin Footer section. If you enclose it within a div tag (which is used to create a blank HTML element) along with a class, you'll be able to customise the text to make it look like a minimal credit rather than a piece of text you wrote in your Journal. This is the HTML you could add to your Skin Footer section:

Texture by :devStockProvider:

Remember that you'll need a period when selecting the element, since you're selecting by class rather than by element type - but you probably already knew that! ;P

Your skin is now ready to use! If you're really happy with your final result, and want to make it available for others to install, click the Sharing button in the skin editor and follow the instructions there! Please credit me in your Artist's Comment / Description with a link back to this tutorial though, since I made the base design. :)

Have fun! :heart:

Oh - and I'd love to see your finished designs! Feel free to leave a comment here linking to your Journal! :la:
If you're still stuck for ideas, here are some to get you started:

Back to top


Fonts: Montserrat and Open Sans


Texture: Subtle White Feathers on Subtle Patterns
Fonts: Enriqueta and Inika


Texture: Vintage Wall Paper Texture by MGB-Stock
Font: Oswald


Texture: Cat Lady Pattern by pronouncedyou
Font: Oswald

Back to top



Resources:

Here's a quick compilation of all the resources I linked to in the tutorial:
Journal HTML layout (list of classes)
colorpicker.com - online colour picker
List of border styles
Google Webfonts
lipsum.com - Lorem Ipsum dummy text generator



Get into Journal skinning by learning how to create your own Journal skin in this tutorial!
Add a Comment:
 
:iconnikhero:
NikHero 4 days ago  New member Hobbyist General Artist
Thanks!
Reply
:iconsapphire-x-dreams:
No matter how many times I keep adding the "text-align: center;" code to align my timestamp it doesn't work. I put it right under 

.gr-top span {color: white;
font-family: Verdana;}

but when I preview, the timestamp is still on the left. Help?
Reply
:icontomysshadow:
I know it's only for premium, but when I went on free premium I got three textboxes - which one does the CSS go in?
For a matter of fact I do know CSS, so this tutorial makes a little sense. Although it still doesn't make any sense why there isn't any documentation on the different class names, ids and elements involved.
Reply
:iconithermi:
ithermi Apr 9, 2014  Hobbyist General Artist
How do you change the font to oswald? Where would I do that?
   - Thanks!
   - Yes, I am aware that only Premium Members can use them c:
      I'm just designing on for the fun of it!
Reply
:icontomysshadow:
CSS uses font families: serif, sans-serif, monospace, cursive, fantasy. Setting it to serif means the font will be the kind that has lines coming out of it, like what's usually used in print. Sans-serif means it'll be a font with no lines coming out the letters, like Arial or Verdana, and is most commonly used on the web. Monospace means all the letters have the same width, like Courier New. Cursive will be a cursive font, and fantasy will be a font that looks like it's from LOTR or something. The name of the property is font-family.

.gr-body {
font-family: serif;
}

As for specific fonts, you have two options. If you are to assume the person reading that journal has that font installed on your computer (like if it is relatively common), enter the font's name in quotes the add a comma, then describe what type of font family to use if that doesn't work.

.gr-body {
font-family: "Oswald", serif;
}

If the user does not have the font installed, CSS3 has a feature called font faces. This allows you to use a TTF, WOFF, EOT or SVG font hosted on a website as the font.

/* -- Fake url, you'll have to find or host a ttf yourself -- */
@font-face {
    font-family: Oswald;
    src: url(myfonts.com/Oswald.ttf);
    font-weight:400;
}
.gr-body {
font-family: "Oswald", serif;
}

For more info, visit www.font-face.com/
Reply
:iconithermi:
ithermi Apr 9, 2014  Hobbyist General Artist
Thank you so much! <3
Reply
:iconsunnybunny1199:
sunnybunny1199 Apr 7, 2014  Hobbyist Digital Artist
I was really confused after "Do your own customization!", and when I preview my skin it's blank and short, even though I've entered what you told me to enter into CSS and filled in colours, sizes, and url's. :/
I guess I won't be able to use it anyways, since it's almost midnight for California and I don't normally have a premium membership or points to buy one... I'll try other codes and see if they work. :(

Thanks for writing this, though!
Reply
:iconfinitevuslienda:
I'm pretty stuck.:( (Sad) 
Reply
:iconseiuneko:
Seiuneko Apr 7, 2014  Hobbyist General Artist
Yaaaaay c: I got the hang of this
... the only thing I can't work out is that now the thingymabobs that usually appear at the bottom (e.g. mood, listening to, eating, etc.) won't come back to me :<
Reply
:iconazurakittyartist:
azurakittyartist Apr 7, 2014  Student Digital Artist
i did not understand a thing ;-;
Reply
Add a Comment: