SimplySilent's avatar
Journal Skins for Dummies Part 1
By SimplySilent   |   Watch
1K 252 34K (1 Today)
Published: July 8, 2013
© 2013 - 2019 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!
Image size
802x6537px 1.37 MB
Comments247
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
hannahelizabethh's avatar
hannahelizabethhStudent General Artist
Hi! simplysilent.deviantart.com/ (or anyone else who wants to help me)...
thank you for the journal creator. :) so figured out how the journal creator works, but I honestly can not figure out how to submit my finished product to deviantart as a journal skin for me.. how do I do that? 
PhoenixViscount's avatar
PhoenixViscountHobbyist Photographer
I got my Core membership today and I thought I would give the journal skin a go... I can't seem to get the footer to actually appear, so I erased the content from it. I was trying to move my "copyright" notice down to the footer. I just can't seem to get it to appear.

One more thing, is it possible to apply the same CSS to other widgets on the page? I noticed someone using CSS in his or her deviantID some time ago.
My-Sword-is-Bigger's avatar
My-Sword-is-BiggerHobbyist Digital Artist
Far as I know you can only use html on widgets. But you can do CSS in your gallery. I've played around with that quite a lot.
CarmellinaPrincessa's avatar
CarmellinaPrincessaHobbyist Digital Artist
Hate the comments link and blockquotes... Tried to remove and can't. Making skins with this is extremely annoying.
AuttumntheGuardian's avatar
AuttumntheGuardianStudent Artist
I feel ya.. It's tough
Zulikk's avatar
ZulikkHobbyist Digital Artist
Okay this has been bothering me for ever! How do you add blackquotes?!
ViviannaArts's avatar
ViviannaArtsStudent Traditional Artist
Is there anyway to explain what every thing does bit by bit and how to use it together???
Tettry's avatar
TettryHobbyist General Artist
This makes me feel old and confused 
Yoshimiko-Adopts's avatar
Yoshimiko-AdoptsHobbyist Digital Artist
Thank you so much for this!! :heart:
0Blue-Rae0's avatar
0Blue-Rae0Hobbyist Digital Artist
siennaredpanda0404 

does stuff like this help?
-Rae
ThoriumK9's avatar
ThoriumK9Hobbyist Digital Artist
Thanks! I can't wait to give it a go. 
Buzzy Heart by ThoriumK9  
EmmieStitch's avatar
EmmieStitchHobbyist Digital Artist
I was just wondering, where do you put all of this code? I am putting my code into the journal and it isn't applying the format. Maybe it's a noob question or maybe I am doing something wrong...?
.welcome-box {

background#EFE7E1 url("pre01.deviantart.net/f445/th/p…") no-repeat;


background-postion: center 20px;


max-width: 400px;


margin: auto;


padding: 90px 20px 20px 20px;


}
duncundog's avatar
I don't know whether you've figure this out by now or not, but just in case:

You hit "edit skin" above where your journal skins are (make sure you have no skin selected) and it will pop up a box where you can enter your css c:
tleavz's avatar
tleavzHobbyist Filmographer
I was going to comment it, thanks for the help!
Recitto's avatar
RecittoHobbyist Traditional Artist
Thank you very much for the tutorial ^^ it's really useful
RaykaLNova's avatar
RaykaLNovaHobbyist Digital Artist
Hi, I have a little problem with it :/
This is an example
This is the example I made, I do all what I found here and in the comments, but I have problems :/
Can you help me, please?
MaudeDraws's avatar
MaudeDrawsHobbyist Digital Artist
Thanks for linking to the journal creator. Makes things a helluva lot easier for me. :aww:
vanndra's avatar
vanndraHobbyist General Artist
Thanks for taking the time to do this and share :) You've made it very easy to follow.
LadyofTales's avatar
LadyofTalesHobbyist General Artist
This is very helpful! Thank you!
DanksForTheMemeries's avatar
DanksForTheMemeriesHobbyist General Artist
Yikes, I screwed up really badly somewhere 0.0
WorriorCatAJ's avatar
WorriorCatAJHobbyist Digital Artist
This is a bit confusing for me... but i decided to use the Journal Skin base that you put in the description

But what does this mean? It keeps popping up when i try to save it

Saving skin failed - Malformed or blank selector:
MagicDragon50's avatar
MagicDragon50Student Digital Artist
Hi! Thank you for this, it was really helpful! I am wondering, though, how would I install a custom skin that I drew myself?
lapaowan's avatar
lapaowanHobbyist Digital Artist
thank you for this!
Dj-Luka's avatar
Dj-LukaHobbyist General Artist
In your Journal Creator, how do you change the color of the "Heading 1" because I made a journal skin using it but there was no where to change the color of that header so it's hard to see on the background color I chose and doesn't go with the rest of the skin.
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
©2019 DeviantArt
All Rights reserved