[x]

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.)
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 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

CSS Tricks: Background ImagesToday's CSS Trick will be about using background images in Journal Skins.
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

Browse More Like This

Shop Similar Prints
This Print Not Available Download Image
PNG, 1100×4500 more ▶

More from `ginkgografix

View Gallery · View Prints

Featured in Groups:

#eCSSited
a place for all your CSS needs

#iterators
We iterate!

Details

Submitted: October 3, 2012
Image Size: 523 KB
Resolution: 1100×4500

Link

Thumb

Statistics

Comments: 22
Favourites: 49 [who?]
Views: 895 (0 today)
Downloads: 13 (0 today)

[x]

.:Gallery Structure: Big Thumbsby `ginkgografix

Resources & Stock Images / Tutorials / deviantART Tutorials / Journal and Gallery Tutorials

©2012-2013 `ginkgografix

edit:
Filesize fixed and literature thumbs added.

I am not sure if this is really needed, but for those who are interested in it, it might be worth to take a look at.
This is an additional reference sheet. For basic information click the deviation below.

Still i can't guarantee that this is 100% right. Whenever i used Firebug i got a different code than looking at the source code directly. It also seems like some classes only do have an effect when they are combined.

If you figure out something that is wrong or should be added, feel free to tell me about. Would be very much appreciated!

The Gallery Structure

---

My tutorials/guidelines

CSS Guideline [link]

Old vs Gruze Journals [link]

Ungruze your Journals [link]

How to add image paths [link]

How to add a gallery CSS [link]

How to make a journal layout [link]

ABC of dA CSS Part I [link]

ABC of dA CSS Part II [link]

How to add CSS to Groups [link]

How to create a new Stylish Script [link]

More can be found here: [link]

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

~~joy 0 0~~

~~wow 0 0~~

~~mad 0 0~~

~~sad 0 0~~

~~fear 0 0~~

~~neutral 0 0~~

*poserfan Dec 21, 2012 Professional

You can change the details links color, but you need to add something before details to make it work; figured it out for my latest gallery css.

Reply

`ginkgografix Dec 22, 2012

Yes it works, it has been added when i still was using the UserStyle which made it impossible to change them.
Forgot to remove that hint here.

Reply

`Kjherstin Oct 18, 2012 Professional Digital Artist

Your tutorials are true gems

Reply

`ginkgografix Oct 18, 2012

That's good to hear, makes it worth to work on more

Reply

`Kjherstin Oct 20, 2012 Professional Digital Artist

:hugs: They are always so clear

Reply

~Backsackandjack Oct 7, 2012 Traditional Artist

I quite like the way the thumbs have been set out.

Reply

`ginkgografix Oct 7, 2012

Personally i prefer things to be equal and with those big thumbs it often seems that not so important things get more attention.

Reply

~Backsackandjack Oct 7, 2012 Traditional Artist

It looks much neater too.

Reply

Mood: Love

~girlink Oct 6, 2012 Student General Artist

Reply

`ginkgografix Oct 6, 2012

Reply

Previous
1
2
Next