Deviant Login Shop  Join deviantART for FREE Take the Tour
×

: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
7,570 (4 today)
Favourites
701 (who?)
Comments
162
Downloads
52
×
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:
 
:iconmowingadopts:
MowingAdopts Featured By Owner Aug 3, 2014  New member
May i ask,how do we add pictures behind? I know i don't have PM,but i want to try out the journal skin
Reply
:iconhoneycrisp1012:
Honeycrisp1012 Featured By Owner Jul 30, 2014  Hobbyist Artist
I have a question: I used the Journal Creator to make my Journal Skin and it looks great on my page.
However, when I write a new journal, I notice that the background image for the header and footer seem too small and look like they need to be stretched to fit the page in stash writer, like so: sta.sh/0dl5htnj49z Is there any certain size the header and footer have to be to fit?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 30, 2014
There's no "best fit" because everyone has different monitor sizes. :) Your options are to:

- Have a header that's fine with any width (your image probably doesn't qualify here)
- Make the header repeating (probably doesn't work either)
- Add a max width to your journal so that it looks the same on everyone's monitor (there's an option for this in my journal creator).
Reply
:iconhoneycrisp1012:
Honeycrisp1012 Featured By Owner Jul 31, 2014  Hobbyist Artist
Thanks for your help.
Reply
:iconbirdycrossing:
BirdyCrossing Featured By Owner Jul 28, 2014  Student Digital Artist
This is the first time I've ever had CSS explained so simply, and I really can not thank you enough haha<33!
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 2, 2014
:thumbsup: I'm hoping to make a better tutorial sometime, but it's proving surprisingly difficult to make myself do it. :P
Reply
:iconmikomikisomi:
MikomiKisomi Featured By Owner Jul 24, 2014  Student Digital Artist
Is there a way to increase the distance between each line of text? For some reason the journal skin I'm using now has the words all squeezed together, as you can see here: mikomikisomi.deviantart.com/jo…
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 24, 2014
Add line-height within your text:

.text{
line-height:20px;
}
Reply
:iconmikomikisomi:
MikomiKisomi Featured By Owner Jul 24, 2014  Student Digital Artist
Thank you so much! It looks a lot better now! ♥
Reply
:iconcogwurx:
cogwurx Featured By Owner Jul 22, 2014  Professional Interface Designer
Excellent resource.
Reply
Add a Comment: