Deviation Actions

kuschelirmel-stock's avatar

Journal Css Gruze Style Part 2

Published:
7 Comments
5K Views
This is the remake of Journal CSS - Part 2. 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 - [link]: 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: 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! !!!


Journal Css Gruze Style Part 1 by kuschelirmel-stock Sunny Tree RAW 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)


Image details
Image size
950x5490px 1.11 MB
© 2014 - 2021 kuschelirmel-stock
Comments6
Join the community to add your comment. Already a deviant? Log In
kuschelirmel-stock's avatar
this is a site for interacting with others, not just using others' deviations to plug your own blog -- spam reported
Mythiril's avatar
this was super easy to follow, i've been debating for a while to make my own skin. 
i have a question though, can all of this be done in DreamWeaver? if yes, which would be easier to use?
kuschelirmel-stock's avatar
So sorry for the late reply!

DW is a what you see is what you get editor (which I use for my personal website), but for dA journals, it makes no sense to use it as you would first need to download the whole dA page to load into PS -- and a dA page comes with lots of scripts and css on its own, which you would need, too. It is easier to just put your code directly into the journal's box.
Mythiril's avatar
i see, i've dabbling with it for a bit, my html knowledge isn't that great, dw has been offering some leverage i suppose. 
thank you, i'll try writing i t on my own and see how that works out, i am expecting a disaster mostly :lol:
GinkgoWerkstatt's avatar
I found this part way easier to follow. Guess because the single paragraphs arent't that long and it doesn't feel like i have to deal with too much information at once. Imo the additional notes work here much better, because of that.

Oh and while going through it i found two typos:
• Notes on adding additional classes to use
-> in the second sentence you have "customn"

• Navigation at the top
-> in the notes area you have "naviation"

:hug:
kuschelirmel-stock's avatar
:huggle: I'll fix those asap, thanks!
Join the community to add your comment. Already a deviant? Log In