The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Toolbar customization fitting to my forum

View previous topic View next topic Go down

Solved Toolbar customization fitting to my forum

Post by darki on September 24th 2015, 7:59 pm

Hi,

I want to customize my forumotion toolbar. Actually it looks like that:


My goal is to have a background color, hover effect (no underline!) and border for the toolbar fitting to my forum.
Like the new toolbar in support forum. It's fitting to the forum and looks great. I like the border and hover effect. Smile
Anyone an idea?

Important is that the chatbox script by @Ange Tuteur in the toolbar should has the same appearance. Very Happy

I would be very grateful for getting help!


darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Solved Re: Toolbar customization fitting to my forum

Post by Ange Tuteur on September 24th 2015, 8:10 pm

Hi @darki,

You'll need just a bit of CSS to style the toolbar buttons :
Code:
/* default state */
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
  color:#333 !important;
  font-size:11px !important;
  font-weight:bold !important;
  text-decoration:none !important;
  line-height:22px !important;
  background-color:transparent !important;
  border:1px solid #333 !important;
  border-radius:3px !important;
  padding:0px 6px !important;
  margin-top:3px !important;
  transition:200ms;
}

/* hover / actif state */
#fa_right a.rightHeaderLink:hover, #fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
  color:#FFF !important;
  background-color:#333 !important;
  border-color:#333 !important;
}

/* remove style */
#fa_right #fa_hide {
  background-color:transparent !important;
  padding:0 !important;
  margin-top:0 !important;
  border:none !important;
  transition:none !important;
}

If the chat button isn't styled you should add #fa_chat_button to the rules.

The effect is pretty simple, in case you want to apply it elsewhere. For example :
Code:
/* default state */
{
  color:#39C;
  background-color:transparent;
  border:1px solid #39C;
  transition:200ms;
}

/* hover state */
{
  color:#FFF;
  background-color:#39C;
}

Keep the background transparent and have a border. Then when you hover add a background color that matches the border color and change the text color if necessary.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Toolbar customization fitting to my forum

Post by darki on September 24th 2015, 8:20 pm

Thank you for answering, Ange. Smile

Result:


The left box touches the avatar in toolbar. Also are the two boxes not on the same height.

Aswell, I added your second CSS and added #fa_chat_button before "{", but not working. :/

darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Solved Re: Toolbar customization fitting to my forum

Post by Ange Tuteur on September 24th 2015, 11:14 pm

Could you post the script you're using for the avatar here ?

Odd, try this for the chat button :
Code:
#fa_chat_button {
  color:#FFF;
  border:1px solid #FFF;
  line-height:30px;
  margin-left:10px;
  padding:0 5px;
  cursor:pointer;
  transition:200ms;
}

#fa_chat_button:hover {
  color:#333;
  background:#FFF;
  border:1px solid #FFF;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Toolbar customization fitting to my forum

Post by darki on September 25th 2015, 4:12 pm

Edit: Now all works fine. I edited the CSS and it looks like it should, except for the avatar.

Edit 2: For the avatar I added margin-left to the CSS. So all problems are solved and I will look how to modify it. Smile

Thanks, Ange.

darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Solved Re: Toolbar customization fitting to my forum

Post by Ange Tuteur on September 25th 2015, 4:46 pm

Oh yeah, the script should apply a style attribute, right ? If so, try replacing the styles in the script with this :
Code:
height:25px;width:25px;vertical-align:middle;margin-bottom:-3px;margin-right:3px;

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Toolbar customization fitting to my forum

Post by darki on September 25th 2015, 5:03 pm

Not necessary. Very Happy
I added margin-left:
Code:
#fa_right #fa_menu #fa_welcome,#fa_right.notification #fa_menu #fa_welcome {
font-size:14px;
margin-left:4px;
}

Now I check which border style fits to my forum. The hover effect with color code #333 fits since I added the same color code for hover effect for the navbar.
So I think the problem is solved.

Thank you for helping with giving me the needed CSS, Ange. Smile

darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Solved Re: Toolbar customization fitting to my forum

Post by Ange Tuteur on September 25th 2015, 5:20 pm

Ooh no problem. Mr. Green

Topic archived

Have a great weekend. Very Happy

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum