Modifying the Tool Bar

[Zed is Not Dead]

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

[Ange Tuteur]

Hi @Zed is Not Dead,

this topic should be helpful in providing some ways to customize your toolbar :
https://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 :
https://help.forumotion.com/search?search_keywords=toolbar&search_where=f32

[Zed is Not Dead]

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.

[Ange Tuteur]

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.

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.