Shop More Submit  Join Login
×

Featured in Collections

Journal Templates and Custom boxes by KovoWolf


More from deviantART



Details

Submitted on
December 6, 2010
File Size
2.5 KB
Link
Thumb
Embed

Stats

Views
2,275 (1 today)
Favourites
33 (who?)
Comments
19
Installs
188

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Share Alike 3.0 License.
×
Gillian's Ultimate CSS Template by GillianIvy Gillian's Ultimate CSS Template by GillianIvy

    UPDATED v.3

  • Commented sections to explain use of each area.
  • Embedded Deviations
  • Text Formats
  • Extra Div placeholders
  • Author tag code
  • 3 Layers of Journal Containers
  • Alt image coding
  • Lit/Journal Thumbs
  • Pre-formatted left/right/clear floats
  • Skin Attribute
  • Journal Edit Mode Preview


This is the exact template that I use as a base to code all my journal skins, now organized so that other people can understand it! :w00t: The commented sections explain each section. There isn't great detail, just a brief over view. This will continue to be updated as new coding or dA changes occur. This is up to date as of 5/2/2013. You can view my live template work file in my GoogleDrive. I keep more notes as I go and bold new entries.

Google Drive Template



This snippet is a bare bones top to bottom journal CSS. It has absolutely no formatting. (other than to make everything blank, the "Clear All" snippet is coded)

There is no instruction how to use this either. This is not a tutorial. It is a blank template. You will need to know basic CSS in order to fill in the blanks. There are numerous tutorials on DA for this, as well as on w3schools: [link] I will not reiterate what they've all said.

This is a useful resource to start out your template, as a blueprint. I've made it installable so you can use it as your base, simply choose it instead of the default:Deviant Green when you start your new layout. Then create yours and save as new.

Included in this installable snippet:

*, .gr, .gr-box, .gr-top, .gr1, .gr2, .gr3, .tri, .gr-top h2 img, .gr-top h2, .gr-top span, .grf-indent, .gr-body, .text, .bottom, .hsep, .commentslink, .prevlink, .list, em, p, strong, blockquote, li, a, a:hover, a:visited, .shadow, .shadow-holder, .shadow-holder img


No special divs, sidebars, navs, menus or anything are included. Sorry no live view, but it looks just like the image... nothing! :XD:

Useful Resources



Tutorial collections which may be useful with this snippet:

:iconecssited: - [link]
:icondeviantcss: - [link]
:iconjournalcss: - [link]
:iconcss-babes: - [link]

No credits required for anything, this is all general and free knowledge. Comments and faves are appreciated.

Thanks to :iconim-not-sana: for author tag addition. And Thanks goes out to :iconmiontre: for introducing me to negate-margin/put-art-here and more and going over all these in extensive notes.

Please follow #CSS-DYK for the CSS series with mini tutorials.
CSS Did You Know? - May 2nd, 2013Volume 9
:iconcss-dyk:
Welcome
CSS can be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note #CSS-DYK. :)
Inside
dA Embedded Deviations and Videos Styled by `GillianIvy
Author by `im-not-sana
:icongillianivy:
dA Embedded Deviations and Videos Styled
What Am I Talking About?
What is the difference between an embedded deviation and a deviant thumb?  Glad you asked.  The thumbs have the codes everyone already knows and loves.  And if you don't know what I'm on about, then look on the sidebar of your deviation and you will find your thumbcode.  These codes can be used in journals, widgets and artist descriptions to link a thumbnail of the deviation.
Add a Comment:
 
:iconim-not-sana:
im-not-sana Featured By Owner May 2, 2013  Hobbyist General Artist
Ooh I was thinking of doing this ages ago too :D Just never got round to it, but nice work! :#1:

A few things to add:

*{
border:0;
padding:0;
margin:0;
}

adding just 0 works too and is shorter :D

also for Lit tags you need to add
a.lit img {border:0;}
since sometimes the images in journal thumbs get affected

and maybe add
ul li{}
li ul{}

as well?

I'll let you know if I think of any more :aww:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 2, 2013  Hobbyist General Artist
I usually skip using those since I had .text li{} :B And lols, I forgot I had px's written in there. I have the img lit to display none. Is there still a border on them? Anyway, that is something I'd edit per skin. But normally, I get rid of it.

I had this a long while ago, made it when ~eCSSercise existed. I still have things in the back room there I need to get cleaned up :B I bet some are probably outdated.

Thanks for the tips.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 2, 2013  Hobbyist General Artist
Yeah but li ul{} then codes the list within the list :D It's handy for making menus, which reminds me.. should make a #CSS-DYK about menu's with lists if no one has already done it :lol:

img lit is different from a.lit img, but yeah that's true I think that problem only showed up if someone's coding a img{}

You can still access groups that are closed? :o
Reply
:icongillianivy:
GillianIvy Featured By Owner May 3, 2013  Hobbyist General Artist
The group wasn't ever shut down completely. I still need to clean out my stuff. It just became a daunting task as I already added so much stuff there. ;P

You should join #CSS-DYK as a contributor. We're looking for more authors. There's a list in the bg what is planned and what is suggested to write.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 3, 2013  Hobbyist General Artist
Ooh interesting! Wait, how can you access groups that you've closed down? :o (I have one that I'd like to access the backroom to :shifty:)

I'm already a contributor in #CSS-DYK silly :giggle:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 3, 2013  Hobbyist General Artist
Oh duh. My brain is addled today. ;P

The group wasn't ever closed, I think just no one new can join. Oh wait, maybe it is closed now? Checked the link but seems to be broken. I didn't hit preview. Oh well, she gave me more than a year to clean out everything I had in there. I am a bad procrastinator.
Reply
:iconlilileap20:
lilileap20 Featured By Owner Oct 23, 2011  Student General Artist
Can you tell me how to make a skin?
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 23, 2011  Hobbyist General Artist
I can help, what did you need to know?
Reply
:iconlilileap20:
lilileap20 Featured By Owner Oct 24, 2011  Student General Artist
What the size has to be and stuff like that?
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 24, 2011  Hobbyist General Artist
The size depends on screen width. Everyone will have different sizes, so it's important to bare that in mind when making your skin. The easiest way to check how you skin would look on a smaller monitor would be to resize your preview window. I shrink and expand it several times as I work to watch how it does. Also, testing with short amounts and long amounts of content is good.

So, most monitors should be able to view things that are in the 500-600px range. However, this would look small on large screens. For best flexibility, your design would expand with the window size. Rather than a set size, have a bg that either tiles nicely, or blends into the bg color well so it flows.

Height does not need to be set unless you are limiting the length of the journal due to design constrictions. Again, it's sometimes best to use tileable images or a design that can stretch as more content is added, and shrink to look good even if there is very little content. If you want a fixed height and a scrollbar to appear, you add a line for height PLUS a line for overflow:auto;. Auto makes it determine whether or not it needs the scrollbar.

So, your sizes will vary with your designs. I usually design my layout first in an image editing program. You may wish to start with something simple first. Try two images, a HEADER and a FOOTER, keep the body section a solid color. From there, position all your elements into the CSS. Put your HEADER in .gr-box{background:#000000 url('URL'); background-position:top center;} and FOOTER can go in .gr-body{background:#000000 url('URL'); background-position:bottom center;}. Pay attention that one is set to top and the other is set to bottom, that will put them in the correct places.

I have a number of tutorials and such which you may wish to go through. [link] They are contained in my Resources and Stock gallery folder: [link] Which I also have a collection of graphics I use for my journal skins, such as gradients and semi-transparent fills. They are free to use.

Um, warning, I am prone to long responses....

You may want to join #eCSSercise as a Student, membership is now open. I am a Mentor there and there are many lessons in the backroom. We will be transferring some to the journal system to make the group more user friendly ;D
Reply
Add a Comment: