Shop Forum More Submit  Join Login

Sierra Journal Skin WORKGUIDE

Wed Jul 25, 2018, 8:46 PM


This journal skin shows how can you use and implement any element to this journal skin
Sierra Journal Skin by DindoArt

You must switch to HTML Mode to insert some elements, because it uses special HTML structure.
After it, you can switch to Rich Edit Mode and keep writting. Avoid editing such elements in Rich Edit mode, and always add a paragraph after this element.

:bulletblue: For blockquotes:
Just add a blockquote element like you normally do, with < blockquote> tag!

:bulletblue: For buttons like this one:

   < a class="button" href="#">Your button< /a>
 
(add " red" or " green" after "button" class for different colores)


:bulletblue: For progress bars:

2/10
Exactly like this one

  < div class="progress">< div class="progress-status status-20" >2/10< /div > < b>Like this one< /b>< /div>

Few changes:
  • Substitute "status-20" by your progress value. "status-10", "status-20", "status-30"..... to "status-100".
  • Add "red" class to the "progress div" for red colors
  • ... or add "green" class for green colors

:bulletblue: For program icons:

Like this oneOr this oneOr maybe this one

< a class="icon folder">Like this one< /a>< a class="icon trash">Or this one< /a>< a class="icon photos">Or maybe that one<  /a>

  • Six types of icons: "folder", "finder", "photos", "books", "site" and "trash".
  • If you want to include a username icon (like a PLZ account), instead of < a class="icon folder">Like this one< /a>, use < span class="icon plz">: iconxxxxxxxx: Like this one< /span>  (in that case, the username icon is the link itself).
  • If you want an external image as an icon, you must insert an IMG tag in the link and the "image" class, like < a class="icon image">< img src="#"> Title of icon< /a>

:bulletblue: Editing the top menu:
  1. In the source code look at the Skin Header inside < div class="menu">, where you can find links with the Apple icon, "File", "Edit"...
  2. Edit each link (substituting # by your link), or add new links!
  3. Tip: the Apple icon could work as easter egg!
:bulletblue: Editing the desktop icons:
  1. In the source code, look at the Skin Footer inside < div class="icons">, where you can find more links.
  2. Such links are exactly the same as the program icons. Add new ones or edit the actual ones.
  3. The Trash icon on the bottom has a special extra class: "down", in "icon down trash". You can remove that class and the link will work like the previous ones, on the top. Use that class in one link only, because it uses absolute position!
:bulletblue: Editing the dock icons:
  1. In the source code, look at the Skin Footer inside < div class="dock">, where you can find more links.
  2. Each link is similar to all icons you can easily implement, but you must remove the text inside eact tag, like < a class="icon trash">< /a>
  3. You can add a vertical line to separate icon groups by adding the class "separated", as in < a class="icon separated site">< /a>
  4. Tip: don't put too many links, or it will break your journal skin. Limit it to < 5 links.
:bulletblue: Changing the background:
  1. First of all, you must know how to implement CSS code: www.w3schools.com/css/
  2. In the code source, search for the CSS rule ".sierra". Searching for "sierra {" make things easier.
  3. Change  "background: url(IMAGE_URL);" with your image URL (or a fixed color)
  4. If you want your background to repeat like a tile, change the background property to "background: url(IMAGE_URL) repeat;".
Any suggestions? Please comment below! :heart:


Skin by DindoArt (modified by DindoArt)
No comments have been added yet.

Add a Comment:
 
×

:icondindoart: More from DindoArt


More from DeviantArt



Details

Submitted on
July 25
Link
Thumb

Stats

Views
305 (14 today)
Favourites
0
Comments
0
×