Deviation Actions

kuschelirmel-stock's avatar

Journal Css Gruze Style Part 1

36 Comments
6K Views
This is the remake of Journal CSS - Part 1. Since writing that tutorial, a lot has changed, both with css itself and on dA. This tutorial deals with the "new" gruze style journal css and I hope it will be as useful as the old, outdated one :aww:

Purple Square Bullet What you will learn:
  • Part 1: Adding background images to your journal so that they fit together seamlessly, tips on which class to use for what purpose and how to properly set your margins, paddings and heights.
  • Part 2 - [link]: Styling headlines, blockquotes, lists, thumbs and embedded deviations as well has what you can do with customn classes/divs.

What you won't learn: what CSS and HTML are from the ground up. To understand this tutorial, you should know what a class is, but you need to know nothing about the way dA handles CSS - that is what this tutorial is about.

Purple Square Bullet Example Journals:

Feel free to take these apart and use them as basis for your personal journal.
!!! Do NOT use the images! Create your own! Please adhere to my rules! !!!

Sunny Tree RAW by kuschelirmel-stock Journal Css Gruze Style Part 2 by kuschelirmel-stock Sunny Tree FULL by kuschelirmel-stock Gruze Style Journal CSS - a guide by kuschelirmel-stock 

:pointr: More Journal CSS - templates & tutorials

Green Square Bullet Additional Resources:
Here's the list I promised.

  • www.w3schools.com/css - great site to look up properties and their values, plus they have some tutorials about the basics and beyond!
  • For German speakers, there's de.selfhtml.org/css, maybe a little outdated but imo faster to navigate than w3schools.

There are lots and lots of resources on dA about coding, specifically for dA journals and profiles. Here are some highlights:

I am sure I forgot a ton ^^; sorry! Maybe remind me?


Blue Square Bullet My Rules for using my Journal CSS:

  • You are not allowed to alter the images provided in any way! Not for yourself, not for others. That means: no colour changes, no adding of brushes, filters, characters or whatever else - either you use the images the way they are or you make your own from scratch. They are not intended for stock use either!
  • If you want to alter the journal code a little for yourself (for example, if you need more boxes or titles or a menu with links or...) while keeping the images provided, go ahead. If you want to exchange the images for something you made for your own journal, go ahead.
  • If you do make your own images and create a journal based upon one of mine (for your own use or for a friend), credit in the journal would be nice. If you altered the thing completely, a one-time mention of this account will do. If your layout still relies heavily on mine, a permanent credit would be appreciated.
  • This should go without saying, but unfortunately it doesn't: Be so fair as to not enter css contests with one of my layouts or sell one of my layouts as "customized journal layout" or reupload one of my layouts as installable skin or template when all you did was swap the images (if you didn't even do that then you're a hopeless case anyway) - if you really make it your own, you can use my code to your heart's content, but pretending you did all the work when you couldn't even be bothered to change the colours will be a sure way to incite my wrath.

Blue Square Bullet My Rules for my Tutorials:

  • My tutorials are not to be reposted elsewhere, neither in part nor in full! I wrote them and I spend a heck of a lot of time on each, my only reward being the comments left on them. If they get reposted in forums or wherever, I get zero feedback. If you want to show others one of my tutorials, link them to the tutorial in question or to the collection or to my page - maybe they'll find something else worthy of their attention?! - or if you want to blog about it, you can use the embed function (under "Share" on the right side of each deviation page).
  • I do not allow translations of my tutorials (because when I don't speak the language I cannot do a quality check)

Silver Square Bullet Stock Credits:

tree from archaeopteryx-stocks & clouds from LilsRaven
Image details
Image size
950x6139px 1.38 MB
Published:
© 2014 - 2021 kuschelirmel-stock
Comments36
Join the community to add your comment. Already a deviant? Log In
SemperContritum's avatar
Using your journal tut and so far loving it...thank you
kuschelirmel-stock's avatar
SiennaBlue's avatar
ChimeraArtz's avatar
Finally! Thank you for taking the time to make this!
kuschelirmel-stock's avatar
PrettyWitchDoremi's avatar
Thanks for this! This helped A TON!!! :D
kuschelirmel-stock's avatar
:blowkiss: great to hear that!
ScarletLeonard's avatar
Exactly what I was looking for, thank you so much for this great tutorial.

I've read through parts one and two and while some parts are a little state the obvious to me (easy enough to skip over) the parts I need are well explained and now I am confident I will be able to code my journal just the way I want it.

Thanks again  
kuschelirmel-stock's avatar
great to hear this helped! :heart:
JWA2277's avatar
What does Css stand for?
JWA2277's avatar
Funny... Well I guest I deserve that! Thanks for the info anyways.:blowkiss:
JWA2277's avatar
:hug: I forgot what we were taking about.
fire-dragons-doot's avatar
You asked what css meant and kuschelirmel gav you a letmegoogletharforyou link and i just thought it was funny xD
View all replies
ElyneNoir's avatar
This is so detailed and helpful :) Thank you for posting this! :)
kuschelirmel-stock's avatar
satire-bowtie's avatar
Do you possibly know how to make a journal box have a scrolling widget? I don't know how.
kuschelirmel-stock's avatar
So sorry for the late reply. You can check out this journal ginkgografix.deviantart.com/jo… (if you're still interested).
satire-bowtie's avatar
Aha, thank you ! 
hairyskeleton's avatar

Well I must say I found both parts very helpful. I'm just learning for the first time, and I have tried to work on my own with major changes to the coding based on this, trying dozens of combinations, but for the life of me I can't make the coding work. All I really want to do is use another deviant's stock texture in my skin as a non-repeating background. I have saved that image into my stash and renamed it to "background". The link was originally Della-Stock.deviantART.com/art/Trail-Sand-Texture-43735747.


I tried background: url(sta.sh/013ntxt4b0py) no-repeat transparent:       Not sure about transparent being a code. Tried various other combinations in the url for both the header and body but all my guesses are wrong. Can you give me a hint?


This is the part that works for me so far, at least the border box is done and I can add the text I want and I am keeping. I just can't change it to the diffy bg I want to make it work:


* {background: transparent; border: none; margin: 0; padding: 0;}
.gr-top .img, .gr1, .gr2, .gr3, .tri, .hsep, .prevlink, .list {display: none;}
.gr {padding: 0 !important;}
.negate-box-margin {background: #6E633F;
 border: 3px solid #B92D3C;}


/* -- HEADER -- */
.gr-top h2 {font-family: cheeseburger, serif;
  font-size: 24pt;
  font-weight: normal;
  color: #D9B23F;}
.gr-body {color: #D9B23F;
  font-family: cheeseburger, sans-serif;
  font-size: 16pt;}

kuschelirmel-stock's avatar
sorry for the slow response ^^; Great to hear you find the tuts useful!

background:transparent; is the same as background:none; - so no need to repeat that in the css further down. Generally, the background shorthand can be a bit tricky as it seems to be very sensitive to having the correct items in the correct order (you can look up what will work on www.w3schools.com/css/css_back… ). Other than that you need to get the link for the image directly, not the page its on: fc04.deviantart.net/fs71/f/201… would be the url for the image in your stash (you may want to upload a version of the texture without the border and text or it will most likely look off)
Join the community to add your comment. Already a deviant? Log In