Shop More Submit  Join Login
×




Details

Submitted on
August 5, 2011
File Size
12.6 KB
Link
Thumb
Embed

Stats

Views
16,047 (1 today)
Favourites
402 (who?)
Comments
126
Installs
1,540
×
Dragonfly Rider V.2 by GillianIvy Dragonfly Rider V.2 by GillianIvy

A Thank You to Everyone!


First, let me show big loves to *RTNightmare, `TimberClipse and `WDWParksGal for the love and support and featuring my skin as a Daily Deviation. I am honored.

This deviation is featured at
:icondailydev-suggesters:

Now, an extra big wonderful thank you to everyone who installs, faves and comments today. I really appreciate every one of you. Please show some love to the stock resources and the tutorial I originally learned from (over a year ago).

I love you all!

View it Live: [link]

For full features and effects, please view this live.

HELP FILE: [link]


This skin has minor HTML which will need to be edited to personalize the journal for your use. This link is a GoogleDoc with instructions in the comments. Simply click the highlighted text and a comment will pop up. You can leave comments, or if I am available, I can chat with you on the document.

Happy 11th Birthday DeviantART

This journal is a re-design of my very first journal skin on DA, which has always been a favorite. Since I started skinning, just over a year ago, my skills have advanced incredibly. I thank my watchers and CSS friends with their constant encouragement as I learn to skin. A thorough critique is appreciated!

This was a test of myself to compare how my original skin from a tutorial has advanced to where I feel confident in my skills and knowledge to be a Mentor at ~eCSSercise.

Free to Use

This is an easy install journal which is also easy to use. There are a lot of extra features, but you really need minimal HTML/CSS knowledge to use this skin.

Do not forget to edit the MENU in HEADER and BLOCKQUOTE in FOOTER to personalize this skin for use -- [link]


Otherwise it will have the defaults, which the menu will have my links and the footer will have a nonsense blockquote in it. The blockquote is there as example for you to use.

HEADER
Edit or remove the <div class="menu"> links in order to change the drop down link menu. IMPORTANT Do NOT alter the ul and li orders, as it can mess up your skin. Altering the menu will take more advanced knowledge, and I cannot explain how to do it.

The header also contains the images for the design and divider line. You can remove this if you wish a plainer skin, however, you may not alter or redistribute them.

Journal Input
First, you will need to add the <p> element to the very beginning to get the first letter to be big. The close tag is in the footer. I did not place it into the header, as it does not do pseudo-class styling properly.

From there, you can simply type up your regular journal entry as normal. But there are a lot of extras you can use to change the fonts, style, colors, float, effects, and more. Please read the journal to see what each does. I'll just list them here, they are better explained in the journal.

H1, H2, H3, H4, H5, H6 & Strong
All of these are used to be subheading/titles with various fonts, colors and effects.
Italics, emphasis, bold, underlined, teletyped, code, strike, small, abbreviations, acronym, subscript & superscript.

More Extras!
Float your thumbs or blocks of text with <div class="right/left"></div>. Blockquotes and two box styles can set features apart. For the dotted feature box, use this: <div class="dotBox"></div> And use <div class="solidBox"></div> for a matching box with a solid border instead. Two matching horizontal rules, <hr> for solid line and <div class="dot"></div> for the dotted line.

Two list styles, Ordered and Unordered. There's no numbers, it's just opposite colors and link styles. they also have a nifty hover effect, because I like hover effects...

For an interesting font change, good for adding quotes <i class="quote"></i> (easy to remember as "I Quote"). This can be stacked with the float DIVs left or right in order to put your quote in a separated section.

Images are formatted 3 ways. First, thumbs, which have shadow and hover effects. Then for emotes, stamps and pngs, you can use <em></em> in order to remove the thumb styling. And finally <img class="zine"> tag is formatted to have a matching style with the skin and a max-width set to fit within the journal. It is a percentage so it can scale to the document. I named it "zine" to be easy to remember as it has a magazine sort of style when put in a column. You can add captions by adding <acronym> or <abbr>.

Center anything in the journal using <div align="center"> </div> around the text or images you want centered.

FOOTER
The footer contains an example blockquote with the quotation images in place. Just copy & paste it where you want it, or delete it if you're not using it. But it's in the footer for you as a template so you don't forget the quotations. The blockquote can also be used without them.

Two images are in the footer, the divider and the design on the bottom right. You can remove them if you wish a plainer skin. However, do NOT edit, alter, or redistribute my art.

Permissions

You are granted permission to use this skin for your personal journal or group. You can alter links and remove image elements, but do not alter the CSS, or artwork. Do not redistribute or manipulate. No derivations permitted.
Stock Textures Used

Artwork by `GillianIvy

Original Design


Tutorial I first learned from


:points: Commissions

Please read my journal for prices: [link] This would be example of a full Custom Design

:iconecssercise: :iconcss-babes: :icondeviantcss: :iconecssited:
Please support the CSS community! (CSS-babes & DeviantCSS are both trying to raise points to renew Super status)

Help & FAQ's

Please make sure you have read through instructions. I will try to help you with the installation and use as best as I can, however, I cannot just teach you HTML. For advanced features you will need to have at least a working knowledge of basic HTML. This journal is user friendly, though some parts may be fairly complicated to edit. Please refer to my journal forum for any troubleshooting issues: [link]
Browser Compatibility
This journal is optimized for use in Mozilla Firefox. It should also be supported in Google Chrome (I didn't test as we uninstalled it, have not reinstalled yet, please comment me any issues in my forum), there may be minor differences in the glowness of fonts causing text to appear blurry. Using <em> should clear the glow. Internet Explorer does not properly show up all the glow effects which will make reading the mood box and bottom links very difficult. You may wish to simply turn those off, or add in a contrasting bg. I can assist you with this.

Edit - Fix to Lit thumbs and attribute/credit shadow/mood bg removal

Please use the following codes to fix up the lit thumbs a little nicer:

q{
padding:5px;
text-shadow:none;
color:#ffffff;
}

q strong{
text-shadow:none;
}

q strong:hover{
text-shadow:#ffffff 0 0 4px;
color:#ffffff;
}

img.lit{display:none;}

.list .a{background:none;}

.skin_attribution a{
text-shadow:none;
}

Simply cut & paste to the end of your CSS section and hit save.
Add a Comment:
 

Daily Deviation

Given 2011-08-19
Dragonfly Rider V.2 by =GillianIvy

CATEGORY: deviantART Related / deviantART Skins & Scripts / Journal & Gallery Skins / Installable Journal Skins:

The suggester says of the wonderful, free installable-CSS, "A gorgeous, and brilliant Journal Skin usable by any Premium User!" There is a "live link" to check to see how it looks in use. Really nice and very striking!"

Also suggested by *14forever who says, "This is a really creative Journal Skin. It's dark, but fabulously and amazingly creative. I love it!" ( Suggested by TimberClipse and Featured by WDWParksGal )

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconpryvian:
Pryvian Featured By Owner 5 days ago  Hobbyist Traditional Artist
It's amazing! *_* I love it <3 
And I hope you don't mind I use it in my journal :3
Reply
:icongillianivy:
GillianIvy Featured By Owner 5 days ago  Hobbyist General Artist
Please do ;D  It may be outdated a bit now, so if things don't look as the preview, feel free to ask for help.
Reply
:iconbeltaneh:
Beltaneh Featured By Owner Apr 20, 2014
This is beautiful :heart:
I will use it, if you don't mind
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 20, 2014  Hobbyist General Artist
I do not mind at all.  Please enjoy!  :D
Reply
:iconbeltaneh:
Beltaneh Featured By Owner Apr 20, 2014
Thank you!
Reply
:iconnaralilia:
NaraLilia Featured By Owner Mar 14, 2014
Using this skin, and I mentioned you in the footer as a big thank you for making this F2U journal, it looks amazing :heart::heart:
Looking forward to seeing more of your work!
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 15, 2014  Hobbyist General Artist
Thank you!  I am glad you are enjoying it, and thanks for the mention, I appreciate that.  ;D  I will be making more skins, no worries there.  I've just been slow about it lately!  lols.  I see you were interested in CSS/Journals and Custom box type stuff.  Check out a few groups eCSSited , deviantCSS , and CustomizeYourProfile 
Reply
:iconnaralilia:
NaraLilia Featured By Owner Mar 15, 2014
Oh thank you! :D
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 15, 2014  Hobbyist General Artist
Also, CypherVisor has a great custom box tutorial which shows you how to skin a lit deviation and set it as your featured deviation.  You can make menus or just have a custom box of stuff.  They are smaller than the regular custom box widget extras, but interactive.  He also has a tonne of resources in his gallery (and does commissions for custom box, etc).  Good luck! :thumbsup:

Profile Navigation Menu tutorial by CypherVisor  
Reply
:iconnaralilia:
NaraLilia Featured By Owner Mar 15, 2014
Oh my gosh, thank you for providing all this information, you are being such a big help and I appreciate it :) :heart: And thank you, I'm already watching him haha cx
Reply
Add a Comment: