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.

Modifying the Tool Bar

View previous topic View next topic Go down

In progress Modifying the Tool Bar

Post by Zed is Not Dead on October 7th 2015, 7:55 pm

Hey I want to know how to customize the tool bar on the forum

Our theme is black and blue so I want to incorperate that in the tool bar and get rid of the choppy images it has on it.


I want to make the search bar to be a magnifying glass like yours, and the share buttons be costum much like how yours are but I will make a different style, I can make the images my self and I have access to the founder account jut I haven't a clue how to do this as I never touched the tool bar before lol

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

In progress Re: Modifying the Tool Bar

Post by Ange Tuteur on October 7th 2015, 11:52 pm

Hi @Zed is Not Dead,

this topic should be helpful in providing some ways to customize your toolbar :
http://help.forumotion.com/t137076-personalize-the-entire-toolbar-with-css

To change the icon for the share buttons, you'll have to specify a background image for each one. For example :
Code:
#fa_fb {
  background:url('http://r34.imgfast.net/users/3412/19/22/63/smiles/45347.png') no-repeat 50% 50% !important;
}


You can also find more here :
http://help.forumotion.com/search?search_keywords=toolbar&search_where=f32

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Modifying the Tool Bar

Post by Zed is Not Dead on October 11th 2015, 11:19 am

so I got everything I wanted but the same style of search bar you have where you hover over it and it expands. If this isn't released to the public that is a shame and I can settle with a code to make this :



work in the tool bar as my search bar.

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

In progress Re: Modifying the Tool Bar

Post by Ange Tuteur on October 12th 2015, 12:48 pm

Hey again @Zed is Not Dead,

It's pretty simple, so I don't see any harm. Add the following to your stylesheet :
Code:
/* search bar */
#fa_search { position:relative }

#fa_search #fa_magnifier {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/search10.png') no-repeat 50% 50% #1860DB !important;
  border:1px solid #1860DB;
  border-left:none;
  border-radius:0 3px 3px 0;
  height:22px !important;
  width:22px !important;
  top:3px;
  right:0px;
}

#fa_search #fa_textarea {
  color:#1860DB !important;
  font-size:12px !important;
  background:#1860DB !important;
  border:1px solid #1860DB !important;
  border-radius:3px 0 0 3px !important;
  line-height:12px !important;
  height:16px !important;
  width:0px !important;
  margin-right:23px !important;
  padding:3px 0px 3px 1px !important;
  transition:300ms;
  cursor:text;
}

#fa_search:hover #fa_textarea, #fa_search #fa_textarea:hover, #fa_search #fa_textarea:focus {
  color:#FFF !important;
  background:#000 !important;
  width:150px !important;
  padding:3px !important;
  outline:none;
}
and change the colors as you like. Wink

You'll also need a bit of javascript to remove the indentation on the textarea. So, add the following script in all the pages :
Code:
$(function() {
  // perform another queue to modify the toolbar
  $(function() {
    var search = document.getElementById('fa_textarea');
    if (search && search.setAttribute) search.setAttribute('style', 'text-indent:0px !important');
  });
});

Sorry for the late reply, I took a break over the weekend. Cool

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
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