News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Board buttons etc????

Started by SteveFJ, September 09, 2010, 06:53:59 AM

Previous topic - Next topic

SteveFJ

Hello,

Sorry if this has been asked already. I should imagine that it has but can't find anything.

I'm working on the Core template to customise it, but I want to show buttons rather than text links. I can get it work of sorts by styling the css, but IE doesn't like it, as it still shows text over the buttons.  :(

I'll just confirm that it is for 2.0 RC3.

Any help would be appreciated.

Much thanks.

SteveFJ

I've just had another thought on this. Would be even possible to use the same background image but change just the colour of the font used for each button? As an example: Green for Reply and orange for Add Poll.


Alex' Manson

for the button color thing i don't think so..

SteveFJ

Quote from: skander1345 on September 09, 2010, 07:47:48 AM
for the button color thing i don't think so..


Thanks for your reply.

I have just managed to get this to work. just as a test I put this in the style sheet:



a.button_strip_reply{
background: url(../images/english/reply.gif);
height: 20px;
width: 70px;
color: green !important;
font-weight: bold !important;
font-size: 12px;
}

a.button_strip_send{
background: url(../images/english/sendtopic.gif);
height: 20px;
width: 90px;
color: yellow !important;
font-size: 12px;
font-weight: bold !important;
}

a.button_strip_print{
background: url(../images/english/print.gif);
height: 20px;
width: 70px;
color: red !important;
font-size: 12px;
font-weight: bold !important;
}

a.button_strip_new_topic{
background: url(../images/english/new_topic.gif);
height: 20px;
width: 90px;
color: green !important;
font-size: 12px;
font-weight: bold !important;
}

a.button_strip_post_poll{
background: url(../images/english/new_poll.gif);
height: 20px;
width: 90px;
color: #c0c0c0 !important;
font-size: 12px;
font-weight: bold !important;
}

a.button_strip_add_poll{
background: url(../images/english/new_poll.gif);
height: 20px;
width: 90px;
color: orange!important;
font-size: 12px;
font-weight: bold !important;
}

a.button_strip_notify{
background: url(../images/english/notify.gif);
height: 20px;
width: 70px;
color: blue !important;
font-size: 12px;
font-weight: bold !important;
}

a.button_strip_markread{
background: url(../images/english/markread.gif);
height: 20px;
width: 100px;
color: brown !important;
font-size: 12px;
font-weight: bold !important;
}
a.button_strip_markunread{
background: url(../images/english/markunread.gif);
height: 20px;
width: 100px;
color: brown !important;
font-size: 12px;
font-weight: bold !important;
}

a.button_strip_markread{
background: url(../images/english/markread.gif);
height: 20px;
width: 100px;
color: brown !important;
font-size: 12px;
font-weight: bold !important;
}

a.button_strip_mark_read{
background: url(../images/english/markread.gif);
height: 20px;
width: 100px;
color: brown !important;
font-size: 12px;
font-weight: bold !important;
}

a.button_strip_mark_unread{
background: url(../images/english/markunread.gif);
height: 20px;
width: 100px;
color: brown !important;
font-size: 12px;
font-weight: bold !important;
}



I need to change the buttons so that they are without text and sort the widths to suit the text.
For hover I've just added a 1px margin at the top so that the buttons and text move down slightly.
The important statement force things to work in IE.

I think I can mark this as solved.

Advertisement: