Deviation Actions

SimplySilent's avatar

Tropical Fruit CSS

By SimplySilent
:points: Commission Me | Journal Skins | Gallery Skins | Make a Journal Skin!

Please add this skin to your favorites if you install. :+fav:

live preview

how to use

  • 4 different accent colors: yellow (default), pink, green, and brown
  • Mini Thumb Gallery: All thumbs become 100x100 and display fully on hover.
  • Big Thumb Gallery: All bigthumbs become 200x200.
  • 4 colors for headings and subheadings
  • Styled blockquotes and lists
  • Styled mood list

© 2013 - 2021 SimplySilent
Join the community to add your comment. Already a deviant? Log In
CroWelsh's avatar
:star::star::star::star::star-half: Overall
:star::star::star::star::star: Vision
:star::star::star::star::star-half: Originality
:star::star::star::star::star: Technique
:star::star::star::star::star: Impact

How To Begin:
This journal skin design falls beautifully on the eye of the viewer as a result of the very clean looking, non over-powering colour scheme chosen. The overall design has, in my view, a minimalist feel to it, but is enhanced by the introduction of the Tropical Fruit colouring.

Main Journal Structure:
The large top/header and slimmer bottom/footer block areas command and hold the overall journal together. It's balanced well by the differences in the block sizes and the brown colour used. You clearly see where to begin and any information within is prominent as a result. The slimmer bottom/footer block gives the journal a foundation and it's end point and again any information within is not lost or cramped.

The subtle pattern effect in the main journal background dampens down the some times harshness of a pure white backdrop. Since it is a subtle effect, it thus results in any text being much more comfortable to read so the viewers eyes are not strained.

Journal Sections:
The layout has been structured attractively, being well balanced and comfortable for the viewer to scan where the use of the brighter coloured sub-sections are bringing these different areas to the viewers attention.
This, obviously, emphasizes these sub-sections individually but at the same time are not over-powering each other, or one is not so over-powering that other sub-sections become lost and possibly seen as insignificant. The colours are brighter than the brown used, standing out off the subtle pattern background, but are not overly sharp or harsh on the eye.

Using the orange colour and spreading this across most of the top area of the journal is definitely a good move as it brings the viewer down into the journal but doesn't overload at the beginning. Splitting into 2 columns after this and the use of the red and green balances and allows the viewer to choose where to go.

Bringing in the Mini Gallery and separating this out from the main sub-sections (coloured) by using the brown (as in the header and footer blocks) closes off the journal nicely. This is also the same by having the Mini Gallery spreading across most of the journal area (as with the Normal Thumbs section or mini-header), creating a mini-foundation (mini-footer) for the sub-sections within the whole journal space.

How To End:
Or is this supposed to be called a Conclusion?
Whatever you want to call it, I can simply finish with a <img src="…" width="15" height="16" alt=":+fav:" data-embed-type="emoticon" data-embed-id="194" title="+fav"/> .. since I personally found this design, layout and colour scheme extremely pleasing to view, well thought out and very user-friendly.
I also wanted to make a comment, but out of appreciation for the work, time and effort put in to bring this to the page (screen .. <img src="…" width="15" height="15" alt=";P" data-embed-type="emoticon" data-embed-id="454" title="Wink/Razz"/>), I decided that I should, at least, make some effort myself by trying to write a critique instead of just chucking in a quick 'I love this ..' type comment ...

There may be some little things that could be done to alter, enhance or improve bits 'n' pieces ... but hey, who am I to criticize by telling the creator, this or that is wrong, bla .. bla!
Overall, it's a fine piece of work ... <img src="…" width="15" height="15" alt=":thumbsup:" data-embed-type="emoticon" data-embed-id="262" title="Thumbs Up"/>

Anyway, time me thinks to .. chuck up this .. comment .. <img src="…" width="15" height="15" alt=";)" data-embed-type="emoticon" data-embed-id="387" title=";) (Wink)"/>
<img src="…" width="16" height="20" alt=":coffeecup:" data-embed-type="emoticon" data-embed-id="221" title="Coffeecup"/><img src="…" width="24" height="20" alt=":smoking:" data-embed-type="emoticon" data-embed-id="580" title="Smoking"/>
SimplySilent's avatar
Thank you so much for the lovely critique! :iconsweethugplz: :la: You must have read my mind when I had created this, because you caught many of the little details and nuances that I specifically created for this skin. :giggle:

This is the journal I consider my best work, and I did spend quite a bit of time balancing a cheerful and colorful look with a minimalist theme. Designing took me a while as I wanted to make it as perfect as possible. :P
CroWelsh's avatar
Apologies for the 'long' delay to reply, but your are most welcome for the critique. I presumed this took a good while to bring together and ... I have a talent for 'reading minds' .... ;p

Well done again ... :)
All the best ...
Zichee's avatar
:star::star::star::star::star-half: Overall
:star::star::star::star::star: Vision
:star::star::star::star::star-half: Originality
:star::star::star::star::star-half: Technique
:star::star::star::star::star: Impact

For the color choices, I must say: I loved it - It sure looks tropical indeed. It's a good choice that you've used brown for the subhead so it doesn't look "too bright". Simple layout of course but at the same time, it looks beautifully well done and attracting to the eye. This will also give a higher chance of the audience to go read your journal mainly because of the layout.

The background: I like the grain you added, so it doesn't look too plain and static.

The thumbnails: Love the boarder you put so we know where to click. Nothing more. <img src="…" width="15" height="15" alt="=)" data-embed-type="emoticon" data-embed-id="390" title="=) (Smile)"/>

The fonts: good choice of fonts I must say, especially the sizes. They definitely fit the layout and they are easily legible. And very clean.

I don't really see anything that needs tweaking - I just love how you put things altogether overall. Good work!
SimplySilent's avatar
Ahh, thank you so much for taking the time to critique my work! :heart: :tighthug:

And such a lovely critique too! :blush:
Zichee's avatar
Aww, tyvm! I tried my best to make the critiques as fair as possible for you and other deviants out there! =) I really appreciate your comment. :heart:
Akiro-o's avatar
Hey I'm pretty new with using skins, and I don't get how I can add the mini gallery. If I link the image where it says "put thumbs here" the link is the only thing that appears. Sorry if this is a stupid question but I have no idea xD
RedSashymi's avatar
Hello! I don't understand how to put the little squares (brown)...I only can put "I'M A SUBHEADING" with the big squares '-' can someone help me?? please
RedSashymi's avatar
It's ok I found the solution ^^
riukime's avatar
Hello there! Can you tell me how to do the little squares as well?; w; 
hazelrebecca's avatar
Simple, clean and crisp with lovely colours! 
Thank you for providing such lovely free resources, your skills are immeasurable. :love:
Username-91's avatar
The Journal skin looks wonderful! Thank you so much for this. :dummy:
KiaraDGPaws's avatar
hey can i ask something?
how did u make this journal skin downloadable? 
craaziifox's avatar
how do i change all the colours to custom ones?
i've seen other do it before and i'd really like to to know!
also, would love to know how to make columned headers and such and how to get the text into the columns ;;
SimplyDefault's avatar
Hi! Im sorry to bother but i really dont get how to put the headings into the right and left columns ; n ;... I've tried inputting the heading codes into the Right/Left Colum code where it says "Left Text" and stuff but it just keeps giving me a big heading!
astrabun's avatar
Hi do you still need help with this? You are doing the code fine, you just have to make sure that you paste it on the journal in the special way so it can paste as basic html

SimplyDefault's avatar
AA TYSM! thats what was missing i weep ; u ;
Cupric's avatar
thanks a big bunch!^^
TopCat20's avatar
Thank you, using.:)
Kaskomni's avatar
I'm a bit confused on how to change to the color pink? : O
Vixenkiba's avatar
This is still one of my favourite journal skins ever, I love playing around with it :D

I do have one question that I hope you can answer; on full-sized thumbnails, how do I remove the white background (which code line is it), and which code-line changes the colour of the BG when you hover over it?
Niti-Pon's avatar
Stygma's avatar
I'm playing around with this one! What an amazing fun skin!
Join the community to add your comment. Already a deviant? Log In