Shop Forum More Submit  Join Login
Good Morning, Good Morning! by pica-ae Good Morning, Good Morning! by 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:

Add a Comment:
 

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconzatsukiis:
zatsukiis Featured By Owner Jun 21, 2018  Hobbyist General Artist
i will be using this!!
Reply
:iconastrikos:
Astrikos Featured By Owner Nov 25, 2017  Hobbyist Artist
How freaking gorgeous! :love:
Reply
:iconsqueaks4evr:
squeaks4evr Featured By Owner Jul 20, 2017   General Artist
used! <33
Reply
:iconnyamo-pon:
Nyamo-pon Featured By Owner Jul 18, 2017  Hobbyist Digital Artist
ahhhhh.....I luv it! Thanks sooooo much! using xD
Reply
:iconzapwbolt:
ZapWBolt Featured By Owner Jun 2, 2017  Student General Artist
Love this skin!
Reply
:iconpepperscratch:
PepperScratch Featured By Owner Mar 8, 2017  Hobbyist Traditional Artist
imma use it. I cant figure out how to have two columns....
Reply
:iconliss-lily:
Liss-Lily Featured By Owner Dec 30, 2016  Hobbyist General Artist
Using!
Reply
:iconmilly-adopts:
milly-adopts Featured By Owner Aug 12, 2016  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
:iconmilkylibra:
milkylibra Featured By Owner Aug 8, 2016  Hobbyist
This is super pretty, thank you for sharing. :-)
Reply
:icontalmorne:
Talmorne Featured By Owner Mar 18, 2016  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
:iconpica-ae:
pica-ae Featured By Owner Apr 20, 2016  Professional Interface Designer
You cannot use skins without Premium Membership unfortunately. 
Reply
:icontalmorne:
Talmorne Featured By Owner Apr 20, 2016  Student Digital Artist
;;w;;
Reply
:iconn-i-k-z-n-e-i-l-l:
N-i-k-z-n-e-i-l-l Featured By Owner Feb 15, 2016  Hobbyist Digital Artist
using! thank you i love it!
Reply
:iconappiecakes:
appIecakes Featured By Owner Aug 19, 2015  Student Digital Artist
Using!
Reply
:iconw0lfbite:
W0LFBITE Featured By Owner Jul 27, 2015  Hobbyist General Artist
I love the sunrise theme and I like the triangles having a layered, fragmented gradient effect :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 28, 2015  Professional Interface Designer
Thanks :hug: 
Reply
:iconethereal-paper:
Ethereal-Paper Featured By Owner Apr 23, 2015  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
:iconpica-ae:
pica-ae Featured By Owner Apr 24, 2015  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
:iconethereal-paper:
Ethereal-Paper Featured By Owner Apr 24, 2015  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
:iconpica-ae:
pica-ae Featured By Owner Apr 25, 2015  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
:iconethereal-paper:
Ethereal-Paper Featured By Owner Apr 25, 2015  Hobbyist General Artist
That's true!

I ended up just taking the links out completely, which was fine anyway
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Mar 7, 2015   Digital Artist
I LOVE THIS SKIN.
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 7, 2015  Professional Interface Designer
Thank you :aww: :hug: 
Reply
:iconbabbee:
Babbee Featured By Owner Jan 10, 2015  Hobbyist General Artist
I'm so sorry, but can you explain how to use this?
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 11, 2015  Professional Interface Designer
You can install the skin by clicking the button on the right side. That should take you to write a new journal entry or you can go to Sta.sh Writer and pick it from the installed journal skins on the right side under "change skin".
If you work in rich editing mode you can just write along and use the formatting buttons on top to create headlines, blocquotes etc. If you prefer writing in HTML mode, you can use the codes I provided in the deviation description here. 

To change the links at the top, click on edit skin and change them to what you want or delete them entirely from the header.

I hope this helps :)
Reply
:iconbabbee:
Babbee Featured By Owner Jan 11, 2015  Hobbyist General Artist
Thank you so much
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 12, 2015  Professional Interface Designer
No problem :) :hug: 
Reply
:iconsleepy-stardust:
Sleepy-Stardust Featured By Owner Jun 17, 2014  Hobbyist Interface Designer
Wow! Some great colors there!
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 18, 2014  Professional Interface Designer
Thank you :aww: :huggle: 
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Feb 17, 2014
Very clean and beautiful! :love:
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 18, 2014  Professional Interface Designer
Thank you :) :hug: 
Reply
:iconthiefoworld:
Thiefoworld Featured By Owner Jan 9, 2014
I've always wanted to know how to do that hover texts :B
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 9, 2014  Professional Interface Designer
Then position: absolute; and display: none; are your friends :P But yeah, you can just install it and nick the code :giggle: 
Reply
:iconkaotickell:
kaotickell Featured By Owner Jan 8, 2014  Professional Traditional Artist
Freaking gorgeous colours used here Anne! It feels very tactile too... I'm thinking it's the use of box shadows and the dotted lines. :B Awesome job! :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 9, 2014  Professional Interface Designer
Thank you :aww: :huggle:


Reply
:iconkovowolf:
KovoWolf Featured By Owner Jan 8, 2014  Professional General Artist
This is beautiful, well done :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 9, 2014  Professional Interface Designer
Thank you :huggle:
Reply
:iconkovowolf:
KovoWolf Featured By Owner Jan 9, 2014  Professional General Artist
no problem! ^^
Reply
:iconikue:
Ikue Featured By Owner Jan 8, 2014  Hobbyist Digital Artist
Love the image areas. The hover info is a great touch. :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 8, 2014  Professional Interface Designer
Thanks :huggle: I had fun doing those… and fun hovering those myself :giggle: 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 8, 2014
I really love the colors and the overall feels, but the triangles kill my eyes :B
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 8, 2014  Professional Interface Designer
Then you'd have to view it on a smaller browser window :giggle: I removed them for "mobile" :P

Thanks :huggle: 
Reply
:iconmiontre:
miontre Featured By Owner Jan 8, 2014  Hobbyist Photographer
Nice one :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 8, 2014  Professional Interface Designer
Thank you :huggle:
Reply
Add a Comment:
 
×




Details

Submitted on
January 8, 2014
File Size
7.8 KB
Link
Thumb

Stats

Views
6,681 (2 today)
Favourites
302 (who?)
Comments
44
Installs
1,027