- Pages:
- 1
- 2
| Zetaboards: CSS-Only Buttons; A step closer to a completely imageless theme. | |
|---|---|
| Tweet Topic Started: Friday, 17. August 2012, 11:49 (2,788 Views) | |
| Lewis. | Friday, 17. August 2012, 11:49 Post #1 |
|
Awesomesauce.
|
This tutorial provides a detailed explanation of how to create CSS-only buttons that work within the Zetaboards environment, providing a step closer to a completely imageless theme. You can see a demo of what you're creating here. However, there are both pros and cons. First, the pros:
The cons:
First, we need to write our markup. This is simple.
<div> is a HTML tag that specifies a new division. We use a class attribute to point to our CSS (which I'll talk about later). We choose class instead of id because we're going to use it more than once; this element will style all of your post buttons. "topic_button" is used to name our button's base; this is important because we then style this with CSS by referring to the name. Then we close the division with </div>. The text you want to be displayed on the button needs to be written within the <div> tags. Like so:
The above markup should be pasted into the images section of the board. It should look exactly like this, not very impressive is it? Now that we've got the markup done, we need to make it look great! For this, we turn to our CSS. Of course, you'll need to be editing your theme's CSS, so you need to go to your 'Theme Appearance'. Remember we named our button in the markup? It's called topic_button and it's a class attribute. Classes are written like so:
The curly brackets used ({) simply tell us where our styling is going for the named element (in this case, .topic_button). Let's get to it. Firstly, we're going to tell our browser the background colour of the button. In this case, I've opted for a pretty vibrant blue (#1d98bf. You can pick whatever you like. The reason for doing this is that if a browser does not support the newer CSS we're going to use, the blue is displayed instead. That way, your buttons have always got a background, regardless of which browser is being used. You'll be making something that looks like this:
Next up, choose your font color. I chose white (#fff).
If you view your button now, you'll see that the text isn't spaced from the background. Time to fix that. We'll use padding to give your button some height (you could also use padding to give width, though I haven't here). Padding, as used here, is given in two numbers; the first is the vertical padding, the second is the horizontal padding. So, if you're wanting to make your buttons expand when they've got a longer word inside, you can use a second number, and no width. For this tutorial, I chose to use width instead; this gives a fixed pixel width and means that all my buttons are the same width. Here's what you'll have now.
It's looking a little better... but the text is a little too big. Quick fix; font-size using a percentage less than 100% (so that it's smaller than whatever the default size is). This is an optional step; if the default size of your theme is suitable, you don't need this. Also, the text is still aligned left (default). Let's change that whilst we're here, using text-align. Here's what we've got now:
Square corners are boring. Let's make them rounded! The border-radius attribute will sort this for us, here I've opted for 3px rounding, though you might like to play with other options (20px gives a nice semi-circle). It's also important to note that I've added -moz-border-radius for cross-browser compatibility (-moz specifies that Mozilla browsers - like Firefox - need to do this too).
Borders are next. This is where we make the button look like it's 3D. First, we use border-style to tell the browsers we want a line as a border (as opposed to dashes, dots or other stuff). Then we use border-width to identify the sizes of the borders. There's four numbers because there are four sides of the button, in this order: top, right, bottom, left. As you can see, the bottom border is bigger than all the others; it is this that makes the button look 3D. Finally, the self-explanatory border-color.
Next is the gradient for the button. Here, we add an additional 7 lines of code. I have noted the browser support at the end of each line within the code (in the comment tags - /*) so you can see which browsers you're catering for. It's definitely worth taking a second to study this if you want to make your buttons look good in as many browsers as you can [1]. You might be able to pick out colours within this code; they begin with a hash (#) and are followed by six numbers. Each line, for the specific browsers, has two colours. The first colour is the colour of the top of the button (#23b1de), and the next colour is the bottom (#1b8eb3). Browsers do the rest and generate the gradient for inbetween those two colours.
Nearly there. Let's add a fancy highlight to the button. Trust me, it's worth it. Another three lines of code. By now, you'll be familiar with the -moz and -webkit prefix (for 'cross-browserbility'). Inset is used to tell browsers this is an inner shadow. The first number is the horizontal displacement, the second is the vertical. And finally, another colour.
Finally, your buttons are completed with a smart text-shadow to give your text that extra little boost. As with the inner shadow, the first number refers to horizontal placement and the second to vertical. The third number tells the browser how much blur the shadow should have. And then a colour for the shadow.
To stop that annoying corner problem in browsers (like this, where your colour 'leaks' from the rounded corners, simply add the following three lines of code[2]:
And there you have it. A fully imageless CSS button for use with your theme. But wait! There's a little bit you must edit within the theme for your buttons to display properly when added. Find .cat-buttons and remove the width so you have something that looks like this: ![]() Want to make your buttons even better? Consider adding a .topic_button:hover (for when hovered) effect and a .topic_button:active (for when clicked) effect. See the full code below:
[1] Thanks to Pando for providing extra info about this. [2] Thanks to Flavius for pointing this out Edited by Lewis., Saturday, 18. August 2012, 10:58.
|
![]() ![]() | |
Off
Profile |
Quote Top
|
| Aidan | Friday, 17. August 2012, 11:58 Post #2 |
![]()
Level 12
|
This tutorial may help for the gradient portion. |
Off
Profile |
Quote Top
|
| Lewis. | Friday, 17. August 2012, 12:01 Post #3 |
|
Awesomesauce.
|
Absolutely. Usually, I make whatever it is in Photoshop first and then grab the colours from there. But for others, ColorZilla is very useful indeed. |
![]() ![]() | |
Off
Profile |
Quote Top
|
| Geoffrey | Friday, 17. August 2012, 12:02 Post #4 |
![]()
It's a love story, baby just say yes
|
Great guide, you went through a lot of CSS functions that can be used for other things and not just the buttons (there are other tuts here that say how to do buttons with CSS ).Using Photoshop would require someone to have design knowledge, which you said at the beginning one didn't need for this.
Edited by Geoffrey, Friday, 17. August 2012, 12:03.
|
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.![]() Other Sigs Awards & Memories
| |
Off
Profile |
Quote Top
|
| Lewis. | Friday, 17. August 2012, 12:08 Post #5 |
|
Awesomesauce.
|
I have design knowledge. That's the way I do it. ColorZilla is a great resource for those that don't have access to an image editor, but even without it you still don't need design experience. I'm not saying "don't use ColourZilla"... use it. It's a great resource. I was merely stating what I do. ![]() As for your praise, thank you. ![]() |
![]() ![]() | |
Off
Profile |
Quote Top
|
| Geoffrey | Friday, 17. August 2012, 12:13 Post #6 |
![]()
It's a love story, baby just say yes
|
Sorry for commenting, won't do it again.
|
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.![]() Other Sigs Awards & Memories
| |
Off
Profile |
Quote Top
|
| Andrew | Friday, 17. August 2012, 12:13 Post #7 |
![]()
ぼくたちがすべてはばか。
|
One thing I want to add to the hover is the cursor: pointer attribute so your mouse cursor will change on hover. At the moment on hover the mouse cursor stays the same. |
![]() Professional web design/development services. • http://wildandrewlee.com/ | |
Off
Profile |
Quote Top
|
| Lewis. | Friday, 17. August 2012, 12:17 Post #8 |
|
Awesomesauce.
|
That's only on the JSFiddle demo. When the button is added to ZB, it's turned into a link and the hover state changes. Added it to the JSFiddle demo anyway. Edited by Lewis., Friday, 17. August 2012, 12:20.
|
![]() ![]() | |
Off
Profile |
Quote Top
|
| Andrew | Friday, 17. August 2012, 17:41 Post #9 |
![]()
ぼくたちがすべてはばか。
|
Even on ZB that's not the case. Take the buttons here for example. When you hover over something like the "Full Reply Screen" button the cursor does not change. Just being picky though
Edited by Andrew, Friday, 17. August 2012, 17:42.
|
![]() Professional web design/development services. • http://wildandrewlee.com/ | |
Off
Profile |
Quote Top
|
| Geoffrey | Friday, 17. August 2012, 17:43 Post #10 |
![]()
It's a love story, baby just say yes
|
The cursor changes for me on both fast reply buttons. ![]() BB code buttons too. |
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.![]() Other Sigs Awards & Memories
| |
Off
Profile |
Quote Top
|
| Aidan | Friday, 17. August 2012, 17:43 Post #11 |
![]()
Level 12
|
Uh.. both the big and small buttons are wrapped around links, so by default it is set to cursor:pointer;. |
Off
Profile |
Quote Top
|
| Lewis. | Friday, 17. August 2012, 18:29 Post #12 |
|
Awesomesauce.
|
Just made an edit of 4 lines within the gradient section of the tutorial - better browser support now.
|
![]() ![]() | |
Off
Profile |
Quote Top
|
| Robot | Friday, 17. August 2012, 19:32 Post #13 |
Level 9
|
Add this snippet.
|
Off
Profile |
Quote Top
|
| Ferus Grim | Friday, 17. August 2012, 19:44 Post #14 |
|
"Ego sum aeternam"
|
Very useful tutorial, Lewis.
|
| |
Off
Profile |
Quote Top
|
| Lewis. | Friday, 17. August 2012, 19:52 Post #15 |
|
Awesomesauce.
|
Thanks. Forgot all about that. Saw someone mention that before so I've added an image in there (in the description) to show what we're counter-acting. Thanks for bringing it up ![]()
Means a lot. Thanks
|
![]() ![]() | |
Off
Profile |
Quote Top
|
| Andrew | Friday, 17. August 2012, 20:52 Post #16 |
![]()
ぼくたちがすべてはばか。
|
Not the button elements themselves. When you hover over things like bbcode buttons the cursor doesn't change. |
![]() Professional web design/development services. • http://wildandrewlee.com/ | |
Off
Profile |
Quote Top
|
| Drama | Saturday, 18. August 2012, 10:38 Post #17 |
![]()
Level 11
|
Can we get a preview of your CSS button, Lewis?
Edited by Drama, Saturday, 18. August 2012, 10:38.
|
Off
Profile |
Quote Top
|
| Aidan | Saturday, 18. August 2012, 10:50 Post #18 |
![]()
Level 12
|
I almost didn't notice, but he posted it at the very beginning: http://jsfiddle.net/LewisBell/AmMu2/5/ |
Off
Profile |
Quote Top
|
| Lewis. | Saturday, 18. August 2012, 10:59 Post #19 |
|
Awesomesauce.
|
Made that bit of the tutorial a little bigger so it's not missed
|
![]() ![]() | |
Off
Profile |
Quote Top
|
| Hatsune Miku | Saturday, 18. August 2012, 22:07 Post #20 |
![]()
Humans Are So Interesting
|
There gonna be a tutorial with this regarding the other buttons? (Report/Delete/Edit/etc). Found this very useful and interesting.
|
![]() YouTube Channels TeamDeception09 | ThePokeeGamer ↑ Yu-Gi-Oh!! ↑ | ↑ Pokemon ↑ | |
Off
Profile |
Quote Top
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| Go to Next Page | |
| « Previous Topic · Coding & Development · Next Topic » |
- Pages:
- 1
- 2
| Track Topic · E-mail Topic |
8:12 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi





).






























8:12 PM Jul 10


Outline Live