Forum Button Question...

[Selvester]

Okay so as the title says I have a question regarding forum buttons and before you go thinking I am looking for graphics, I'm not... Honestly the whole point is I am trying to avoid graphics.

Anyway I was working on a theme for a while and as usual I was just having the darnedest time with finding forum buttons that actually seem to work. And a thought passed through my head, something like "if only I could make my buttons through coding". And then I thought "well... why can't I?" So I did a little playing around and managed to get the basis of a button. My only apparent problem with it is that I can't figure out any way to get text on it... It's more of just a clickable block with no words at this point. I guess my question would be... can you help with the words? If adding words is even possible...

But anyway here is what I have so far. This particular one lines up for the button for adding a new post. I haven't looked into making any others yet as I wanted to see if I could successfully make one first...

Code:

.buttons div.post-icon {
height: 25px;
width: 96px;
border-radius: 15px;
border-top: 1px solid #96d1f8;
background: #000;
}

Any suggestions?

[TheCrow]

Hello Selvester,

At first i want to make your point clear so i make sure i understood correctly. You want to create new button or just customize the default ones?

And my question to you is: If you want to create new buttons, where do you want it/them to be?

Thank you,
Marios.

[Selvester]

Hello.

Yes I would like to create a new button. The original buttons are pictures what I would like to do is get rid of the picture completely and make a button out of CSS. I would hope to be able to do this for all the buttons such as new topic, New post, locked, etc. The code in the original post starts to do just that. I just can't figure out how to get any words on them. I am looking for help with adding words.

I hope that clears things up a little bit...

-Selly

[Ange Tuteur]

Hello Selvester,

First go to :
Pics management > Advance > Buttons
Replace the URL with an X so the text will display :


An example for a button I could give you is :

Code:

.i_post {
    color:#333;
    background:#CCC;
    border:1px solid #888;
    box-shadow:0px 10px 3px rgba(255,255,255,0.6) inset;
    border-radius:4px;
    display:inline-block;
    padding:3px 6px;
    margin:0 0;
}
.i_post:hover {
    background:#CCA;
    border:1px solid #886;
}

I love rgba for making glossy or gradient effects

You may also encounter some buttons which do not have a class or ID attribute. Instead you should try to target one of their attributes unique to them, for example :

Code:

img[alt="Send e-mail"] {
    background:red;
}

The send e-mail button does not have a class or ID, but we can select an attribute unique to it.

[Selvester]

Hello Ange. And thank you for responding.

However I still can't see the text... I just get that small image that shows there is an image missing...

EDIT: Scratch that last part. I checked it in FireFox and it seems to show perfectly there. However in Chrome it just shows that missing picture image like I said... And in IE has both. I took a screen shot of them all next to each other so you can see. Since I mainly use chrome is there anything else I would be able to do?

[Ange Tuteur]

Hmm.. It is kind of annoying that when you leave it blank, it adds the empty image. Since that does not work you'll have to just hide the images.

Might be able to do something with the content property, I'll have to check.

[Selvester]

Hello again.

I have tried pressing hide and basically having it as thought there was no image... But as there is no height and width specified with your code there is basically just a small clickable dot. Fixing that just takes me back to where I basically was originally... With a button containing no text.

[Ange Tuteur]

Since putting an invalid image returns a broken image, we could try the content property. This will be tricky because you need to select the links, and if they do not have a unique class or id, you'll have to select one of their attributes.

It can be a title : a[title="title"]
Its href : a[href="/somelocation"]
and so on..

Of course there are some key characters you can use to help you with this, because not every attribute contains the same value, especially links.

Example 1 Userlinks :

All userlinks contain a number at the end, but if we were to select this we would need to select the beginning.

Code:

<a href="/u1"></a>

This is where the caret character comes in, we can use this character to only select elements which have an attribute that begins with a certain value.

a[href^="/u"] will select the link above and any other link that starts with /u.

Example 2 Forumlinks :

another example can be the new topic button, this begins with a forum id and is different for each forum. To select it in every forum we'd need to select the end of the attribute.

Code:

<a href="/post?f=42&mode=newtopic"></a>

Here we would use the dollar sign to select an element whose attribute ends with a certain value.

a[href$="&mode=newtopic"] will select the topic button above, and every other new topic button.

The last character you can use is the asterisk, or "wildcard". This selects any element that contains a certain value : a[href*="foobar"]

There's more on these selectors here if you want to have a look :
http://www.w3schools.com/cssref/css_selectors.asp

---

I've set up some example codes to try. We'll be using :after and the content property to insert text after a link.

The new topic button :

Code:

a[href$="&mode=newtopic"]:after {
    content:"New Topic";
    color:#333;
    background:#CCC;
    border:1px solid #888;
    box-shadow:0px 10px 3px rgba(255,255,255,0.6) inset;
    border-radius:4px;
    display:inline-block;
    padding:3px 6px;
    margin:0 0;
}
a[href$="&mode=newtopic"]:hover:after {
    background:#CCA;
    border:1px solid #886;
}

Some profile icons :

Code:

/* text */
.profile-icon[href^="/u"]:after { content:"Profile"; }
.profile-icon[href^="/privmsg?mode=post&u="]:after { content:"PM"; }
.postprofile a[href^="/profile?mode=email&u="]:after { content:"E-mail"; }

/* style */
.profile-icon[title="View user profile"]:after, .profile-icon[href^="/privmsg?mode=post&u="]:after,.postprofile a[href^="/profile?mode=email&u="]:after {
    color:#333;
    background:#CCC;
    border:1px solid #888;
    box-shadow:0px 10px 3px rgba(255,255,255,0.6) inset;
    border-radius:4px;
    display:inline-block;
    padding:3px 6px;
    margin:0 0;
}
.profile-icon[title="View user profile"]:hover:after,.profile-icon[href^="/privmsg?mode=post&u="]:hover:after, .postprofile a[href^="/profile?mode=email&u="]:hover:after {
    background:#CCA;
    border:1px solid #886;
}