Skip to main content
P
pathorse1-Visitor
1-Visitor
July 30, 2019
Solved

Footer background

  • July 30, 2019
  • 1 reply
  • 4268 views

Hi,

 

I notice that adding a footer to my 2D overlay has a default white background and im wondering if anyone has a tip for removing/changing it? Ive tried to use css to set it by giving the footer a class but this does not seem to work. 

 

Any tips are appreciated, thank you.

Best answer by ClayHelberg

I think you will need to use a Grid widget in the bottom panel rather than a Footer widget if you want to have the background show through with some partial transparency. AFAICT, the Footer widget actually resizes the 3D container, and is outside of it rather than in front, so you will never get the transparency to work the way you intend with that widget.

 

But you should be able to set a class on the bottom panel and then use a Grid for layout within that will do what you want.

1 reply

Y
ytella17-Peridot
17-Peridot
July 30, 2019

Hi @pathorse,

 

Could you please try the below css script to change the background color of the footer:

  • Navigate to Styles -> Application and copy the below script 
    • .footerColor
{ 	background: #FF0000; }
  • Call the footerColor in the Class Property of the footer as shown belowScreenshot_33.png

    Hope this helps!

    P
    pathorse1-VisitorAuthor
    1-Visitor
    July 30, 2019

    Thank you for an answer for changing the color.

     

    However this does not solve my problem as i also want to either remove it completely or make it 50 % transparent.

     

    Ive tried the following scripts without any success, with the second one not being ideal as it also makes elements added to the footer transparent (probably a easy workaround to be done here though).

     

    .footerColor { 	
 	background: rgba(255,255,255,0.5);
}

.footerColor { 	
 	background: #FFFFFF;
 	opacity: 0.5;
}


    .footerColor { 
    background: transparent;
    }

    Further my footer contains these elements:


    Capture.PNG

     

     

     

     

     

     

     

     

     

    Any tips?

    Y
    ytella17-Peridot
    17-Peridot
    July 30, 2019

    Please review the below code to change the background and text color of the footer:

    /* Change the background color and text color of the header */
ion-footer-bar.bar {
 background-color: blue;
 color: white;
}

ion-footer-bar.bar-footer {
 background-color: blue;
 color: white;
}

    ion-footer-bar is the default element name for a footer. No need to call this under the class property of the footer. The styles will be applied automatically when defined in the Application sheet.

    Terms & ConditionsAccessibility statement