HOME | DD
artbymba — Transform Journal Skin
#css #advancedskin #premiumjournalskin #dajournalskin #cssskin #journal #journalskin #skinscss
Published: 2014-12-17 19:23:13 +0000 UTC; Views: 4482; Favourites: 100; Downloads: 199
Redirect to original
Description
∞ Free Skin Live Preview∞ Pink Skin Live Preview
∞ My Skin Gallery
∞ Journal Skin Commission Info
Update (27.02.2016):
- - - - - - - - - - - - - - - - - - - -
- Transform Skin Special Feaures:
- Dropdown Menu
- Thumbs Zoom Effect
- Premium Skin Special Feaures:
- Dropdown Menu
- Thumbs Zoom Effect
- Scroll Box
- Columns
- Thumbs With Info Bubble
- Easy to Customize
- Buttons
- Free skin instructions are below.
Update (01.01.2015):
- - - - - - - - - - - - - - - - - - - -
- Optimized the code.
- Fixed some bugs.
- Updated the preview image.
- - - - - - - - - - - - - - - - - - - -
TERMS & CONDITIONS
- - - - - - - - - - - - - - - - - - - -
1 - You must be premium member to use custom journal skins.
2 - This is a free journal skin. You can use and customize it for only your PERSONAL use.
3 - Do not remove the credits.
4 - Do not redistribute and sell this skin, edited or not. Do not steal. Do not re-upload, share with anyone else or/and use the code as a base. Do not claim it yours.
Copyright: melikebat.deviantart.com
5 - For more information read this article: Free Journal Skins - What does that mean? fav.me/d3jjvq8
- - - - - - - - - - - - - - - - - - - -
CREDITS & STATEMENTS
- - - - - - - - - - - - - - - - - - - -
1 - I learned coding from deviantart. Here are the tutorials that will help you with the codes: melikebat.deviantart.com/favou…
2 - Haven't been tested in browsers other than Google Chrome. So let me know any glitch you find in other browsers; I will do my best to fix.
3 - Art used in the preview is from my gallery. Quote at the bottom is from "The Imaginarium of Doctor Parnassus".
- - - - - - - - - - - - - - - - - - - -
Instructions:
- - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - -
Navigation
- - - - - - - - - - - - - - - - - - - -
To customize the links in navigation menu; go to submit journal/edit journal/sta.sh writer and click "change skin"and then "edit skin". A conversation box will be opened; accept the terms and conditions. Once "Customize Skin" window is opened, at the "Skin Header" section, replace the content, URLs and corresponding labels in between "menu" div tags with yours.
- - - - - - - - - - - - - - - - - - - -
Blockquote and Source
- - - - - - - - - - - - - - - - - - - -
QUOTE HERESOURCE
- - - - - - - - - - - - - - - - - - - -
Normal Thumb Box
- - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - -
Feature Box: Art With Stylish Thumbs
- - - - - - - - - - - - - - - - - - - -
Just use the thumbcode with div class "feat". No special HTML is needed.
- - - - - - - - - - - - - - - - - - - -
Credit
- - - - - - - - - - - - - - - - - - - -
Do not remove the credit in the footer section of the skin:
Related content
Comments: 23
I have a question involving the drop box menu. The question is if there is a way to change the size? What I mean is, when I deleted or "removed" the icons and texts [not the code] I noticed that it was rather big. Is there a way to scale it down to where it doesn't look too big?
👍: 0 ⏩: 1
Hello. Sorry it took me quite a while to get back to you.
You have to change it the code to achive what you want.
Find this part of the code and change the underlined number here" height: 210px; " to change the height of the drop down menu. But changing it will result in some bugs. So you have to edit the underlined number in this line too: " padding: 14px 20px 40px 20px; "
An example:
If you reduce the height 100px ( height: 110px; )
You have to add 100px to padding ( padding: 14px 20px 140px 20px; )
.menu{
position: fixed;
top: 0;
margin: -264px 0 20px -20px;
padding: 14px 20px 40px 20px;
height: 210px;
width: 100%;
overflow: auto;
box-shadow: 0 7px 4px -4px rgba(163, 163, 163, .5);
text-align: center;
background: #f2eea4;}
👍: 0 ⏩: 1
Awesome journal skin!
I love that you learned HTML and CSS coding from DeviantArt! It's basically what spurred me to learn web coding as well!
👍: 0 ⏩: 1
I am glad you too are learning CSS! It is so much fun. 
👍: 0 ⏩: 1
It really is a fun and easy language to learn!
👍: 0 ⏩: 0
Is it possible to put an image in the circle or rectangle buttons?
👍: 0 ⏩: 1
Yeah, it is possible. Image size is important. Can you show me the one in your mind?
👍: 0 ⏩: 0
Someone's in love with hover effects.
Nice work, this must have been a lot of coding.
👍: 0 ⏩: 1
Haha. Yes. I know I over use them but I am just learning and they arelike new toys to me. I hope my exaggeration soon will fade. 
👍: 0 ⏩: 1
I don't overuse fany things because they can cause so much work.
Plus, I like simple things.
It is fun to "discover" a journal with hovers though. It's like a little adventure.
👍: 0 ⏩: 1
You're right. Simple things look more elegant. I agree with you. 
👍: 0 ⏩: 0
Wonderful design. The hovers are fun, the little cred/title pop up are so spinny.
👍: 0 ⏩: 1
Thank you so much! Transitions and transform effects are too enjoyable to play with...
👍: 0 ⏩: 1
Yes, I'm still learning the nuances between ease, ease-in, ease-out, ease-in-out.... lolols. My codes are probably a silly mess. And then trying to make the speed something that doesn't make you nauseous to look at... hahaha.
👍: 0 ⏩: 1
Haha, yeah. That happens to me too. I can over-do things sometimes. It is just too fun.
👍: 0 ⏩: 0
