Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconbradleysays: More from bradleysays


More from deviantART



Details

Submitted on
October 3, 2012
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
6,708
Favourites
127 (who?)
Comments
74
×

CSS Did You Know? - October 3rd, 2012

Journal Entry: Wed Oct 3, 2012, 9:20 PM
:iconbradleysays:
Tips: Presentation

When submitting journal skins (Complete CSS or Installable) it's important that your presentation is as best as it can be.

Having place-holder text, such as Lorem ipsum, is a great way to show what your journal skin will look like with paragraphs of text in it. You can generate place-holder text using this website.

Other than the dummy text, here are some key points you'll need to consider when presenting your CSS submission:
  • Legibility: you need to ensure that the text you've used is readable, if you can't read the text in the preview, then you'll need to re-consider the style of text you've used.
  • General Features: In your dummy text, use as much html as you can. Bold, italicise, underline, subscript, superscript, strike, links, etc are things you may want to include, especially if you've stylized them.
  • Extra Features: People need to know what you're offering them. Make sure you've included every extra feature you've included with the journal skin. If you've styled a blockquote, include it; if you've styled thumbs, include them.
  • Live Previews: People WILL want to look at a live preview before they install or download it. After the release of Sta.sh, it's been easier to include live previews, as you don't have to submit a public journal to show them off. It's a great idea to make the live preview BEFORE submitting it, so that you can screenshot it and use it as the deviation preview. To easily screen shot, you can use: Fireshot add-on (Firefox) or Awesome Screenshot: Capture & Annotate (Chrome). :)


Here are some great examples of well-presented journal skins:

Blue Stairs - Journal + Gallery Skin by ginkgografix Rainbow Skin by bradleysays Mirz's Compass Preview by GillianIvy Halloween 2012: Orange by Ikue

Remember, these points are just tips, and aren't necessary - however, presentation is the key, not just for journal and gallery skins, but for everything you submit on deviantART.

:iconujz:
How to: Custom Buttons

With some simple knowledge of CSS you could easily customize your journal skins to your hearts content; with custom buttons and even custom boxes inside your journal skins!

In this tutorial I will show you how to create a custom CSS button and how to use it in your journal skin. I'll explain each piece of code separately so that you know what you are doing and thereby you can also change everything as you like and created new CSS content of your own.

The basic code for a CSS Button:

You can insert this code to the 'CSS' box in the 'Extras' section of the Journal writer.

.button1{
background: #ff768d;
color: #fff;
padding: 8px;
border: 1px solid #db0026;
border-radius: 5px;
font-size: 15px;
text-shadow: 1px 1px #ff2a4d;
text-align:center;
max-height:30px;
max-width: 200px;
cursor: default;
}

.button1:hover {
background: #76d2ff;
border: 1px solid #2ab9ff;
text-shadow: 1px 1px #2ab9ff;
}

.button1:active {
background: #76d2ff;
border: 1px solid #db0026;
text-shadow: 1px 1px #888;
}


How to insert it into your journal?

<div class="button1"> Your Text here </div>


Preview:

Your Text here


What it all means:


:bulletblue: background: This states the background color and it has to be a HTML color code (find HTML color codes at www.colorhexa.com)

:bulletblue: color: This is the text color and it is also in the form of a HTML color code.

:bulletblue: Padding: This is the space you want to leave between the content inside the CSS button and the edge. Has to be stated in Pixels (1px / 5px /...)

:bulletblue: border: This is the border, firstly here '1px' states the width of the border, 'solid' is the border style and can be changed to 'dotted' or 'dashed' to get the desired effect, '#000' is once again the HTML color code which states the color of the border.

:bulletblue: border-radius: This can be used to state how curved you want the edges of the border to be; if you set it to '0px' then you will have a perfect square and if you set it to '5px' you get curved edges. (can range from 0px - 90px)

:bulletblue: font-size: The font size in pixels.

:bulletblue: text-shadow: This is the text shadow. The first '1px' states how many pixels to the left the shadow should go. The second '1px' states how much to the bottom the shadow should go. The final color code states the color of the shadow.

:bulletblue: text-align: This is the text align (just as the name says): Can be set to either: Left/Right/Center

:bulletblue: max-height: & max-width: States the maximum height and width in pixels.

Please note: "Sta.sh has a max-width applied to journals, which is NOT applied on the final deviation; It is 850px. The actual journal will run the whole width unless you limit it inside the CSS."


:bulletblue: cursor: This sets the cursor: can be either auto/default/pointer/text/help (full list:www.w3schools.com/cssref/pr_cl…

:bulletred: .button1:hover { } This is the hover effect, as in when the cursor is over the button this replaces the original CSS to the values in-between these tags. Such as here it changes the background color, border and text-shadow to a bluish color when the cursor is over the button.

:bulletred: .button1:active { } As same as the hover effect, this code states the CSS which should be used when the button is pressed.

This is only the beginning of what you can do with CSS, but this is also the most essential bit of code. If you are a beginner to CSS learning this code would be most helpful to you when learning CSS further. Hopefully in the next tutorial I write, I will be able to explain how to use images instead of backgrounds and move on to more advanced CSS.

If you have any questions feel free to ask as comments here or send me (UJz) a note :)

:iconbradleysays:
What would you like to know?

CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays.

If you write a section for us, you will be credited! :)

:iconexcitedlaplz:
Previous editions

Want to learn more about CSS and how to use it? We've collated all of our previous articles and put them into one document for your convenience.

Read the CSS Did You Know? archive :pointr: here!




CSS Did You Know? is an article series that gives you tips and lessons on CSS. This edition includes tips on presentation and using CSS to create custom buttons.
Add a Comment:
 
:iconlyricanna:
Lyricanna Featured By Owner Jun 20, 2013  Hobbyist General Artist
Is this button bit for old style or gruze style coding?
Reply
:iconbradleysays:
bradleysays Featured By Owner Jun 21, 2013
It should work for both styles. :D
Reply
:iconlyricanna:
Lyricanna Featured By Owner Jun 21, 2013  Hobbyist General Artist
Yay :D. So want to try that :)
Reply
:iconthe-lost-hope:
The-Lost-Hope Featured By Owner Apr 10, 2013  Student General Artist
I'm still learning the very basics of CSS and tried to make one of these for a test thing but its not giving me the box and only an error. :( Here's my version of the code:

I'm blue!

.button1 {
background: #1d60d3;
color: #d9dfe7;
padding: 5px;
border: 2px dashed #063890;
border-radius: 10px;
font-size: 22px;
text-shadow: 2px 1px #041430;
text-align:center;
max-height: 40px;
max-width: 40px;
cursor: default;

What am I doing wrong?
Reply
:iconbradleysays:
bradleysays Featured By Owner Apr 10, 2013
Do you have a } at the end of that? :)
Reply
:iconthe-lost-hope:
The-Lost-Hope Featured By Owner Apr 10, 2013  Student General Artist
Yeah I added that and it still didn't work :(
Reply
:iconpizzapotatonbacon:
PizzaPotatoNBacon Featured By Owner Mar 27, 2013  Student General Artist
:drool: This is really lovely!
It's neat and comprehensive, and I can understand everything. :) This must be the holy grail
Reply
:iconfoxtone:
FoxTone Featured By Owner Oct 20, 2012   Digital Artist
I wish non-PM people could at least mess around with CSS- but never post any journals/otherstuff with them.
Reply
:iconretsamys:
RetSamys Featured By Owner Jan 7, 2013  Hobbyist General Artist
We can mess around with by editing Journal Skins, but we only get a preview, we cannot actually save or publish it.
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 7, 2012  Hobbyist General Artist
If you ever need me to do a snippet write up for this, let me know what you'd like me to explain. I'd be glad to contribute to your articles. (I meant to start my own some time ago but never found the time) This article looks great! ;D

p.s. "Sta.sh has a max-width applied to journals" Can you throw some feedback at the staff to let them know coders are interested in using Sta.sh for live previews and having an accurate preview would be key. So beg them to lift or widen the limit :please:
Reply
Add a Comment: