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

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
avatar
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.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
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2907
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

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.
avatar
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.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
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2907
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


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