Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Buttons to CSS?, how to question
#
I have a lovely default skin (thanks, GMaster!) but I'm also working on a few alternate skins in hopes of improving my meager coding skills. The furthest along is a cyberpunk-y one and I've reached the point with it that I need some help and instruction. It has various issues (not least being it displays weird in IE), but what I most want to fix is the buttons.

At the moment the buttons are images, but I'd much rather they be CSS. I know that what I need to do is style a div (or maybe a class?) and then specify the buttons use that style. But how do I do that? What are the buttons called? How do I make things that aren't really buttons (like 'Closed') different?

If you want to view the cyberpunk skin it's here, user 'skintest' pw 'testskins'
PM
#
How to do it is to set up various buttons in the CSS like:

CODE

.button-large {} /* this is for like "add reply" */
.button-closed {}   /* this is for your specialised closed button */
.button-small {}  /* this is for ones like "quote" or "Gtalk" */


Then go to your Macros (ACP -> Skin & Templates -> Macros -> "Edit" beside the skin you're working on. ) And then beside each image there are links for advanced and simple.
Click the advanced link and it'll open up to show like:
CODE
<img src='style_images/2/t_new.gif' border='0'  alt='Start new topic' />



Just replace that with:
CODE
<div class="button-large">New Topic</div>

Or if it's a smaller button you clicked advanced on, you'd use a similar type of code but you'd use "button-small" instead of "button-large" and you'd change the text inside that div tag to match.
And for your closed button you'd use "button-closed".

Then you just have to replace all the buttons with their corresponding codes. But once you've done that you can style them very easily.

This post has been edited by VirusZero: Oct 16 2012, 10:13 AM

signature
user posted image
#
Use span not div but yeah what Crystal said smile.gif

signature
user posted image
#
QUOTE (GMaster479 @ Oct 16 2012, 10:25 AM)
Use span not div but yeah what Crystal said smile.gif
VirusZero not Crystal.

signature

user posted image
YouTube | Email: crystal@jcink.com | Blog: Seriously Lacqueing
DeviantArt
#
Woo, my new buttons are looking good. Thanks VirusZero and GMaster! There is, however, one tiny problem. For some reason, the closed 'button' extends completely underneath the two to the right of it. I might wind up replacing it with a graphic eventually, but I'd like it to stop doing that in the meantime. Any ideas where I went wrong?

oops, forgot to post the codes:

button-large code

CODE

.button-large {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
padding: 5px 10px;
background: -moz-linear-gradient(
 top,
 #857b85 0%,
 #ffffff 2%,
 #000000);
background: -webkit-gradient(
 linear, left top, left bottom,
 from(#857b85),
 color-stop(0.8, #000000),
 to(#ffffff));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #000000;
-moz-box-shadow:
 0px 1px 2px rgba(000,000,000,0.5),
 inset 0px 0px 3px rgba(255,255,255,1);
-webkit-box-shadow:
 0px 1px 2px rgba(000,000,000,0.5),
 inset 0px 0px 3px rgba(255,255,255,1);
box-shadow:
 0px 1px 2px rgba(000,000,000,0.5),
 inset 0px 0px 3px rgba(255,255,255,1);
text-shadow:
 0px 2px 0px rgba(000,000,000,0.1),
 0px 0px 0px rgba(255,255,255,1);
margin-left:2px;
margin-right:2px;
}  /* this is for like "add reply" */


button-closed code:

CODE

.button-closed {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding: 5px 10px;
margin-left:2px;
margin-right:2px;
background: -moz-linear-gradient(
 top,
 #f5ebf4 0%,
 #c2c0c2 11%,
 #ccc2cc);
background: -webkit-gradient(
 linear, left top, left bottom,
 from(#f5ebf4),
 color-stop(0.11, #c2c0c2),
 to(#ccc2cc));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 0px solid #000000;
-moz-box-shadow:
 0px 3px 11px rgba(000,000,000,0.5),
 inset 0px 0px 1px rgba(10,9,10,1);
-webkit-box-shadow:
 0px 3px 11px rgba(000,000,000,0.5),
 inset 0px 0px 1px rgba(10,9,10,1);
box-shadow:
 0px 3px 11px rgba(000,000,000,0.5),
 inset 0px 0px 1px rgba(10,9,10,1);
text-shadow:
 0px -1px 0px rgba(000,000,000,0.2),
 0px 1px 0px rgba(255,255,255,0.3);
}
/* this is for "closed" */


This post has been edited by Mordred: Oct 16 2012, 10:35 PM
PM
#
check the html for the closed button and make sure that it is a span.

Also for the rgba (000,000,000,0.5) just do rgba(0,0,0,.5)

This post has been edited by GMaster479: Oct 16 2012, 10:38 PM

signature
user posted image
#
Yep, that was the problem. Thanks, GMaster.

Okay, looks like this one is [SOLVED]. (but I'll be back ;>)
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll