| Deviant Login | Shop | Join deviantART for FREE  |
Take the Tour  |
Center Your JournalsWith the new formatting for journals, putting a max-width limit (or just fixing the width) makes more and more sense.... However, I've noticed a lot of really great journals that suffer from hanging out all the way on the left side. Which, when your screen resolution is 1920px wide, just really kills something. (Honestly, on this wide of a screen it's not good to have text go all the way across the page. I recommend putting a max-width on.)Center Your Journals1 year ago in Journal and Gallery Tutorials More Like This
Anyway, it's really easy to get your journal (or for that matter any kind of nested element) to center automatically. Use padding if you need to shift things in one direction or another, just make sure to watch out for what the background image does.
All you need to do is tell the left and right margins to be automatic.
Simple, isn't it?
Tricks
Instead of using margin: to specify values for everything, you can use margin-[component] to, for instance, say margin-top. This is especially useful when combined with the fact that the lower lines of CSS ov
CSS Snippets: Fantasy Header:iconikue:CSS Snippets: Fantasy Header5 months ago in Journal Scraps More Like This
CSS { Snippets : Fantasy Header }
I've noticed a lot of users being simply amazed at the beautiful header for the recent Realm of Fantasy article posted by $techgnotic. It really is a sight to behold, if you haven't already please go do so immediately and inform $marioluevanos how amazing he is as a designer. Anyway, would you believe that the header is something anyone on dA could do with a few simple CSS tricks? It's true! There is only one element in the header you cannot accomplish with the current CSS rules provided by dA but that is hardly necessary and can easily be rectified with a tweak to the images themselves.
I thought since it was so popular I would take a moment to break it down for you all and show you just how it's done. Here goes…
:iconikue:
Realm of Fantasy Article Header
This particular skin is fairly complex but not overly so. I would recommen
.:How to add a Stylish Script3 years ago in Other
More Like This
CSS Tricks: Background ImagesToday's CSS Trick will be about using background images in Journal Skins.CSS Tricks: Background Images4 months ago in Journal and Gallery Tutorials More Like This
There are three types of images that are mostly used in journals skins: big background images, seamlessly repeatable patterns and icon/logo-like images.
Images can be used for all elements of a journal: in the header, footer, behind text, next to text etc.. Any journal element has the ability to contain an image
I cannot stress enough that the main objective of a journal is making written content enjoyable to read. It is all about readability and making it as easy for the reader as possible. Very often I come across pretty journal skins, that have a complete lack of readability. In one of my previous CSS Tricks I already mentioned the dangers of text lengths and how to limit the .text width to improve readability.
Problems with using images:
Despite being big an images turns out to be too small for a journalAn image does not repeat seamlesslyText becomes non-re
Tutorial: Journal Skins - Part 1: HTML Code2 months ago in Journal and Gallery Tutorials
More Like This
Magical Blue content-holder box4 months ago in Other
More Like This
Project Educate: User Friendly Journal SkinningThis article is written for fellow CSS coders who already have basic+ knowledge of deviantART journal codes. This is not a beginner's tutorial.Project Educate: User Friendly Journal Skinning2 months ago in Art Blogs & Mags More Like This
User Friendly Journal Skin Coding
I've been making journal skins on DeviantART since 2010, I'd dabbled in CSS before, but never for other people. I know what my codes are and how to use them to their full potential and often, just code on the fly when I want something to do something. But making free and commission skins here showed me that I needed to make them as easy to use as they are pretty. And really, who wants to type in a lot of extra HTML when they go to write a journal? It is easy enough to access the artist's comments.
But even then, copy & paste, memorize that.... It can be a lot to deal with if you do not know CSS and HTML. Which is the reason most people get someone else's skin design in the firs
Content-Holder Background tutorial2 months ago in Other
More Like This
How to: Scroll BoxesTransferred from ~eCSSercise.How to: Scroll Boxes1 year ago in Resources More Like This
This is the first part of a tutorial series that I will be working on in the future and will be released whenever I find the time for it.
In order to know how I can make them better and to make it easier for you to understand the things I am talking about it would be appreciated if you would leave some feedback!
---
For this tutorial series I am explaining different elements you can create or modify with the help of CSS. The level of experience that is needed to be able to understand the tutorials can differ and will be in no order. I will try to explain the things as simple as possible though.
The Basics
To create a scrollbox you don’t need much, just a box with a limited height or width in order to enforce the scrollbar. If you don’t limit the dimensions of the box it will adjust itself to the space given by the browser resolution and settings.
The limited dimension itself doesn’t create the scrollbar,
CSS Did You Know? - October 3rd, 2012CSS Did You Know? - October 3rd, 20128 months ago in Community Relations More Like This
.:Adding Gallery CSS II3 years ago in General
More Like This
CSS Tricks: Limiting .text widthHello!CSS Tricks: Limiting .text width1 year ago in Journal and Gallery Tutorials More Like This
Today I wanted to share a little CSS Trick with youMany other people have done this before, awesome people like $Ikue, `thespook or `ginkgografix, and now it's me too
This first trick is very simple in execution, but I want to spend some time explaining why you should do it. That's why this journal has become a bit long
All about improving Readability!
When it comes to designing long copy texts, there are quite some challenges in order to create something easy to read and enjoyable to look at. One of the issues that may occur is text, that is running too long. The longer a line of text gets, the hard it is for the reader to follow the flow of text.
In some case you may have to even move your head from the beginning of a line to its end. And once you move your head, it becomes a lot harder to find the next line of text.
You may not even notice this while reading. But you will notice that your eyes get tired and you may
Sta.sh
