Shop Mobile More Submit  Join Login
×




Details

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

Stats

Views
16,214
Favourites
403 (who?)
Comments
126
Installs
1,563
×
Dragonfly Rider V.2 by GillianIvy Dragonfly Rider V.2 by GillianIvy
Edit 1/1/2015 -- Fix for the external links add the following to the bottom of the CSS code and save.

a.external:after{display: none!important;}

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: gillianivy.deviantart.com/jour…

For full features and effects, please view this live.

HELP FILE: docs.google.com/document/d/1Op…


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 -- docs.google.com/document/d/1Op…


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">>. Blockquotes and two box styles can set features apart. For the dotted feature box, use this: <div class="dotBox"> And use <div class="solidBox"> for a matching box with a solid border instead. Two matching horizontal rules, <hr> for solid line and <div class="dot"> 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"> (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> 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"> 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
six papers by hibbary20 Grunge Textures by env1ro
Artwork by GillianIvy
Dragonfly Rider by GillianIvy
Original Design
Dragonfly Rider Journal Skin by GillianIvy

Tutorial I first learned from
Journal CSS - Part 1 by kuschelirmel-stock

:points: Commissions

Please read my journal for prices: gillianivy.deviantart.com/jour… 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: gillianivy.deviantart.com/jour…
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 Nov 18, 2014  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 Nov 18, 2014  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
:icongillianivy:
GillianIvy Featured By Owner Mar 15, 2014  Hobbyist General Artist
Of course, he's brilliant!  (and not just saying so because he likely has mentions on and may see the conversation!)  hahaha.  No problem, I do not mind pointing someone where they are looking to go.
Reply
:iconnaralilia:
NaraLilia Featured By Owner Mar 15, 2014
Well again, thank you very much :)
Reply
:iconnaralilia:
NaraLilia Featured By Owner Mar 15, 2014
Or her, I'm not exactly sure of course cx
Reply
:iconsoturisi:
Soturisi Featured By Owner May 29, 2013  Hobbyist Traditional Artist
How do you do for put the capital letter and the blue "title" in the journal?

Thank you! ^^
Reply
:icongillianivy:
GillianIvy Featured By Owner May 29, 2013  Hobbyist General Artist
"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. "

More usage styling instructions are in the artist's comments. Basically, begin your journal post with <p>
Reply
:iconsoturisi:
Soturisi Featured By Owner May 29, 2013  Hobbyist Traditional Artist
aaaaaaaaaaaaa ok ok, thank you very much!
Reply
:icongillianivy:
GillianIvy Featured By Owner May 29, 2013  Hobbyist General Artist
Sure! This is now an older skin, so if anything is broken looking, let me know, I'll help you.
Reply
:iconsoturisi:
Soturisi Featured By Owner May 29, 2013  Hobbyist Traditional Artist
Okay!! ^^ It work right (at this time) xD
Reply
:iconxxblackiaxx:
xXBlackiaXx Featured By Owner Mar 5, 2013  Student Traditional Artist
Can I use this:3
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 5, 2013  Hobbyist General Artist
Yes. ;D
Reply
:iconxxblackiaxx:
xXBlackiaXx Featured By Owner Mar 5, 2013  Student Traditional Artist
Thank you:3
Reply
:iconextraphotos:
extraphotos Featured By Owner Jan 6, 2013  Student Artist
Wow beautyfull well done ok use club [link]
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 6, 2013  Hobbyist General Artist
Of course, feel free to use. You'll need to remove the blockquote from the footer. And the </p> if you aren't using the big letter feature.
Reply
:iconextraphotos:
extraphotos Featured By Owner Jan 7, 2013  Student Artist
Ewww wot ask how post do that get confused edit skin ? You can do it
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 8, 2013  Hobbyist General Artist
Yes, you go to "Edit Skin" clear out the footer (unless you're going to use it). You'll need to edit the Header links also, since it is all mine. I should have blanked everything out. Once all edits are made, then save the new copy with a new name so you can always go back to the original if there is a mistake.
Reply
:iconextraphotos:
extraphotos Featured By Owner Jan 9, 2013  Student Artist
Oh ok them just leave it at is useing club be awile I get PM ship
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 9, 2013  Hobbyist General Artist
Ah, ok. I suppose let whoever can edit in the club know. I have had Facebook invites before in the past because I forgot to make everything blank, and people thought I was someone else. I try to be more careful of that on new journal designs ;D
Reply
:iconextraphotos:
extraphotos Featured By Owner Jan 9, 2013  Student Artist
Awww ok them, yea copy has got don't mess around it left at is nice skin done not many fairy
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 9, 2013  Hobbyist General Artist
;D Yea, I guess there aren't many fairy skins, hahaha.
Reply
:iconflazilla:
Flazilla Featured By Owner Nov 23, 2012  Hobbyist Digital Artist
Hello there ! :heart:
Thank you for this beautiful Journal skin ! :love:
Reply
:icongillianivy:
GillianIvy Featured By Owner Nov 23, 2012  Hobbyist General Artist
Aww, thanks for the nice thank you! :D If there's any issues (this is now out of date a bit with dA codes), l et me know and I'll help you with it.
Reply
:iconkagenokyokikitsune:
KagenoKyokiKitsune Featured By Owner Sep 1, 2012  Hobbyist General Artist
hi there, i'm using your journal skin and i only have few accounts like FB, Twitter, tumblr so I hope you don't mind that I cut the rest off in the edit css format. It wouldn't make sense to have other links when you dont even have accounts on them if you know what I mean.
Reply
:icongillianivy:
GillianIvy Featured By Owner Sep 1, 2012  Hobbyist General Artist
Oh yes, it's meant to be edited (since I think I left the defaults as mine). I once had someone try to add me on FB thinking I was a cosplayer on deviantART :giggle: I sometimes forget to blank out all the default urls to avoid that sort of mix up.
Reply
:iconskuggmorker:
Skuggmorker Featured By Owner Aug 7, 2012
Beyond amazing! :heart: :noes:
Reply
:icongillianivy:
GillianIvy Featured By Owner Aug 8, 2012  Hobbyist General Artist
:aww: Thank you! There may be some outdated code in this, let me know if anything needs fixes, I'll help.
Reply
:iconskuggmorker:
Skuggmorker Featured By Owner Aug 8, 2012
I wonder if I could change the quote box? ^^
Reply
:icongillianivy:
GillianIvy Featured By Owner Aug 8, 2012  Hobbyist General Artist
The code could be redone simpler, but for installables, I can't change them without deleting the old and making the new. This one was my DD, so it will stay foreverz! :giggle:

The quote box in the footer is there as a blueprint, so delte from the one you are posting by clicking "apply" instead of "save". Remember to save your changes for the header menu so it has all your links instead of mine. I do not mind the free advertising, but I've had peole come to my Facebook thinking I am someone else ;P
Reply
:iconskuggmorker:
Skuggmorker Featured By Owner Aug 8, 2012
Oooh, alright then. ^^ Thanks!
Reply
:iconrobigohan:
robigohan Featured By Owner Jun 8, 2012  Student Digital Artist
I would like to use this skin on my group journal but I need the codes cuz when I press "install journal skin" it's installing it for only my profile and I dont want it on profile I want it on journal group.
I was hoping u will help me and give me the codes so I can add this to my group :) . I have no knowledge about how to work with those codes so I was hoping u will help me and give me the codes so that I can add them in Skin Header, Skin CSS and Skin Footer . I hope u can help me.
Thx I wait for answer.
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 8, 2012  Hobbyist General Artist
If you have it installed you can copy & paste each field into the corresponding sections. Header to Header, etc. Then save the file (edit any links, etc first). Alternately, you can use Sta.sh to submit to your group with the skin from the install version. I think each blogger would need to have it installed in order to use that option. But it may be easier than managing the group journals. (I wish they had installables active in groups) Like an install to group option, that would be great! Need gallery installs and group installs ;D

If you need further help, I'll try the best I can, maybe send the code via notes.
Reply
:iconrobigohan:
robigohan Featured By Owner Jun 9, 2012  Student Digital Artist
wait sry for this spam but I have read better ur comment and I managed to add the skin . I didnt knew i had to press edit skin.
Thx again for your help and sry for so much coments :/
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 9, 2012  Hobbyist General Artist
Glad you got it worked out ;D
Reply
:iconrobigohan:
robigohan Featured By Owner Jun 9, 2012  Student Digital Artist
I pressed the install journal...it installs in my journals skins for profile and I want it on group . I don't have any code knowdlege and I can't understand the turitorials they don't specify nothing useless for a beginer ...only who have knowledge can understand.
Please help me x.x. my group is :icondestiel-winchester: I need the codes and I dont know how to get them.
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 9, 2012  Hobbyist General Artist
Just checked your journal, you'll need to edit the links, as it has mine in there.
Reply
:iconakyra-hatake:
Akyra-Hatake Featured By Owner Feb 27, 2012
OMG this is soooo beautiful *O*
Reply
:icongillianivy:
GillianIvy Featured By Owner Feb 27, 2012  Hobbyist General Artist
;D Thank you!!!
Reply
:iconkatsuri-kuroneko:
Katsuri-Kuroneko Featured By Owner Jan 19, 2012  Student Digital Artist
These are adorable and very well made. It's also the perfect color since I adore purple and there seems to be no really good purple ones (outside of anime, or fits me in general) that I can find...

Keep up the good work
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 19, 2012  Hobbyist General Artist
Thank you so much for the comment. I'm glad you like my skin ;D
Reply
:iconamaronte:
Amaronte Featured By Owner Jan 19, 2012
I love this!
Reply
:icongillianivy:
GillianIvy Featured By Owner Jan 20, 2012  Hobbyist General Artist
:heart: thank you!
Reply
Add a Comment: