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

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

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;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

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;
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

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
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Back to top


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