Mimicking Support's Toolbar

Go down

Solved Mimicking Support's Toolbar

Post by The Last Outlaw on July 4th 2018, 6:46 pm

http://betheasbyte.forumotion.com/forum

Hi. I have followed Tips and Tricks on Customizing my Toolbar with CSS. But everytime I come to support (whether I have a support question, or just popping in to visit), I notice the search bar is hidden, the "Welcome __________" and "Notifications" has a border around them and I think that is cool.

With my changes already established, how can I mimic this look for my toolbar?


Last edited by The Last Outlaw on July 4th 2018, 8:51 pm; edited 2 times in total
avatar
The Last Outlaw
Forumember

Male Posts : 139
Reputation : 5
Language : English (US)
Location : Salem, Oregon, USA

http://betheasbyte.forumotion.com

Back to top Go down

Solved Re: Mimicking Support's Toolbar

Post by skouliki on July 4th 2018, 7:34 pm

hi 

add this to your css for the border
Code:

#fa_right #fa_notifications, #fa_welcome {
      line-height: 27px;
    border: 1px solid #ff001b!important;

change the color to your likeness

for the search add this to your css and we will see if you need any modifications

Code:

#fa_search {
    position: relative
}
#fa_search #fa_magnifier {
    background-color: #FFF;
    background-position: 12% 50% !important;
    border: 1px solid #F00;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 23px!important;
    right: 0;
    top: 2px;
    width: 23px!important
}
#fa_search #fa_textarea {
    background: #FFF!important;
    border: 1px solid #F00!important;
    border-radius: 3px 0 0 3px!important;
    color: #000!important;
    cursor: text;
    font-size: 12px!important;
    height: 17px!important;
    text-indent: 0!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    margin-top: 2px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important
}
#fa_search #fa_textarea:focus,
#fa_search #fa_textarea:hover,
#fa_search:hover #fa_textarea {
    background: #FFF!important;
    color: #000!important;
    outline: none;
    padding: 3px!important;
    width: 150px!important
}
avatar
skouliki
Manager
Manager

Female Posts : 4653
Reputation : 770
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Mimicking Support's Toolbar

Post by The Last Outlaw on July 4th 2018, 7:46 pm

Thanks @skouliki The borders look great! Now how do I hide my search bar?

Everything looks good!

Solved!


Last edited by The Last Outlaw on July 4th 2018, 8:18 pm; edited 1 time in total
avatar
The Last Outlaw
Forumember

Male Posts : 139
Reputation : 5
Language : English (US)
Location : Salem, Oregon, USA

http://betheasbyte.forumotion.com

Back to top Go down

Solved Re: Mimicking Support's Toolbar

Post by skouliki on July 4th 2018, 7:47 pm

see my post above i edit it
avatar
skouliki
Manager
Manager

Female Posts : 4653
Reputation : 770
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Mimicking Support's Toolbar

Post by The Last Outlaw on July 4th 2018, 8:40 pm

@skouliki wrote:see my post above i edit it

Done and done!

Solved! Thank you so much!
avatar
The Last Outlaw
Forumember

Male Posts : 139
Reputation : 5
Language : English (US)
Location : Salem, Oregon, USA

http://betheasbyte.forumotion.com

Back to top Go down

Solved Re: Mimicking Support's Toolbar

Post by skouliki on July 4th 2018, 9:03 pm

perfect ...you are welcome
avatar
skouliki
Manager
Manager

Female Posts : 4653
Reputation : 770
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Mimicking Support's Toolbar

Post by APE on July 4th 2018, 9:34 pm

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules



avatar
APE
Administrator
Administrator

Male Posts : 13102
Reputation : 1387
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


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