dA Journal CSS + Tutorials

16 min read

Deviation Actions

4 Comments
17K Views

I have uploaded quite a few free journal css (the newer ones are all easy-install ones) as well as some tutorials on the subject, which are listed here.

:shout: Note: You need to be subscribed to use journal CSS!!!


Journal CSS Tutorials



New CSS Style (aka. gruze style - .gr-box...)


These are the newer tutorials / helpful bits for coding that have been put together using the new (gruze) style journal css. Please not that while the old stuff still works, you cannot mix it with the new. So if you decide to code in gruze, you need to stick to it.

  • Gruze Style Journal CSS - a guide: while this is not a tutorial per se as it doesn't actually explain step-by-step, it is meant to be a helpful visual guide for coding in gruze style. It shows you the classes available (= predefined by dA) and the text on the sides and below gives some advice on coding. Prior knowledge of css basics is a must. The template for the code to go with that guide is Skeleton Journal with Comments.
  • Journal CSS Gruze Style Part 1 & Part 2: Tutorial on how to create your own Journal CSS with the "new" gruze style and some explanation on how to decide where to cut up your background images and where to place them. The corresponding Journal CSS Templates are Sunny Tree RAW and Sunny Tree FULL.


Old CSS Style (.journalbox...)


While all of these are somewhat outdated, seeing as they still use the old notation, they are still usefull for understanding the principles. Also, if you stick with the old notation exclusively, these will still work.

  • Journal CSS Part 1 & Part 2: Tutorial on how to create your own journal css using the old notation and therefore slightly outdated, but still (mostly) working and hopefully still useful. The corresponding Journal CSS Templates are Scorpion RAW and Scorpion FULL.
  • CSS: Absolute Positioning: a tutorial on how to use position:absolute; in your journals. May no longer work exactly as shown because of changes to how css is interpreted these days.
  • Seamlessly Tiling Backgrounds: This one show you how to create a seamlessly tiling, textured background image in Photoshop and the code to go with it.
  • Seamless Header & Footer: takes the tiling backgrounds tutorial and adds a matching header and footer image to the tiling background by showing the steps in Photoshop plus the css code used.


Journal CSS


The history of journal css on dA (and the www in general) is a fluid one. While at the very beginning, only volunteers and admins had the possibillity to include css in their journals, this has only been opened to the public in late 2006. Since then, a lot has happened with the code itself (including changing from the old model (.journalbox) to the new gruze style (.gr-box) as well as to the way journal css can be shared among deviants.


Easy Install CSS


Journals that can be installed using the click of a button -- but be careful: you still need to go into the code bit to locate any content for headers/footers that may need changing (such as links, additional info etc). The newer ones work with Sta.sh Writer's drop-down menus for the headlines, blockquotes and lists.


Sunny Tree FULL by kuschelirmel-stock Underwater CSS by kuschelirmel-stock This is Halloween Journal CSS by kuschelirmel-stock Skull and Roses - Free CSS by kuschelirmel-stock Photomanipulated CSS by kuschelirmel-stock

Creature Feature CSS by kuschelirmel-stock Light into the Dark CSS by kuschelirmel-stock Coffee Journal CSS by kuschelirmel-stock News Paper CSS by kuschelirmel-stock


Free CSS for Download


In the early days, you had to provide the code as text file download for people to put into the css boxes in the journal themselves. This still works, so if you want to use any of these, feel free to -- and don't be afraid of the DIY part. Each css comes with a read me file and detailed instructions.

Chickadee Journal+Gallery CSS by kuschelirmel-stock Japan CSS - free template by kuschelirmel-stock Flashy Tech CSS by kuschelirmel-stock International Women's Week by kuschelirmel-stock Roses Journal + Gallery CSS by kuschelirmel-stock
Journal CSS - flowers fixed by kuschelirmel-stock Sky CSS by kuschelirmel-stock Fractal Spider CSS by kuschelirmel-stock Zebra CSS by kuschelirmel-stock Spacy CSS by kuschelirmel-stock
Christmas CSS by kuschelirmel-stock Flower CSS by kuschelirmel-stock City CSS by kuschelirmel-stock Scorpion FULL by kuschelirmel-stock

Gallery CSS for Download


Gallery CSS cannot be made for easy install, so you have to download the code and put it in manually. Each Gallery CSS comes with a read-me file to help you with the process.



Stock Terms of Use


By downloading you agree to abide by my Stock Rules.
Read them before you use my stock!
They are not complicated even though they seem lengthy
NO REUPLOADING - NO PREMADES, NO BRUSHES ETC CAN BE MADE WITH MY STOCK! only art!!!


Skin by SimplySilent
Published:
© 2014 - 2021 kuschelirmel-stock
Comments4
Join the community to add your comment. Already a deviant? Log In
Hend-Watani's avatar
 i want to ask do you know how to change gallery folder font or icon ,cause i want to change the font to my gallery icon like this  mirellasantana.deviantart.com/…  ellysiumn.deviantart.com/galle…
kuschelirmel-stock's avatar
these are images actually, not css; hope this helps :)
Hend-Watani's avatar
graphicraja's avatar
nice i try to learn web designing  ...may b it helps me :)