Skip to main content ↑ ↓
Topic: Change the Buttons color (Read 2744 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Change the Buttons color

Hi

Im realy new to elkarte but i managed to migrate my mybb forum to elkarte and now i work on a theme but after years of working in phpbb and mybb i get a little confused... :)

as you can see in the atachments i want to change the colors and so for the buttons on top and under the content....
i think i found the code in the index.css $BUTTONS but not sure wich sections in there. I think it is one of the first "list...." thing but maybe someone can point me to the right direction or even can tell me if it is possible to change the colors,shape,... of every button for his own?


Re: Change the Buttons color

Reply #1 –

Hello blueone and welcome. :)

To control the aspect of each single button above (and below) the messages (reply/notify/etc.) you can use the classes:
button_strip_reply
 button_strip_notify
button_strip_mark_unread
 button_strip_unwatch
button_strip_send
 button_strip_print
and others depending on the buttons. They are attached to the "a" tag.
You may need to use some other class or the !important flag to override existing styles depending on what you want to obtain. ;)

For the buttons of the editor (post/preview/save draft/etc.) there isn't a set of specific classes, they all share the same.
You may try as first option to use the name as selector, something like:
Code: [Select]
.submitbutton .button_submit[name="post"] {
	
}
should mostly do the trick.
Funnily enough, due to a bug I discovered right now, the post button doesn't have the name in the full reply page, so to style that one you have to either fix it editing a file, or wait for 1.0.4 that was due two days ago, but is (very) late... :-[ Hopefully a couple of weeks...
Bugs creator.
Features destroyer.
Template killer.

Re: Change the Buttons color

Reply #2 –

Hey tanks for the fast answer emanuele!

ok i see when i get you right than this sections makes the trick, btw when i set the tags as you descripte then the buttons should to as i want.

Quote}
   #moderationbuttons, a.linklevel1.button_strip_notify,
   a.linklevel1.button_strip_print, a.linklevel1.button_strip_send, .inline_mod_check,
   a.linklevel1.quotetonew_button, a.linklevel1.button_strip_post_poll,
   a.linklevel1.post_options, .keyinfo .post_subject, li.listlevel1.quickmod_select_all,
   #collapse_button, p.inline.membergroups {
      display: none !important;
   }

and okay i will try it with the importand flag. my goal is to Highlight some of the buttons to make it easier to find them exspecialy the answer button

oh okay no stress emanuele i have time :) and now i know how to fix it for my own thank you!

edit:

one thing make me now strugle in first place i try to edit the default theme (to make a copy from admin cp is a nice feature btw)
i use the social variante so i think i must make the changes in the social_index ore is this only a override of the default index?
Last Edit: June 09, 2015, 08:51:09 am by blueone

Re: Change the Buttons color

Reply #3 –

If you want to keep all the custom changes in one place, I'd suggest to use "custom.css".
 emanuele puts on the todo list to write a clean description of how to use it.
In the meantime: you can add to themes/{your_theme}/css[1]a file named "custom.css" (you have to do it from ftp or cPanel) it will be used as last stylesheet and so you can add styles to override the default ones. The advantage is that custom.css will not be overwritten in case up update/upgrade, so you will be able to preserve it. :)
The same is valid for variants as well, so you can use custom_besocial.css inside of themes/{your_theme}/css/_besocial/ and so on.
1 Of course, instead of "{your_theme}" you have to look into the directory of your theme. ;)↵
Bugs creator.
Features destroyer.
Template killer.

Re: Change the Buttons color

Reply #4 –

oh the costum.css sounds nice, i will try this later today.
thank you very much!

Re: Change the Buttons color

Reply #5 –

hmm couldnt wait for the evening ;)

made a costum.css in my copied default elkarte theme 

the hover effekt works like a charm but the base background color didnt change even with the important flag

(code is not clean i know for testing i used a button generator)

.button_strip_reply  {
  background: #3498db !important;
  background: -webkit-linear-gradient(top, #3498db, #2980b9) !important;
  background: -moz-linear-gradient(top, #3498db, #2980b9) !important;
  background: -ms-linear-gradient(top, #3498db, #2980b9) !important;
  background: -o-linear-gradient(top, #3498db, #2980b9) !important;
  background: linear-gradient(to bottom, #3498db, #2980b9) !important;
  font-family: Arial;
  color: #ffffff !important;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.button_strip_reply:hover {
  background: #3cb0fd;
  background: -webkit-linear-gradient(top, #3cb0fd, #3498db) !important;
  background: -moz-linear-gradient(top, #3cb0fd, #3498db)!important;
  background: -ms-linear-gradient(top, #3cb0fd, #3498db) !important;
  background: -o-linear-gradient(top, #3cb0fd, #3498db) !important;
  background: linear-gradient(to bottom, #3cb0fd, #3498db) !important;
  text-decoration: none;
}

Re: Change the Buttons color

Reply #6 –

Try it with
Code: [Select]
a.linklevel1.button_strip_notify {
  background: #aaa;
}

a.linklevel1.button_strip_reply.active {
  background: #ccc;
}
Note: the reply button is a bit different due to the .active class.
Thorsten "TE" Eurich
------------------------

Re: Change the Buttons color

Reply #7 –

THX TE!

it works!