1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      1  

    Default Answered: Toolbar remove default background color / set to transparent

    Answered: Toolbar remove default background color / set to transparent


    I have a toolbar where I set the background-image. Ok that works fine, however, my background-image is a png and is semi transparent so I would like to see whats under the toolbar and not the sencha default toolbar color of blue. I tried using component instead of toolbar but instead of the sencha default blue I see grey, plus my images are all centered so I'd rather stick with toolbar if I can.

  2. Ok got it.... besides setting background-color: transparent !important; in your toolbar cls, add this to your toolbar config:

    Code:
     overlay: true,
    style: 'opacity: .6;',
    NOTE: 'overlay' is deprecated

  3. #2
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    Ok Here is my css for my my_toolbar which sets the background-color to transparent. But now I still see a grey background. Is it the grey the HBox container? , if so how can I set that background to transparent without setting all my toolbar buttons to transparent?

    .my_toolbar{
    height: 104px !important;
    width: 2048px !important;
    background-image: url('../images/nav/bkgnd.png') !important;
    border: none !important;
    background-color: transparent !important;
    }
    Last edited by Mike6679; 25 Jul 2012 at 7:47 AM. Reason: grammar

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      1  

    Default


    Ok got it.... besides setting background-color: transparent !important; in your toolbar cls, add this to your toolbar config:

    Code:
     overlay: true,
    style: 'opacity: .6;',
    NOTE: 'overlay' is deprecated

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    asmuench is on a distinguished road

      0  

    Default Thanks

    Thanks


    Mike - Thanks, very helpful. Have you tested this with other components?

  6. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    1
    noiks is on a distinguished road

      1  

    Default


    Quote Originally Posted by Mike6679 View Post
    Ok Here is my css for my my_toolbar which sets the background-color to transparent. But now I still see a grey background. Is it the grey the HBox container? , if so how can I set that background to transparent without setting all my toolbar buttons to transparent?

    .my_toolbar{
    height: 104px !important;
    width: 2048px !important;
    background-image: url('../images/nav/bkgnd.png') !important;
    border: none !important;
    background-color: transparent !important;
    }
    if
    HTML Code:
    background-color: transparent !important; 
    does not work(most probably it will not for 4.1) try
    HTML Code:
    background: transparent !important;