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:
 
:iconworriorcataj:
WorriorCatAJ Featured By Owner Edited 2 days ago
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:
Reply
:iconmagicdragon50:
MagicDragon50 Featured By Owner 3 days ago  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?
Reply
:iconlapaowan:
lapaowan Featured By Owner Jun 7, 2016  Hobbyist General Artist
thank you for this!
Reply
:icondj-luka:
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.
Reply
:iconsimplysilent:
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. :)
Reply
:iconzoroku:
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
Reply
:iconkittycatisthat:
Kittycatisthat 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?
Reply
:iconyaraferreira:
YaraFerreira Featured By Owner Feb 13, 2016  Professional Digital Artist
That is really helpful, thanks!
Reply
:icons-k-y-f-r-e-e:
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!
Reply
:iconarzika:
arzika Featured By Owner Jan 22, 2016  Hobbyist Digital Artist
hey
Some reason everytime I click "edit skin" the options won't show up and I can't delete one of Maygebee journal skins :( (Sad)

Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jan 23, 2016
Try a different browser? Might be a DA problem.
Reply
:iconarzika:
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
Reply
:iconsilver02kittin:
SiLvER02Kittin 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!
Reply
:iconmapie-shade:
MapIe-Shade Featured By Owner Nov 9, 2015  Hobbyist Digital Artist
what size should i use to make artwork for the background?
Reply
:iconf-stormer-3000:
F-Stormer-3000 Featured By Owner Oct 3, 2015  Student Filmographer
Hey!
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-)
Reply
:iconmrkoendb:
mrkoendb Featured By Owner Oct 3, 2015  Hobbyist Digital Artist
in the correct div/section/whatever the code uses
use either
background:url(image.url);
or
background-image:url(image.url);
if you use the second one you can use a transparant image and still use a background color with it like
background:rbga(255,255,255,0.7)
(which is white with a 0.7 opacity)
OR
background:rgb(255,255,255)
(which is white)
you can also use HEX for this color
Reply
:iconcopper9lives:
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:
Reply
:icondogkids:
dogkids Featured By Owner Aug 29, 2015
quick question - how do i make my .gr-top bold ?
Reply
:iconmrkoendb:
mrkoendb Featured By Owner Oct 3, 2015  Hobbyist Digital Artist
use this in css
font-weight: bold;
Reply
:icondogkids:
dogkids Featured By Owner Oct 3, 2015
i did and it didn't do anything -- 
i think it might be the font
Reply
:iconmrkoendb:
mrkoendb Featured By Owner Oct 3, 2015  Hobbyist Digital Artist
Might not have a bold option...
Reply
:iconshiroegi:
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.
Reply
:iconcestrum:
Cestrum Featured By Owner Jul 22, 2015  Student Filmographer
In your journal creator, for the little credit thingy at the very bottom, how do I change the text size and color?
Reply
:iconkatiefrog217:
Katiefrog217 Featured By Owner Jul 26, 2015  Student General Artist
well this is a surprise xD didn't expect to find you here lmao
Reply
:iconcestrum:
Cestrum Featured By Owner Jul 26, 2015  Student Filmographer
How else would I have made my new journal skin? lol XD
Reply
:iconkatiefrog217:
Katiefrog217 Featured By Owner Jul 26, 2015  Student General Artist
xD fair enough lmao
Reply
:iconflyingneko105:
FlyingNeko105 Featured By Owner Jun 19, 2015  Student Digital Artist
Where does the text go in the journal when you're done?
Reply
:iconsimplysilent:
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. :)
Reply
:iconflyingneko105:
FlyingNeko105 Featured By Owner Jul 7, 2015  Student Digital Artist
I figured it out but thank you~:3
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 7, 2015
Great. :)
Reply
:iconlucytherescuedcat:
lucytherescuedcat Featured By Owner Jun 2, 2015  Hobbyist Photographer
Thanks! :-) 
Reply
:iconyohadoptee:
Yohadoptee Featured By Owner May 24, 2015  Professional Digital Artist
Thanks simply for the devious journal skin creator on your web! It's really helping me a lot! :D. I did credit you on my journal. Cheers!
Reply
:iconemshelley:
EMShelley Featured By Owner May 18, 2015  Hobbyist General Artist
Thank you!
Reply
:iconlady-compassion:
Lady-Compassion Featured By Owner May 17, 2015  Hobbyist Digital Artist
Hey!  I already faved this....still love it...still need to try this out  :dummy:
Reply
:iconpamonk:
PaMonk Featured By Owner May 14, 2015  Hobbyist General Artist
Awesome Thanks for sharing this Info will have to try this one day thanks.:D
Reply
:iconlifewatery:
lifewatery Featured By Owner Edited May 9, 2015  Hobbyist
well i used your Journal skin creator but i wanna add ''Art made by lifewatery .'' How to add it? And may we upload it to dA for everyone to use?

Edit: Okay i did it :) 

Thanks a lot.
Reply
:iconicenova:
IceNova Featured By Owner Apr 15, 2015  Student Digital Artist
OMG! this made is so much easier to understand than most tutorials I looked up!
Thank you so much. Though I do have a small question what command would I use if I want to add in an image instead of solid colors?
(Also a FAQ's section would be nice. I am not sure how many people asked this question...)
Reply
: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  Professional Interface Designer
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  Professional Interface Designer
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  Professional Interface Designer
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  Professional Interface Designer
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
Add a Comment:
 
×

: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
21,134 (5 today)
Favourites
1,431 (who?)
Comments
231
Downloads
124
×