Deviant Login Shop
 Join deviantART for FREE Take the Tour
×

:iconsimplysilent: More from SimplySilent




Details

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

Stats

Views
6,936 (11 today)
Favourites
655 (who?)
Comments
153
Downloads
49
×
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:
 
:iconcogwurx:
cogwurx Featured By Owner 2 days ago  Professional Interface Designer
Excellent resource.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner 1 hour ago
:heart:
Reply
:iconmissabbeline:
MissAbbeline Featured By Owner Jul 8, 2014  Student Digital Artist
Is there any way to get the text to be centered? I've tried the usual code, but it doesn't seem to work.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 8, 2014
You would typically use text-align:center; :)
Reply
:iconblazingshimmer:
BlazingShimmer Featured By Owner Jul 5, 2014  Hobbyist Traditional Artist
YE IM A DUMMIE :dummy:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 8, 2014
:highfive:
Reply
:iconneccers:
Neccers Featured By Owner Jul 4, 2014  Student General Artist
I keep trying to adjust the text, but it only ever moves the background image I have.  :/ 

This is how it is right now: snag.gy/JLuze.jpg

Adjusting the width, margin, or padding just moves the middle, repeating, background image.  I also can't figure out how to put the mood and all that inside the background, around the bottom left corner, but where it is doesn't bother me too much.

I'm too retarded, Simply.  This is the easiest thing I could attempt and I can't even do it right.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 5, 2014
Ah, that's probably because you have that background image as the background image to your text. Make .gr-box{} have the cat background, and then you should have more freedom to move the .text{} around using margins or paddings. If that doesn't work, send me the link of where your journal is located. :)
Reply
:iconneccers:
Neccers Featured By Owner Jul 6, 2014  Student General Artist
It made it disappear. ;-;  

docs.google.com/document/d/1in…

None of the easy-to-follow tutorials I've read mentioned the gr thing (besides yours of course ;D).  According to Ginkgografix's journal I shouldn't mix them?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 6, 2014
Says I need permission. :P Send me the link to your actual journal, which I presume is in your Sta.sh or published in your journals somewhere.

You should not mix the two journal structures. Just use one or the other.
Reply
Add a Comment: