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.

Resizing the Toolbar!!

View previous topic View next topic Go down

Solved Resizing the Toolbar!!

Post by Kynamic on November 22nd 2015, 11:52 pm

Resizing the Toolbar

Is there a way to resize the toolbar through css or javascript? For example resizing height of the bar to 64px.

Thanks
Kynamic Exclamation


Last edited by Kynamic on November 27th 2015, 7:21 am; edited 1 time in total

Kynamic
New Member

Posts : 22
Reputation : 1
Language : English

http://freestyleforums.forumotion.com

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Ace on November 23rd 2015, 12:13 am

Hello,

Yes. Add this to your CSS Stylesheet:

Code:
#fa_toolbar{
padding-bottom: 10px !important;
padding-top: 10px !important;
}

Remember that the padding will be added to the height. The standard height of the toolbar is 60px. If you add 10px - like the code above - the total height will be 70px. Padding top and padding bottom should have the same value in PX so the content can be centered.

Regards.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Kynamic on November 23rd 2015, 4:11 am

@Ace wrote:Hello,

Yes. Add this to your CSS Stylesheet:

Code:
#fa_toolbar{
padding-bottom: 10px !important;
padding-top: 10px !important;
}

Remember that the padding will be added to the height. The standard height of the toolbar is 60px. If you add 10px - like the code above - the total height will be 70px. Padding top and padding bottom should have the same value in PX so the content can be centered.

Regards.

Thanks! Do you also know how to modify the max width/height of the icon on the navbar? Both it and the searchbar look minuscule on the navbar now Laughing

Kynamic
New Member

Posts : 22
Reputation : 1
Language : English

http://freestyleforums.forumotion.com

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Ace on November 23rd 2015, 3:15 pm

Hi,

Which icon? Depending, I can adjust it. However, if I modify an image that was designed to be 30px by 30px to become a 60 px by 60px it'll lose a lot of its quality. :S Maybe asking for it at the Design Section here? Smile Tell me which ones you want to modify.

Regards.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Kynamic on November 23rd 2015, 3:33 pm

@Ace wrote:Hi,

Which icon? Depending, I can adjust it. However, if I modify an image that was designed to be 30px by 30px to become a 60 px by 60px it'll lose a lot of its quality. :S Maybe asking for it at the Design Section here? Smile Tell me which ones you want to modify.

Regards.

I mean I have an image that's a lot bigger but it was resized to fit in the 30px by 30px container, but I want to make it look a lot bigger Razz

Kynamic
New Member

Posts : 22
Reputation : 1
Language : English

http://freestyleforums.forumotion.com

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Ace on November 23rd 2015, 3:50 pm

Hi,

Sure. I guess this is the image, right? http://i68.servimg.com/u/f68/18/58/06/68/logone11.png

Just add this to the top of your CSS Stylesheet:

Code:
#fa_toolbar #fa_icon {
width: 365px;
height: 60px;
background-size: initial !important;
}

Regards!

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Kynamic on November 23rd 2015, 7:37 pm

@Ace wrote:Hi,

Sure. I guess this is the image, right? http://i68.servimg.com/u/f68/18/58/06/68/logone11.png

Just add this to the top of your CSS Stylesheet:

Code:
#fa_toolbar #fa_icon {
width: 365px;
height: 60px;
background-size: initial !important;
}

Regards!

Okay I put in the code, but now the image is the right size but it only shows a fraction of it Embarassed sorry about all this

Kynamic
New Member

Posts : 22
Reputation : 1
Language : English

http://freestyleforums.forumotion.com

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Ace on November 23rd 2015, 8:34 pm

Hi,

No problem, glad to help. Smile

Code:
#fa_toolbar #fa_icon {
width: 365px !important;
height: 60px !important;
background-size: initial !important;
}

I forgot to add a rule to the width. Should work now. Wink

Regards.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Kynamic on November 24th 2015, 4:10 am

@Ace wrote:Hi,

No problem, glad to help. Smile

Code:
#fa_toolbar #fa_icon {
width: 365px !important;
height: 60px !important;
background-size: initial !important;
}

I forgot to add a rule to the width. Should work now. Wink

Regards.

Last things (only if you don't mind) I don't know how to center it in the middle of the toolbar, also how to resize and center the search bar Razz

Thanks again for all you're help!!

Kynamic
New Member

Posts : 22
Reputation : 1
Language : English

http://freestyleforums.forumotion.com

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Ace on November 24th 2015, 9:52 am

Hi,

What do you want to center in the bar? Tell me this so I can make the codes both for the searching bar and whatever you want to center Smile

Regards.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Kynamic on November 25th 2015, 6:03 pm

@Ace wrote:Hi,

What do you want to center in the bar? Tell me this so I can make the codes both for the searching bar and whatever you want to center Smile

Regards.

Here is roughly what I would like it to look like:

Toolbar:

So basically the logo and search bar centered and the search bar resized.

Thanks so much!

Kynamic
New Member

Posts : 22
Reputation : 1
Language : English

http://freestyleforums.forumotion.com

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Kynamic on November 27th 2015, 4:46 am

@ace I put a picture for how the logo and search bar are centered.

Thanks for your help!

Kynamic
New Member

Posts : 22
Reputation : 1
Language : English

http://freestyleforums.forumotion.com

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Luffy on November 27th 2015, 4:54 am

Hello,

Try adding this in your CSS:
Code:
#fa_toolbar #fa_icon { background-position:-2px -7px!important;}
#fa_search {margin-top:-15px!important;}






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Kynamic on November 27th 2015, 6:08 am

@Luffy wrote:Hello,

Try adding this in your CSS:
Code:
#fa_toolbar #fa_icon { background-position:-2px -7px!important;}
#fa_search {margin-top:-15px!important;}

Awesome, it works! Thanks so much! Do you have any tips on resizing the search bar? Very Happy

-

Kynamic
New Member

Posts : 22
Reputation : 1
Language : English

http://freestyleforums.forumotion.com

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Rhino.Freak on November 27th 2015, 7:08 am

This will do the trick Smile
Code:
#fa_search #fa_textarea {
    width: 400px !important;
    height: 33px !important;
    margin-top: -7px !important;
}
#fa_search #fa_magnifier {
    background-position: -30px -4px !important;
}

EDIT: This code will help, I forgot that you wanted more width for the search bar lol XD

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by Kynamic on November 27th 2015, 7:20 am

@Rhino.Freak wrote:This will do the trick Smile
Code:
#fa_search #fa_textarea {
    width: 400px !important;
    height: 33px !important;
    margin-top: -7px !important;
}
#fa_search #fa_magnifier {
    background-position: -30px -4px !important;
}

EDIT: This code will help, I forgot that you wanted more width for the search bar lol XD

It works perfectly! I also added a width property and now it's exactly how I wanted. Thanks everyone! Very Happy Hello 1st

Kynamic Exclamation

Kynamic
New Member

Posts : 22
Reputation : 1
Language : English

http://freestyleforums.forumotion.com

Back to top Go down

Solved Re: Resizing the Toolbar!!

Post by SLGray on November 27th 2015, 8:37 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35652
Reputation : 2375
Language : English
Location : United States

http://fmthemes.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