HOME | DD

DeltapotamusSnowflake Journal CSS

Published: 2013-12-19 02:25:35 +0000 UTC; Views: 8229; Favourites: 182; Downloads: 284
Redirect to original
Description You must have a premium account to use journal skins!

o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o

o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o

    UPDATES

    • 18 Dec 13: Removed image from external URLs in Firefox.
    • 19 Dec 13: Nerded out and read a bunch of rules of typography.  Edited spacing
      accordingly.  Also fixed footer so pixels would line up when using the mood. Updated
      preview image.  The journal isn't actually this wide; my computer just takes enormous
      screenshots and I'm too lazy to edit it.
    • 24 Dec 13: First, thank you so much for the DD, ^ginkgografix !  Secondly, I updated
      this to add coding for displaying literature thumbs - which I'd forgotten to code in.  But this
      is my first journal skin, so I'm allowed a bit of a learning curve, right??  Thank you again!

o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o

    HTML :

      Header 1: <h1>What a strange person</h1>

      Header 2: <h2>Dennis The Peasant</h2>

      Header 3: <h3>How do you know she is a witch?</h3>

      Header 4: <h4>Blue.  No, Yel...</h4>

      Header 5: <h5>Makes Ben Hur Look Like an Epic</h5>

      Small Images: :thumb417214419:
           Note: Images will be aligned to the left.

      Centered Small Images: <div align="center">:thumb417214419:</div>

      Snowflake Bullet List: <ul>
                                                      <li>Sleigh bells ring, are you listening?</li>
                                                      <li>In the lane snow is glistening</li>
                                                      <li>A beautiful sight, we're happy tonight</li>
                                                      <li>Walking in a winter wonderland~</li>
                                                 </ul>

      Numbered List: <ol>
                                          <li>Gone away, is the bluebird</li>
                                          <li>Here to stay is a new bird</li>
                                          <li>He sings a love song, while we stroll along</li>
                                          <li>Walking in a winter wonderland~</li>
                                     </ol>

      Image Thumbs: <div class="bigthumb">:bigthumb417214419:</div>
           Note: You must use the "bigthumb" option here!

      Line Divider: <hr />

      Block Quote: <blockquote>.....</blockquote>

      Automatically Indenting Paragraphs: <p>.....</p><p>.....</p>
           Note: For this to work, you cannot add a manual break between paragraphs!  Don't press enter.


o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o

    FAQs :

      Is this free to use?
           Yes!  As long as you keep all of the credits on the journal ♥

      Can I modify this journal?
           Yes; again, all credit must stay on the journal.

      Could I have the text centered?
           This is an easy fix!  Just add the HTML tags <div align="center"> and </div> around your 
           journal text.  The journal is coded so that adding this will not make anything look funny. :]

      Can I put the mood at the top?
           With this journal, I recommend only putting the mood at the bottom.

      Do I have to use the mood?
           Nope!  It looks good with or without. ♥

      Can I use this as a template to make my own journal?
           Yes, but please either send me a note or comment here.  Credit must remain on the journal.

      Can I edit this and upload or sell it as my own creation?
           No.  Please don't take advantage of my hard work.

      Help!  I changed something and now it looks funny D:
           Either reinstall the journal, or send me a note and I'll try to help you out.


o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o~o


    Tested in Chrome 31, iOS Safari (iPad), Firefox 26, Safari 7
    Useable in iOS Safari on iPhone 5 (landscape) - slightly too wide.
    © =Deltapotamus

Related content
Comments: 48

FallingFromSky [2013-12-31 19:13:52 +0000 UTC]

Maybe this is a very stupid question, but I'm new to journal skins and all... When using the image thumbs, it shows just a small part of the actual picture; is there any way to choose what part of the picture the thumb should display? Thank you!

👍: 0 ⏩: 1

Deltapotamus In reply to FallingFromSky [2013-12-31 21:58:53 +0000 UTC]

You might be able to if you went individually and put a new div or span HTML tag 

and gave it inline CSS to override the journal's CSS.  It would look something like:


<div style="margin:-60% 0 0 -100%!important;">:bigthumbxxxxxx:</div>


(you'd alter the bold numbers)


However, I am not sure that would fix it.  I think it would probably move the entire 

thumb over rather than the image within the thumb.  It's a result of dA's automatic 

coding when you use the :thumb:, which means you can't select the exact tag altered

with CSS.


Alternatively, you could edit the journal skin entirely, by going to where it says the 

following and altering the numbers in bold:


div.bigthumb .shadow-holder img {
  padding: 0px;
  max-width: none;
  margin: -60% 0 0 -100%
  opacity: 0.5;
}
div.bigthumb .shadow-holder img:hover {
  opacity: 1;
  margin: -80% 0 0 -120%;
}

(and similarly for the regular, smaller :thumb: images)


The drawback of doing it this way is that it will alter the way that every bigthumb 

image.  You might get it to look better on one image, but it won't look good on another.  


👍: 0 ⏩: 1

FallingFromSky In reply to Deltapotamus [2013-12-31 23:40:58 +0000 UTC]

Thank you for your kind answer. I tried both ways, and everything was just as you imagined it to be: the additional div moves the whole thumb, while modifying the skin alters all of them, so that there are always some that don't look right. Oh, well, I guess that's how life goes.

Thank you again, happy new year! ♥

👍: 0 ⏩: 0

Queen-of-Chains [2013-12-28 06:54:27 +0000 UTC]

Hi... I used it, and it looks so good! It's just too bad that some would actually claim it as theirs.

Thanks for the free use, and congrats on the DD QwQ

👍: 0 ⏩: 1

Deltapotamus In reply to Queen-of-Chains [2013-12-30 21:08:08 +0000 UTC]

Sadly some would - change a few things in the CSS and resources and 

suddenly it looks quite different, but the guts are still mostly the same.


Thank you!  I'm glad you enjoy it. ♥

👍: 0 ⏩: 0

LoveDarkness18 [2013-12-26 20:48:28 +0000 UTC]

LMAO! The content of this journal is hilarious! I'm quite fond of Monty Python's work and to see it all mashed together in elegant bold writing with a beautiful design makes my day. Fave plus and congrats on the DD!

👍: 0 ⏩: 0

DecepticonFlamewar [2013-12-25 22:07:08 +0000 UTC]

This is an awesome skin, and congrats on the DD!

👍: 0 ⏩: 0

galacticpink [2013-12-24 23:46:52 +0000 UTC]

The best part of this to me is the Holy Grail quotes used to illustrate how the text works. XD

👍: 0 ⏩: 1

Gh0st-ofStarman In reply to galacticpink [2013-12-25 08:12:42 +0000 UTC]

EXACTLY WHAT I WAS THINKING

👍: 0 ⏩: 0

luminaret [2013-12-24 23:01:14 +0000 UTC]

WOO congrats on that well-deserved DD

enjoy all the attention c: it's so pretty this journal 

👍: 0 ⏩: 0

originalcoldplayer [2013-12-24 20:09:37 +0000 UTC]

This is my favorite movie lol!! This had me laughing the whole time I was reading it haha!!!! 

👍: 0 ⏩: 0

oh-so-coco [2013-12-24 19:19:48 +0000 UTC]

aahh congrats on the DD, dear
you deserve it!

👍: 0 ⏩: 0

Poisons-Kiss [2013-12-24 17:25:37 +0000 UTC]

WOOT KAIT


You so deserve it. 

You're so freaking talented ok?


But really HOW EXCITING


but then who could not love this??


👍: 0 ⏩: 0

mockingale [2013-12-24 15:48:26 +0000 UTC]

such a well-deserved DD, congrats!!! <3

👍: 0 ⏩: 0

BritishMindslave [2013-12-24 14:27:26 +0000 UTC]

Bless you for quoting Holy Grail all over it oh my god
This is really lovely! Congrats on the DD!

👍: 0 ⏩: 0

Lintu47 [2013-12-24 13:06:50 +0000 UTC]

Congrats on the DD
Have a beautiful day and Happy Holidays

👍: 0 ⏩: 0

catluvr2 [2013-12-24 11:20:10 +0000 UTC]

I in your general direction. Congrats on the DD!

👍: 0 ⏩: 0

Drake1 [2013-12-24 11:09:12 +0000 UTC]

Looks amazing! Good job, congrats on the DD

👍: 0 ⏩: 0

miontre [2013-12-24 09:49:34 +0000 UTC]

Congrats on the Daily Deviation!!! This is a really good skin

👍: 0 ⏩: 0

fireweed15 [2013-12-24 09:46:23 +0000 UTC]

This is really pretty! I also really love that your sample text was all Monty Python quotes-- much props there. I was a little disappointed there were no mentions of the Holy Hand Grenade of Antioch, though. 


Congrats on the DD, and Merry Christmas! 

👍: 0 ⏩: 1

Deltapotamus In reply to fireweed15 [2013-12-24 12:35:58 +0000 UTC]

Haha, thanks!  The text was actually from a site called Fillerama, so I didn't pick out all 

of the quotes - I merely picked the subject matter.  Monty Python & the Holy Grail is definitely 

one of my favorite movies though!  I've also seen the Broadway version, Sir Spamalot, which 

I also highly recommend.  It follows most of the movie plot while adding in some fun extras, 

like scenes with the Lady of the Lake.


Thank you again, and Merry Christmas to you as well!

👍: 0 ⏩: 0

Ikue [2013-12-20 13:07:00 +0000 UTC]

Very nice work!

👍: 0 ⏩: 1

Deltapotamus In reply to Ikue [2013-12-21 16:38:03 +0000 UTC]

Thank you!

👍: 0 ⏩: 0

Celvas [2013-12-20 10:18:54 +0000 UTC]

Nicely done!
Gonna go read the code now.

👍: 0 ⏩: 1

Deltapotamus In reply to Celvas [2013-12-21 14:31:22 +0000 UTC]

Thanks!

eheh, my code is probably so unorganized compared to most others...

I'm more of a CMD/CTRL + F kind of person than an organize with comments one.

👍: 0 ⏩: 1

Celvas In reply to Deltapotamus [2013-12-21 14:53:22 +0000 UTC]

Code is a bit like a fingerprint, no? I do a lot of categorizing because it's easier for me, and I suppose it's easier for others to find certain features they wish to change. But only on dA. With webdesigns I'm on the comment sparse side, too. I expect people to know what they are looking at.

👍: 0 ⏩: 1

Deltapotamus In reply to Celvas [2013-12-21 15:47:55 +0000 UTC]

Oh true - to be completely honest I hadn't even considered organization 

to make customization easier.  I should probably do that.


I personally normally open up chrome developer tools or firebug and fiddle 

with the code there to get what I want, then search for the class I need.  I 

suppose it's a crude way of going about it, but as a self-taught coder, it's 

how I really learned everything.

👍: 0 ⏩: 1

Celvas In reply to Deltapotamus [2013-12-21 16:44:29 +0000 UTC]

Delta, you are definitely my kind of human. Firebug is my go-to-software whenever I see something and want to know how it works. I am pretty much a beginner with CSS, to be honest. I started coding about five months ago, but I go about learning it the same way I go about learning anything. I find out by myself. Requires a lot of time, patience, and troubleshooting, but that's the way I learn best. Well, who am I telling this. I'm guessing you have a lot more experience than I do, and I'm looking forward to learning from you.

👍: 0 ⏩: 1

Deltapotamus In reply to Celvas [2013-12-21 23:27:13 +0000 UTC]

Oh wow, I would never have guessed!  You definitely invested a lot of time into your journal skinning.  

Myself, although I've been coding for a couple years now probably, I'd never attempted to code anything 

on dA.  It's rather frustrating trying different things and then finding out that it's a CSS3 thing and not 

allowed here.  Like transitions.  I love transitions.  So yeah, this is actually my first journal skin here, 

so it's still a bit of a learning process for me too. :]

👍: 0 ⏩: 1

Celvas In reply to Deltapotamus [2013-12-22 03:37:24 +0000 UTC]

Oh yeah, transitions. Alpha users - like Sernior Members - can use transitions, and higher up on the ledge everything is possible even in journal coding. So it's not that the features aren't available at all. They just aren't available to us. There are some CSS3 features you can use, like linear-gradient. And then there's pre-CSS3 stuff that won't work, like setting ids, the lack of which is more restricting than I'd initially have thought. Some things are plain impossible, others you can work around. My personal most favourite property is box-shadow. It's very awesome how you can transform simple elements into complex shapes by adding several lights and shades.

Anyway!

Take a look at the following. Maybe it's something for you.

Journal Skin January - Prompts Released!Thank you to everyone who expressed their interest in the announcement article!
Here are your prompts. Remember, you only need to use one per journal skin.
Word Prompts
morningtealmistfutureblack and whitecomicsvideo gamesminimalismlandscapedarkavant-gardedivineflatcolumnsdeep seawintermetallicfloralanimatedglowcity nights
Deviation Prompts
PLEASE NOTE: These deviations are NOT stock. These are only to be used as inspiration only, unless permission for use is given by the artist.
       Blazing red by ~FeliDae84  deception by ~PatrickWally
This isn't a contest, just a project, so you are free to interpret and use the prompts as little or as mu

👍: 0 ⏩: 2

miontre In reply to Celvas [2013-12-24 09:50:11 +0000 UTC]

Seniors can't use transitions

Only Alpha testers and staff can As far as I know, not even CVs can use them

👍: 0 ⏩: 2

Deltapotamus In reply to miontre [2013-12-24 12:10:39 +0000 UTC]

Well that's a bummer.

There goes my plans of senior membership/CV for the sake of transitions.

(haha.  kidding, obviously)


Is there a reason for withholding some of these effects?  As far as I'm aware many of them have very good browser support and/or degrade well.

👍: 0 ⏩: 0

Celvas In reply to miontre [2013-12-24 09:54:28 +0000 UTC]

It does make one wonder what one is paying for just a little bit.

👍: 0 ⏩: 1

miontre In reply to Celvas [2013-12-24 09:57:17 +0000 UTC]

I occasionally nag hint to the staff that the rest of us want CSS3 whenever I get the chance

👍: 0 ⏩: 1

Celvas In reply to miontre [2013-12-24 10:07:10 +0000 UTC]

Good Senior member. Sticking your head out for all of us. I approve.

👍: 0 ⏩: 1

miontre In reply to Celvas [2013-12-24 10:14:34 +0000 UTC]

I feel loved!

👍: 0 ⏩: 0

Deltapotamus In reply to Celvas [2013-12-22 07:03:40 +0000 UTC]

Yes, I did see that about alpha members somewhere... and I think where I saw it was in a journal posted over a year ago.  It seems kind of odd to me that they haven't added those for all members, since it has good browser support.  I do kind of understand why they've disallowed using ID selectors, because of the errors you'd get if you used a preexisting ID, but at the same time I'd think it wouldn't be too difficult to put a script that prevents the use of IDs already in use.


I did see your tutorial using those box-shadows on buttons!  They do look quite fun.


And thank you, I found that journal earlier today actually.  I've already commented as a potential participant. :]

👍: 0 ⏩: 1

Celvas In reply to Deltapotamus [2013-12-22 08:02:05 +0000 UTC]

I'm curious about that. Every skin gets it's own extension, for a lack of having an idea how to call it. One of my skins, for example, uses devskin10533290. If a dA-specific ID were used, but with that devskinDIGITS preamble, would that still mess with the dA-specific ID, or would it only work inside the skin with its unique designation?

Yeah, no? I love to go back to it and first look at the buttons stage right before the box-shadow, to then switch to the button with the box-shadows. A world of difference!

Ah, good. Just wanted to make sure.

👍: 0 ⏩: 1

Deltapotamus In reply to Celvas [2013-12-22 08:59:51 +0000 UTC]

Hm, that's a good question.  I think that issues would crop up with any script 

that is attempting to select that particular ID.  Even though the id within the 

journal could also be #devskinDIGITS #devID, the script wouldn't be able to 

differentiate between that and the other #devID.  I know very little scripting 

though, so I could be wrong.


Haha, yes!  You've actually inspired me to code one of those buttons to fit with 

the skin I'm working on right now.

👍: 0 ⏩: 1

Celvas In reply to Deltapotamus [2013-12-22 11:29:33 +0000 UTC]

Makes sense. More in the not-working department than the working one. I'm not a big scripter, either, but I suspect that at least a few features aren't for our use because it would require great effort and lenghty troubleshooting to make them work properly.

Ouh, neat! You gotta show me when you're done!

👍: 0 ⏩: 0

Nichrysalis [2013-12-20 07:31:52 +0000 UTC]

Very pretty

👍: 0 ⏩: 1

Deltapotamus In reply to Nichrysalis [2013-12-21 14:30:02 +0000 UTC]

Thank you!

👍: 0 ⏩: 1

Nichrysalis In reply to Deltapotamus [2013-12-23 01:17:00 +0000 UTC]

Though, why don't lit thumbs show up?

👍: 0 ⏩: 1

Deltapotamus In reply to Nichrysalis [2013-12-24 12:11:28 +0000 UTC]

whoooops.  Fixed, although it isn't my favorite styling.

This is my first journal skin ever so there's a bit of a learning curve, haha.

👍: 0 ⏩: 1

Nichrysalis In reply to Deltapotamus [2013-12-24 12:29:48 +0000 UTC]

No worries. Congrats on the DD too, it's well deserved!

👍: 0 ⏩: 0

Zahkiin [2013-12-19 13:59:24 +0000 UTC]

wow! that is great well done

👍: 0 ⏩: 1

Deltapotamus In reply to Zahkiin [2013-12-19 23:02:00 +0000 UTC]

thanks!

👍: 0 ⏩: 1

Zahkiin In reply to Deltapotamus [2013-12-20 00:05:49 +0000 UTC]

you're welcome!

👍: 0 ⏩: 0