Edit 1/1/2015 -- Fix for the external links add the following to the bottom of the CSS code and save.
A Thank You to Everyone!
First, let me show big loves to RTNightmare
for the love and support and featuring my skin as a Daily Deviation. I am honored.
This deviation is featured at
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!
For full features and effects, please view this live.
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.
Edit or remove the <
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.
First, you will need to add the <
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
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,
strike, small, abbreviations, acronym, subscript & superscript.
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
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 <
Center anything in the journal using <
div align="center"> around the text or images you want centered.
FOOTERThe 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
Tutorial I first learned from
Commissions Please read my journal for prices: gillianivy.deviantart.com/jour… This would be example of a full Custom Design
Please support the CSS community! (CSS-babes & DeviantCSS are both trying to raise points to renew Super status)
Help & FAQ'sPlease 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 CompatibilityThis 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:
text-shadow:#ffffff 0 0 4px;
Simply cut & paste to the end of your CSS section and hit save.