Shop Mobile 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;}
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:
 
:iconiggyvillagekoopa:
IggyVillageKoopa Featured By Owner Mar 11, 2015
All the code is making my head hurt
Reply
:iconjoyfulkitty:
JoyfulKitty Featured By Owner Mar 3, 2015  Hobbyist Digital Artist
Just wondering, if I were to use as kind like this th08.deviantart.net/fs70/PRE/i… would it distort the skin if it were really long or would it repeat it or...what would happen 
Reply
:iconmetalhead-777:
Metalhead-777 Featured By Owner Feb 20, 2015  Student Digital Artist
Thank you so much for this! :dummy:

Just one question: How do you change the text color of a link?

IE: I put at the bottom of my journal:
Made by Metalhead-777 
How do I change the link text color?
Reply
:iconanipal:
AniPal Featured By Owner Edited Feb 23, 2015  Student
a{
    color: /*color here*/;
}
Reply
:iconmetalhead-777:
Metalhead-777 Featured By Owner Feb 23, 2015  Student Digital Artist
Thnx :3
Reply
:iconanipal:
AniPal Featured By Owner Feb 23, 2015  Student
happy to help :)
Reply
:iconmetalhead-777:
Metalhead-777 Featured By Owner Feb 23, 2015  Student Digital Artist
It doesn't work :I
Reply
:iconanipal:
AniPal Featured By Owner Edited Feb 23, 2015  Student
edited. try again. it will apply to all links. if you want to further decorate your links, try pseudo-selectors.

/* unvisited link */
a:link {
    color: /*color here*/;
}

/* visited link */
a:visited {
    color: /*color here*/;
}

/* mouse over link */
a:hover {
    color: /*color here*/;
}

/* selected link */
a:active {
    color: /*color here*/;
}
Reply
:iconmetalhead-777:
Metalhead-777 Featured By Owner Feb 23, 2015  Student Digital Artist
Thnx :3
Reply
:iconbutt-mira:
Butt-mira Featured By Owner Feb 12, 2015  Hobbyist Digital Artist
Okay, my head hurts so much right now ;//v//; I managed to understand all of this, but there is one thing i didn't understand :I Where do you put all these codes? On the Skin CSS?(sorry for such stupid questions i'm completely new to this xDD)
Another thing, how do i create a skin? Like lets say i want to do something for my front page, and i want a customized skin, like lets say a bunch of flowers on my widgets, and i want to draw the flowers myself... how do i draw them and add the to the behind of my widgets?
Reply
:iconanipal:
AniPal Featured By Owner Edited Feb 23, 2015  Student
yes. write it all in skin css.

to add your art in background, use:

.gr-box{
    background: url('/*your_link_here.extension/*') repeat;
}


that shall do the trick
Reply
:iconbutt-mira:
Butt-mira Featured By Owner Feb 23, 2015  Hobbyist Digital Artist
Ok thank you very much<3
Reply
:iconanipal:
AniPal Featured By Owner Feb 23, 2015  Student
:3
Reply
:iconkohu-arts:
kohu-arts Featured By Owner Jan 31, 2015
I would like to thank you for posting this for people like me, who really are dummies in terms of CSS/coding. xD This is extremely helpful! 
Reply
:iconcrysenley:
Crysenley Featured By Owner Jan 16, 2015  Hobbyist General Artist
Thank you so much for this comprehensive tutorial! :la: Now I know exactly which classes to change. :D
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jan 18, 2015
You're welcome! I'm glad it was helpful. :)
Reply
:iconrkrsb4:
rkrsb4 Featured By Owner Jan 3, 2015  Hobbyist Traditional Artist
I appreciate this soooooooooooooo much! Thank you!
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jan 18, 2015
:heart:
Reply
:iconppgirl16:
PPGirl16 Featured By Owner Jan 1, 2015  Hobbyist General Artist
On your DeviantART Journal Creator, I noticed there was a blockquote feature. How does one get rid of it?
Reply
:iconitutorialsyt:
iTutorialsYT Featured By Owner Oct 20, 2014  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
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  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
:iconmowingadopts:
MowingAdopts Featured By Owner Aug 3, 2014
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
:iconanipal:
AniPal Featured By Owner Edited Feb 23, 2015  Student
here

.gr-box{
    background: url('/*your_link_here.extension/*') repeat;
}
Reply
:iconspiritspixels:
Spiritspixels Featured By Owner Sep 14, 2014  Hobbyist Digital Artist
you cant do journal skins without a PM
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
:iconsimplysilent:
SimplySilent Featured By Owner Jul 24, 2014
: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
:iconpenis-jam:
Penis-Jam 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
:iconpenis-jam:
Penis-Jam 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:
 
×

:iconsimplysilent: More from SimplySilent


Featured in Collections

HTML CSS by Calorful


More from DeviantArt



Details

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

Stats

Views
11,765 (16 today)
Favourites
946 (who?)
Comments
193
Downloads
75
×