artbymba on DeviantArthttps://www.deviantart.com/artbymba/art/Pink-and-Chocolate-Journal-Skin-419945467artbymba

Deviation Actions

artbymba's avatar

Pink and Chocolate Journal Skin

By
Published:
5.1K Views

Description

Live PreviewMy Skin Gallery

Journal Skin Commission Info




Update (01.01.2015):
- - - - - - - - - - - - - - - - - - - -
  • Optimized the code.
  • Fixed some bugs.
  • Buttons feature added.
  • Used transitions.
  • Changed colors with warmer ones.
  • Added shadows, borders and gradients.
  • In a nutshell: Re-designed it. :D



Credits and statements:
- - - - - - - - - - - - - - - - - - - -
  1. I learned coding from deviantart. Here are the tutorials that will help you with the codes: CSS Tutorials
  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 and journals featured in the preview is from my gallery: Dark Tower; literature thumbs are from my journal: Promoting Corner: Previous Volumes, Story Store: Shelf



Terms and 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.
  5. FAQ #66: What journal features do I have access to?
  6. FAQ #62: How do I use Journal skins?
  7. For more information read this article: Free Journal Skins - What does that mean?



Instructions:


- - - - - - - - - - - - - - - - - - - -
  1. Click the "Install" button at the top right corner.
  2. You can automatically apply html/div tags with sta.sh writer. Also, if needed, you can find more about html formatting and regular html tags here in this article: User Friendly Journal Skinning
  3. Below you will see a guide to HTML formatting for this journal skin. Replace the bold words with suitable ones.
  4. Have fun!


- - - - - - - - - - - - - - - - - - - -
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.

<div class="menu"><a href="URL">FACEBOOK</a> <a href="URL">GALLERY</a> <a href="http://www.deviantart.com/messages/notes/#to=DEVIANTNAME">NOTE ME</a></div>

- - - - - - - - - - - - - - - - - - - -
Pink Buttons
- - - - - - - - - - - - - - - - - - - -
<div class="but1"><a href="URL" target="_blank">FACEBOOK</a> <a href="URL" target="_blank">TWITTER</div>

- - - - - - - - - - - - - - - - - - - -
Chocolate Buttons
- - - - - - - - - - - - - - - - - - - -
<div class="but2"><a href="URL" target="_blank">FACEBOOK</a> <a href="URL" target="_blank">TWITTER</div>

- - - - - - - - - - - - - - - - - - - -
Blockquote and Source
- - - - - - - - - - - - - - - - - - - -
<blockquote>QUOTE HERE<div class="source">SOURCE</div></blockquote>

- - - - - - - - - - - - - - - - - - - -
Scrollbox
- - - - - - - - - - - - - - - - - - - -
<div class="sbox">SCROLL BOX CONTENT</div>

- - - - - - - - - - - - - - - - - - - -
"Back To" Link (Using Internal Linking In Journals)
- - - - - - - - - - - - - - - - - - - -
<a name="ICECREAM"><code></code></a>
<a class="back" href="URLOFTHEJOURNAL#ICECREAM">BACK TO ICECREAM</a>

- - - - - - - - - - - - - - - - - - - -
Two Column Text:
- - - - - - - - - - - - - - - - - - - -
<div class="tab">
<div class="col2">TEXT IN COLUMN 1</div>
<div class="col2">TEXT IN COLUMN 2</div>
</div>

- - - - - - - - - - - - - - - - - - - -
Three Column Text:
- - - - - - - - - - - - - - - - - - - -
<div class="tab">
<div class="col3">TEXT IN COLUMN 1</div>
<div class="col3">TEXT IN COLUMN 2</div>
<div class="col3">TEXT IN COLUMN 3</div>
</div>

- - - - - - - - - - - - - - - - - - - -
Four Column Text:
- - - - - - - - - - - - - - - - - - - -
<div class="tab">
<div class="col4">TEXT IN COLUMN 1</div>
<div class="col4">TEXT IN COLUMN 2</div>
<div class="col4">TEXT IN COLUMN 3</div>
<div class="col4">TEXT IN COLUMN 4</div>
</div>

- - - - - - - - - - - - - - - - - - - -
Normal Thumb Box
- - - - - - - - - - - - - - - - - - - -
<div class="ntb">:thumb######:</div>

- - - - - - - - - - - - - - - - - - - -
Credit
- - - - - - - - - - - - - - - - - - - -
Do not remove the credit in the footer section of the skin:
<div class="credit">Skin Credits</div>
© 2013 - 2024 artbymba
Comments19
Join the community to add your comment. Already a deviant? Log In
YagiMatsu's avatar
Oh this is gorgeous! ^^ I'm totally using this!