Shop Forum More Submit  Join Login
About Digital Art / Professional Core Member DindoArtBrazil Recent Activity
Deviant for 1 Month
4 Week Core Membership:
Given by an Anonymous Deviant
Statistics 7 Deviations 1 Comment 528 Pageviews

Newest Deviations

Sierra Journal Skin by DindoArt Sierra Journal Skin :icondindoart:DindoArt 0 0 System1 Journal Skin by DindoArt System1 Journal Skin :icondindoart:DindoArt 10 0

Shoutbox

DindoArt:icondindoart:
First post and first shout! Wow, I'm anxious!
Wed Jul 25, 2018, 10:33 AM
Nobody

Groups

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:


Comments


Add a Comment:
 
:iconfredmai:
fredmai Featured By Owner Jul 27, 2018  Professional Digital Artist
Obrigado pela troca, amigo! :)
Reply
:icondindoart:
DindoArt Featured By Owner Jul 27, 2018  New Deviant Professional Digital Artist
De nada! :)
Reply
:iconfredmai:
fredmai Featured By Owner Jul 27, 2018  Professional Digital Artist
Nod Hug Hi! 
Reply