- 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,789 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
|
| Replies: | |
|---|---|
| Lewis. | Sunday, 19. August 2012, 03:04 Post #21 |
|
Awesomesauce.
|
It would be the same principle. Create a <div class="postbuttons">delete</div> And add the styling to your CSS like you do with this: .postbutton{} I'll have a look when I can get on my laptop to make sure there's no default zb stuff that throws them out of line. Same idea though. |
![]() ![]() | |
Off
Profile |
Quote Top
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « 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