Shop Forum More Submit  Join Login
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;}
.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:


5. Adding Padding:

.text{padding:40px 30px 20px 30px;}

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

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;}

background: #4fbcbd;

background: #eee;

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;}

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!
Add a Comment:
hannahelizabethh Featured By Owner Edited Apr 21, 2018  Student General Artist
Hi! (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 Featured By Owner Mar 4, 2018  Professional 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 Featured By Owner Apr 5, 2018  Hobbyist 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 Featured By Owner Oct 17, 2017  Hobbyist Digital Artist
Hate the comments link and blockquotes... Tried to remove and can't. Making skins with this is extremely annoying.
AuttumntheGuardian Featured By Owner Dec 24, 2017  Student Artist
I feel ya.. It's tough
Zulikk Featured By Owner Edited Sep 13, 2017  Hobbyist Digital Artist
Okay this has been bothering me for ever! How do you add blackquotes?!
ViviannaArts Featured By Owner Aug 19, 2017  Student Traditional Artist
Is there anyway to explain what every thing does bit by bit and how to use it together???
Tettry Featured By Owner Aug 16, 2017  Hobbyist General Artist
This makes me feel old and confused 
Yoshimiko-Adopts Featured By Owner Jul 26, 2017  Hobbyist Digital Artist
Thank you so much for this!! :heart:
0Blue-Rae0 Featured By Owner Jun 28, 2017  Hobbyist Digital Artist

does stuff like this help?
ThoriumK9 Featured By Owner Apr 16, 2017  Hobbyist Digital Artist
Thanks! I can't wait to give it a go. 
Buzzy Heart by ThoriumK9  
EmmieStitch Featured By Owner Apr 15, 2017  Hobbyist 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("…") no-repeat;

background-postion: center 20px;

max-width: 400px;

margin: auto;

padding: 90px 20px 20px 20px;

duncundog Featured By Owner Aug 23, 2017
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:
Aspireci Featured By Owner Mar 12, 2017  Hobbyist Traditional Artist
Thank you very much for the tutorial ^^ it's really useful
RaykaLNova Featured By Owner Feb 1, 2017  Hobbyist 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 Featured By Owner Jan 14, 2017  Hobbyist Digital Artist
Thanks for linking to the journal creator. Makes things a helluva lot easier for me. :aww:
vanndra Featured By Owner Sep 28, 2016  Hobbyist General Artist
Thanks for taking the time to do this and share :) You've made it very easy to follow.
LadyofTales Featured By Owner Aug 2, 2016  Hobbyist General Artist
This is very helpful! Thank you!
DanksForTheMemeries Featured By Owner Edited Jul 20, 2016  Hobbyist General Artist
Yikes, I screwed up really badly somewhere 0.0
WorriorCatAJ Featured By Owner Edited Jun 22, 2016  Hobbyist 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 Featured By Owner Jun 21, 2016  Student 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 Featured By Owner Jun 7, 2016  Hobbyist General Artist
thank you for this!
Dj-Luka Featured By Owner Apr 30, 2016  Hobbyist 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.
SimplySilent Featured By Owner May 6, 2016
Shoot, that might have been one of the things I had thought I had changed, but really hadn't. I plan to make updates to the creator at the end of May, so that will be one of the features that is changed. :)
Zoroku Featured By Owner Apr 30, 2016  Student Traditional Artist
How do I customise my skin, because I wanted to start to make it myself. :3
incomingtrouble Featured By Owner Mar 19, 2016  Hobbyist General Artist
Oh my god you're a lifesaver <3 Quick question, though: How do you put an image in the background, not where your text is?
YaraFerreira Featured By Owner Feb 13, 2016  Professional Digital Artist
That is really helpful, thanks!
S-k-y-F-r-e-e Featured By Owner Jan 29, 2016  Hobbyist General Artist
Omg you just made my life so much easier. I couldn't find how to edit the headers anywhere and trial and error wasn't working xD your simplydevio was super helpful too.
I am left with one more problem on my journal skin edit. Bullet points. They won't show up when I edit the skin (they're visible in the preview though). And also when I exit the "edit skin" part and go back to work on the journal all the bullets are at an equal alignment (so bullets within a bullet are not offset, they're all aligned the same vertically, which is not what I want). It may be a DA mistake, but if you good offer any help that would be fantastic. Thanks!
arzika Featured By Owner Jan 22, 2016  Hobbyist Digital Artist
Some reason everytime I click "edit skin" the options won't show up and I can't delete one of Maygebee journal skins :( (Sad)

SimplySilent Featured By Owner Jan 23, 2016
Try a different browser? Might be a DA problem.
arzika Featured By Owner Jan 23, 2016  Hobbyist Digital Artist
i already tried contacting the staff and they said there isnt a problem with their servers
and I tried Chrome, Internet Explorer, and Firefox
DustyPuppyy Featured By Owner Dec 10, 2015  Hobbyist Digital Artist
Thank you for uploading this. QwQ This is the easiest to understand tutorial I've found that doesn't leave any details out. Thanks!
MapIe-Shade Featured By Owner Nov 9, 2015  Hobbyist Digital Artist
what size should i use to make artwork for the background?
F-Stormer-3000 Featured By Owner Oct 3, 2015  Student Digital Artist
This is really great!
I was wondering though, how do I add a nice head image and transparent background image where the text goes?
Thanks! B-)
mrkoendb Featured By Owner Oct 3, 2015  Hobbyist Digital Artist
in the correct div/section/whatever the code uses
use either
if you use the second one you can use a transparant image and still use a background color with it like
(which is white with a 0.7 opacity)
(which is white)
you can also use HEX for this color
copper9lives Featured By Owner Sep 14, 2015  Professional General Artist
This is wonderful!!!! Thank you so much... I'm learning how to create journal skins tailored to the groups I write journals for, and I really appreciate this! :heart:
moefoer Featured By Owner Aug 29, 2015
quick question - how do i make my .gr-top bold ?
mrkoendb Featured By Owner Oct 3, 2015  Hobbyist Digital Artist
use this in css
font-weight: bold;
moefoer Featured By Owner Oct 3, 2015
i did and it didn't do anything -- 
i think it might be the font
mrkoendb Featured By Owner Oct 3, 2015  Hobbyist Digital Artist
Might not have a bold option...
Shiroegi Featured By Owner Aug 3, 2015  Hobbyist General Artist
It seems i've got some trouble with the coding-
I got until the end of the tutorial and made my own journal skin following the basic rules, but the problem is that when i try to add another code that's not listed on the tutorial at the bottom (more specifically ".journaltext{color: #C0C0C0;}" ) almost all of the changes i did get ruined .
I don't know if it is actually a dA glith and it will actually work fine when I submit it or it will just stay like that.
Cestrum Featured By Owner Jul 22, 2015
In your journal creator, for the little credit thingy at the very bottom, how do I change the text size and color?
Katiefrog217 Featured By Owner Jul 26, 2015  Student General Artist
well this is a surprise xD didn't expect to find you here lmao
Cestrum Featured By Owner Jul 26, 2015
How else would I have made my new journal skin? lol XD
Katiefrog217 Featured By Owner Jul 26, 2015  Student General Artist
xD fair enough lmao
FlyingNeko105 Featured By Owner Jun 19, 2015  Student Digital Artist
Where does the text go in the journal when you're done?
SimplySilent Featured By Owner Jul 7, 2015
Just in case you're still having trouble with this, it goes in the regular text box where you normally type things for journals. :)
FlyingNeko105 Featured By Owner Jul 7, 2015  Student Digital Artist
I figured it out but thank you~:3
Add a Comment:

:iconsimplysilent: More from SimplySilent

Featured in Collections

More from DeviantArt


Submitted on
July 7, 2013
Image Size
1.4 MB


1,918 (who?)