Toolbar Text Color Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
4 posters

    Toolbar Text Color

    avatar
    Rogo
    Forumember


    Posts : 262
    Reputation : 1
    Language : English

    Solved Toolbar Text Color

    Post by Rogo February 14th 2013, 4:36 am

    Is there a way to modify the text color of the new toolbar? White on grey isn't the best.
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Toolbar Text Color

    Post by Sanket February 14th 2013, 4:48 am

    https://help.forumotion.com/t120381-customize-your-toolbar-through-css-and-javascript
    Can change the background color.

    Do you want to change the font color for all the text?
    avatar
    Rogo
    Forumember


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 5:44 am

    We have a grey toolbar on the bottom. I made an image similar to it so I am wanting to change all the text like the forumotion link, share, welcome, and notifications to a different color if I can.
    !_NICK_!
    !_NICK_!
    Active Poster


    Male Posts : 1505
    Reputation : 69
    Language : English, HTML, and CSS
    Location : In the middle of no return.

    Solved Re: Toolbar Text Color

    Post by !_NICK_! February 14th 2013, 8:35 am

    Yes, you can do that with CSS. Just find the element.
    avatar
    Rogo
    Forumember


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 8:28 pm

    Do I have to keep the spaces because the text color didn't change.
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: Toolbar Text Color

    Post by SLGray February 14th 2013, 8:31 pm

    Post the code that you used.



    Toolbar Text Color Slgray10

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


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 8:37 pm

    Code:
    #fa_toolbar {
    color: #892110 !important;
    }

    Basically what was posted above.
    avatar
    Rogo
    Forumember


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 8:50 pm

    That took care of welcome and notifications but not share and the forumotion link. Going with that red, I think it would be nice to make it bold if I can.

    Spoiler:
    ^ full CSS
    avatar
    Rogo
    Forumember


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 8:56 pm

    No change.
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: Toolbar Text Color

    Post by SLGray February 14th 2013, 9:18 pm

    Here is the share one:
    Code:
    #fa_share_text {
        color: YOUR COLOR !important;
    }
    Forumotion one:
    Code:
    #fa_icon, #fa_toolbar #fa_service {
        color: Your Color !important;
    }



    Toolbar Text Color Slgray10

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


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 9:33 pm

    Code:
    #fa_share_text {
    color: #892110;
    }

    #fa_icon, #fa_toolbar #fa_service {
    color: #892110;
    }
    No change
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: Toolbar Text Color

    Post by SLGray February 14th 2013, 9:35 pm

    Add !important.



    Toolbar Text Color Slgray10

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


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 9:40 pm

    Still nothing.

    Code:
    ul#picture_legend {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('http://i34.tinypic.com/b80g87.png');
    text-align: center;
    padding: 24px 0;}
    #fa_toolbar, #fa_toolbar_hidden {background: url('http://i71.servimg.com/u/f71/13/02/75/38/untitl10.png');}
      /*background: linear-gradient( 0deg, #d1cfd0, #f7f7f7 );
      color: #808080 !important;*/
    }
    #fa_search {
      display: none !important;
    }
    #fa_textarea {
      width: 30px !important;
     -webkit-transition-duration: 400ms;
     -webkit-transition-property: width;
     -webkit-transition-timing-function: ease;
     -moz-transition-duration: 400ms;
     -moz-transition-property: width;
     -moz-transition-timing-function: ease;
     -o-transition-duration: 400ms;
     -o-transition-property: width;
     -o-transition-timing-function: ease;
    }
    #fa_textarea:focus {
     width: 200px !important;
    }
    #page-header .navbar .inner .navlinks {
     border-bottom: none !important;
    }
    #page-header .navbar .inner #search-box {
     display: none !important;
    }
    #fa_toolbar div, #fa_toolbar a {
    color: #892110 !important;
    }
    #fa_share_text {
    color: #892110; !important.
    }
    #fa_icon, #fa_toolbar #fa_service {
    color: #892110; !important.
    }
    There's my CSS. I want to keep the image, I want the other 2 sections red and I want the text bold if there is a way to do it. I'm also getting the following warning.


    Detected error
    We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

    We advise you to reread your code.
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: Toolbar Text Color

    Post by SLGray February 14th 2013, 9:42 pm

    Code:
    #fa_share_text {
    color: #892110; !important.
    }
    #fa_icon, #fa_toolbar #fa_service {
    color: #892110; !important.
    }
    Periods should be ;'s. Remove the first ;'s.



    Toolbar Text Color Slgray10

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


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 9:52 pm

    That works for share but not for the forumotion link.
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: Toolbar Text Color

    Post by SLGray February 14th 2013, 9:57 pm

    It works when I try it on the support.



    Toolbar Text Color Slgray10

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


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 10:37 pm

    Code:
    ul#picture_legend {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('http://i34.tinypic.com/b80g87.png');
    text-align: center;
    padding: 24px 0;}
    #fa_toolbar, #fa_toolbar_hidden {background: url('http://i71.servimg.com/u/f71/13/02/75/38/untitl10.png');}
         /*background: linear-gradient( 0deg, #d1cfd0, #f7f7f7 );
         color: #808080 !important;*/
    }
    #fa_search {
        display: none !important;
    }
    #fa_textarea {
         width: 30px !important;
       -webkit-transition-duration: 400ms;
       -webkit-transition-property: width;
       -webkit-transition-timing-function: ease;
       -moz-transition-duration: 400ms;
       -moz-transition-property: width;
       -moz-transition-timing-function: ease;
       -o-transition-duration: 400ms;
       -o-transition-property: width;
       -o-transition-timing-function: ease;
    }
    #fa_textarea:focus {
       width: 200px !important;
    }
    #page-header .navbar .inner .navlinks {
       border-bottom: none !important;
    }

    #page-header .navbar .inner #search-box {
       display: none !important;
    }
    #fa_toolbar div, #fa_toolbar a {
    color: #892110 !important;
    }
    #fa_share_text {
    color: #892110 !important;
    }
    #fa_icon, #fa_toolbar #fa_service {
    color: #892110 !important;
    }

    There you go
    avatar
    Rogo
    Forumember


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 10:43 pm

    avatar
    Rogo
    Forumember


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 10:49 pm

    That got it. Do you know if I can bold the text?
    avatar
    Rogo
    Forumember


    Posts : 262
    Reputation : 1
    Language : English

    Solved Re: Toolbar Text Color

    Post by Rogo February 14th 2013, 10:53 pm

    Thank you very much.