Shop More Submit  Join Login
×

:iconsimplysilent: More from SimplySilent



More from deviantART



Details

Submitted on
July 7, 2013
Image Size
1.4 MB
Resolution
802×6537
Link
Thumb
Embed

Stats

Views
8,719 (12 today)
Favourites
751 (who?)
Comments
173
Downloads
61
×
Journal Skins for Dummies Part 1 by SimplySilent Journal Skins for Dummies Part 1 by SimplySilent
Here is Part 1 of Journal Skins for :dummy:s. Sorry it's so obnoxiously long. ^^; Here's the Live Version of the journal.


:star: Do make sure to check out miontre's Do-It-Yourself Journal Skin article as well as ginkgografix's Old vs Gruze Journal guide. The layout we're using in this skin is the gruze layout, so be sure to take a look at that one.



Step by Step


Here is all the code used in the tutorial. Only the new codes that are added with each step are shown, and the final journal skin with everything put together is at the bottom.

1. Getting Rid of the Junk:

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

.gr-top img {display: none;}
.gr {padding: 0 !important;}
li.a.f {background:transparent;}


2. Adding Background Colors:

.gr-top{background: #4fbcbd;}
.gr-body{background: #eee;}
.text{background: #fff;}


3. Changing Text Colors:

.gr-top h2 a{color:#fff;}
.gr-top .timestamp{color: #fff;}
h1{color: #4fbcbd;}
h2{color:#4fbcbd;}
.commentslink {color: #4fbcbd;}


Note! If you want to be fancy, you can also add .gr-top h2{color:#ffffff} to your code. This makes the title white when you type it into your journal.

4. Formatting Text:

.gr-top{text-align:center;}
.list{text-align:center;}


5. Adding Padding:

.gr-top{padding:40px;}
.gr-body{padding:30px;}
.text{padding:40px 30px 20px 30px;}


Note! Alternative way to do padding (these can be in any order btw)

.text{
padding-top: 40px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
}


6. Adding Margins:

.text{margin-bottom: 20px;}
.list{margin-top: 20px;}




The Full Skin:


Mostly in order of how the tutorial progressed. This can be copied and pasted straight into the CSS box in the journals for you to use and modify as you wish.

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

.gr-top img{display:none;}
.gr {padding: 0 !important;}
li.a.f{background:transparent;}

.gr-top{
background: #4fbcbd;
text-align:center;
padding:40px;}

.gr-body{
background: #eee;
padding:30px;}

.text{
background: #fff;
padding:40px 30px 20px 30px;
margin-bottom: 20px;}

.gr-top h2 a{color:#fff;}
.gr-top .timestamp{color: #fff;}
h1{color: #4fbcbd;}
h2{color: #4fbcbd;}
.commentslink{color: #4fbcbd;}

.list{
text-align:center;
margin-top: 20px;}




Journal Creator


Is all the code making your head hurt? If you're more interested in creating a custom journal skin rather than actually learning the code, you can try my DeviantART Journal Creator. Just plug and chug, and you'll have your very own skin!


Got any questions? Feel free to ask below! :giggle:
Add a Comment:
 
:iconitutorialsyt:
iTutorialsYT Featured By Owner Oct 20, 2014  New member Hobbyist Digital Artist
Hi, this may sound a little bit stupid but, How can I Put the skin xD Sorry for beeing so ignorant :/
Reply
:iconrarasobak:
RaraSobak Featured By Owner Edited Oct 18, 2014  New member
Is there a way I can change the text color?

EDIT: Nevermind! I figured it out<3

THANK YOU FOR THIS LOVELY TUTORIAL
Reply
:iconrebekahkroeplin:
RebekahKroeplin Featured By Owner Sep 22, 2014
I'm trying to get rid of my ENTIRE header, not just the journal icon, etc.  Can you help?
Reply
:iconsoundtheanthem:
SoundTheAnthem Featured By Owner Sep 21, 2014  New member Student General Artist
This is awesome!
Reply
:iconspiritspixels:
Spiritspixels Featured By Owner Sep 14, 2014  Hobbyist Digital Artist
this tutorial is great!
i made this!
spiritspixels.deviantart.com/j…

i figure out how to change the font and font-size by myself!
Reply
:iconaricy:
Aricy Featured By Owner Sep 5, 2014  Student General Artist
Do you know how to add images to your journal skin? Like where it's at the top by the heading or at the bottom by the comments thingy?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Sep 5, 2014
The easy way is to stick the image code in the header or footer part of the journal skin (the top and bottom boxes in the CSS editor pop-up window)

<img src="IMAGE URL">
Reply
:iconaricy:
Aricy Featured By Owner Sep 5, 2014  Student General Artist
Thank you so much! :D
Reply
:iconv-for-vincent:
v-for-vincent Featured By Owner Aug 27, 2014  Hobbyist General Artist
BIG question here (and sorry to sound like a dummy but I've just learnt some HTML/CSS):
So, for the DA journal skin, do we require the whole HTML coding with divs, ps etc, or is it just the CSS coding with ids, classes?
I'm very confused :slow:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 27, 2014
Not quite sure what you mean? ids don't work in DA btw, though.
Reply
Add a Comment: