pica-ae's avatar
Good Morning, Good Morning!
By pica-ae   |   Watch
312 45 7K (1 Today)
Published: January 8, 2014
© 2014 - 2019 pica-ae
Second skin made for bradleysays   Journal Skin January :squee: :eager: :iconcheerplz:

This time I picked the prompt Morning and took inspiration and colors from sunrise photography. 
Rest is pretty minimal and pastel, which happen to be two prompts, too, but the reason for the mild colors is mainly to create a contrast to me previous skin (Welcome to the future!).
So, something relaxing this time.

It comes with a lot of styled HTML, info on that further down :)


This Skin is free to use and you don't need permission to use it!

 
You do need a Premium Membership though to use journal skins in general :) (Smile)



HTML options


Default classes:

Headlines:
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>


Blockquote:
<blockquote>…</blockquote>

If you want to add an actual quote and credit the source, you can do so by adding a <i>-class at the end of the <blockquote>:

<blockquote>…<i>…</i></blockquote>

Paragraph:
<p>…</p>

Divider:
<hr>

Unordered List:
<ul><li>…</li><li>…</li><li>…</li></ul>

--

Custom Classes:

Button:
<div class="button"><a href="[URL]">[LINK TITLE]</a></div>

Thumb feature:
<div class="feat">:thumb…: :thumb…: :thumb…:</div>

Also works with :bigthumb…: and <da:deviation id="[deviation number]">

<da:deviation id="[DEVIATION NUMBER]"> is the code for deviations that have been dropped via the Add Media option in sta.sh writer. [deviation number] is the number also used for thumbs of deviations. You can see the code when you drop a deviation while in Rich Editing Mode and then switch to HTML Editing Mode.

All deviations are styled, whether they are contained in the <div class="feat">…</div> or not. This class merely centers them; you could achieve the same by using <div align="center">…</div> in HTML Editing Mode or selecting the thumbs and using the Rich Editing Mode buttons to center the text in sta.sh writer. 

Full width image with hover text
<div class="full-width-image"><a href="[URL]"><img src="[IMAGE URL]"></a><i>[HOVER TEXT]</i></div>

This is a more advanced option to display images. You will have an image link in a custom div-class with the option to add a hover text element. 

Whatever you want to be written on hover will be added into the <i>…</i> element; this can be anything you want, the deviation title and username or anything else. 
The image does not even need to be a deviation and it does not have to be linked either; so for example you could put in an image for a tutorial and upon hovering the element further information will be displayed over the image. 
If you don't want any text on hover, just leave out <i>…</i>.

Half width images with hover text
<div class="half-width-image"><div class="hwi"><a href="[URL]"><img src="[IMAGE URL]"></a><i>[HOVER TEXT]</i></div><div class="hwi"><a href="[URL]"><img src="[IMAGE URL]"></a><i>[HOVER TEXT]</i></div></div>

This is a bit more advanced than the one before. In this div-class you will be able to see a square parts of the embedded images, not the full image. And the image links will be displayed without any margins between them.
I highlighted the code for one element. It works the same way as the full width images with hover text. The only difference is, that it is contained in another div-class. 
You can add as many hwi-classes in a half-width-image-class as you like, common sense suggests an even number ;) (Wink)

2-column element
<div class="columns"><span>[TEXT]</span><span[TEXT]</span></div>

The 2 columns will both be of the same height, the one of the longer element.

--

Header

Links
<div class="links"><a href="#">[LINK]</a><a href="#">[LINK]</a><a href="#">[LINK]</a></div>

You will find this by default in the footer, to enter in your own links. Replace # with the URL and [LINK] with the link title. Add in as many as you want, from 1 to 5 is what I would suggest, depending on the link title lengths. 

If you don't want this option on the top of your journal, simply delete it from the header and it's gone. 




Hope you like it :heart: :peace:

anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
Comments (44)
Kettonger's avatar
Kettonger|Hobbyist Digital Artist
Thank you for making this!
Reply  ·  
zatsukiis's avatar
zatsukiis|Hobbyist General Artist
i will be using this!!
Reply  ·  
Astrikos's avatar
Astrikos|Hobbyist Artist
How freaking gorgeous! :love:
Reply  ·  
squeaks4evr's avatar
squeaks4evr| General Artist
used! <33
Reply  ·  
Nyamo-pon's avatar
Nyamo-pon|Hobbyist Digital Artist
ahhhhh.....I luv it! Thanks sooooo much! using xD
Reply  ·  
Detoxx-Retoxx's avatar
Detoxx-Retoxx|Student General Artist
Love this skin!
Reply  ·  
PepperScratch's avatar
PepperScratch|Hobbyist Traditional Artist
imma use it. I cant figure out how to have two columns....
Reply  ·  
Liss-Lily's avatar
Liss-Lily|Hobbyist General Artist
Using!
Reply  ·  
milly-adopts's avatar
milly-adopts|Hobbyist Interface Designer
The skin is beautiful, the colors always calm me~ I was wondering if you would make a matching custom background? If you say no I completely understand, I know it's too much to ask ^^"
Reply  ·  
milkylibra's avatar
This is super pretty, thank you for sharing. :-)
Reply  ·  
Talmorne's avatar
Talmorne|Student Digital Artist
How would you use a journal skin without a premium membership?
Sorry, i'm new to all this and I have no idea how to do it
Reply  ·  
pica-ae's avatar
pica-ae|Professional Interface Designer
You cannot use skins without Premium Membership unfortunately. 
Reply  ·  
Talmorne's avatar
Talmorne|Student Digital Artist
;;w;;
Reply  ·  
N-i-k-z-n-e-i-l-l's avatar
N-i-k-z-n-e-i-l-l|Hobbyist Digital Artist
using! thank you i love it!
Reply  ·  
appIecakes's avatar
appIecakes|Student Digital Artist
Using!
Reply  ·  
W0LFBITE's avatar
W0LFBITE|Hobbyist General Artist
I love the sunrise theme and I like the triangles having a layered, fragmented gradient effect :)
Reply  ·  
pica-ae's avatar
pica-ae|Professional Interface Designer
Thanks :hug: 
Reply  ·  
Ethereal-Paper's avatar
Ethereal-Paper|Hobbyist General Artist
I'm not really sure why, but when I used it, instead of making the journal longer, it just sort of cut off the test? 

New Journal Skin!The wonderful :iconKawaiihoshi-San: found this one for me, and it (Hopefully) matches my custom box stuff.
This is mostly a test to see how everything looks, I'll probably change it to a longer journal in the near future, but I'm pretty happy with it!


I'm hoping it's just a glitch with my computer, the colors work perfectly for the theme I'm working with!!
Reply  ·  
pica-ae's avatar
pica-ae|Professional Interface Designer
Did you edit anything in the skin? I tried a really long text and it worked fine for me when I used it right away Untitled 
Reply  ·  
Ethereal-Paper's avatar
Ethereal-Paper|Hobbyist General Artist
I did edit one of the links, but that's about it... I can try just taking the links out completely, if that would help
Reply  ·  
pica-ae's avatar
pica-ae|Professional Interface Designer
Mh I cannot say exactly what happened, but the links may be missing a closing tag: </div> 
It should come after the last link in the header. It is possible that by deleting the other links, you accidentally also deleted the closing tag. Try entering it behind the links in the header and it may solve your problem :)
Reply  ·  
UszatyArbuz's avatar
UszatyArbuz| Digital Artist
I LOVE THIS SKIN.
Reply  ·  
pica-ae's avatar
pica-ae|Professional Interface Designer
Thank you :aww: :hug: 
Reply  ·  
Babbee's avatar
Babbee|Hobbyist General Artist
I'm so sorry, but can you explain how to use this?
Reply  ·  
View 1 reply
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
©2019 DeviantArt
All Rights reserved