Shop Forum More Submit  Join Login

Sierra Journal Skin

Wed Jul 25, 2018, 7:23 PM


macOS Sierra (version 10.12) is the thirteenth major release of macOS (previously OS X), Apple Inc.'s desktop and server operating system for Macintosh computers. Wikipedia
Soooo... a macOS Sierra journal skin with a macOS High Sierra background (lol). What can you do?
... what about icons?

Icons!... and more icons!With multiple images! :iconfaveplz: A PLZ icon!External 256x256 image
Buttons? Choose one!

Button Red hover button Green hover button

Progress bar?

2/10
10 status (10 to 100)

30/50
Red color!

$ 50/100
... and green color as well


If you like it, you can install it now!!

:iconawesomeplz:

System 1 Journal Skin WORKGUIDE

Wed Jul 25, 2018, 9:44 AM


This journal skin shows how can you use and implement any element to this journal skin
System1 Journal Skin by DindoArt  System1 Updated 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.

First of all, if you want to update your skin to this modern version:
  1. Open the Skin code by clicking on "Edit skin" link
  2. Find "system1" on the Skin Header and add " going-modern" after it (similar to "system1 going-modern").
  3. Maybe update the background image using the "Changing the background" tip.
  4. Save the skin and... voila!!
:bulletblue: For blockquotes:
Just add a blockquote element like you normally do!
There is a black version of the blockquote:
  1. Switch to HTML Mode
  2. Find the blockquote tag
  3. Add the "black" class in the blockquote tag, like < blockquote class="black" > TEXT < /blockquote>
  4. And now you have the black version of the blockquote!

: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 "blackwhite" class to the "progress div" for the black-and-white version of the progress bar (doesn't work on "modern layout")...
  • ... or "progress-brick" for the brick tiles (doesn't work on "modern layout").

: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 machine">Or maybe that one<  /a>
Valid icons: "folder", "trash", "machine", "floppy" and "floppy2".

: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: 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 ".system1". Searching for "system1 {" make things easier.
  3. You'll find this property "background: #999;". Change it by "background: url(YOUR_IMAGE);" - YOUR_IMAGE is a direct link to your image, starting with http(s).
  4. If you want your background to expand, always filling the entire journal instead of repeating itself like a tile, add a new property below: "background-size: cover;".


System 1 Journal Skin!

Wed Jul 25, 2018, 9:13 AM


"System 1" is the first Apple Macintosh operating system version and the beginning of the classic Mac OS series. It ran on the Motorola 68000 microprocessor. System 1 was released on November 13, 1983, along with the Macintosh 128K, the first in the Macintosh family of personal computers. It received one update, "System 1.1" on December 29, 1984, before being succeeded by "System 2".Wikipedia
Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked. There is no reason not to follow your heart.Steve Jobs

Hello, I'm Macintosh. It sure is great to get out of that bag.


Soooo... a System 1 journal skin. What can you do?
... what about icons?

Icons!... and more clickable icons!With multiple images!Anytime!It's so cool!It's so cool!

What about:
  • Desktop icons? Look at the right. Everything is a link! Just add another link following the structure in the Skin Footer.
  • Top menus? "File", "Edit", "View"... bah! You can change to "Gallery", "Patreon", "Youtube"...! Any link you want!
  • Btw, the Apple logo is also a link! XD
  • A Close button? Well, you can't close this window, but the square "close" button is also a link! What about an easter egg?
  • Youtube videos? Thumbnails? :iconfaveplz: PLZ icons? :heart: icons? You can embed anything you could embed on a normal journal skin, but it would break the nostalgia, hehehe~
  • Different background? Try changing the background of ".system1{}" on Code Inspector! You can upload your texture and change the background. What about one of the artworks you love?

This is a button Second button (red color) Third button (green color)

Now for something completely different: progress bars!!

2/10
Commissions made!

50%
complete (hey, no texture!)

$ 365/1000
sales this month (another texture)

Cool, isn't it?

Do you know what is cooler? A modern skin, right?

You can add the class "going-modern" to the class "system1" in the Code Inspector!
You will get an updated skin, similar to macOS Sierra!
C'mon, try now! Edit this page source code, substitute "system1" to "system1 going-modern" and hit Enter!

System1 Updated by DindoArt
An example? Doing it, you will see three colored button in this skin.

Journal Skin Playground

Tue Jul 10, 2018, 9:51 AM


If you are reading this content, congratz! You just found my journal skin playground!
This journal post is being used for layout development! If its content doesn't make sense, well, you're right, it shouldn't make.

Icons origin: www.aimcenteraz.com/2018/05/be…
Background: 512pixels.net/projects/default…

Just add a blockquote element like you normally do!


:iconawesomeplz: