Make superset-logo-horiz.png bigger

[acolgecen]

I would like to enlarge the superset-logo-horiz.png logo on the Superset UI's frontend.
I understand that the superset_config.py file does not recognize CUSTOM_CSS = "/static/assets/".

Does anyone know the correct way to achieve this?

[dosubot]

To enlarge the superset-logo-horiz.png logo in the Superset UI, you can use custom CSS. Here's how you can achieve this:

1. Inject Custom CSS: Use the injectCustomCss function to apply your custom styles. This function allows you to add CSS directly to the document's head.

import injectCustomCss from 'path/to/injectCustomCss';

const customCss = `
  /* Example CSS to enlarge the logo */
  .navbar-brand img {
    width: 200px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
  }
`;

const removeCustomCSS = injectCustomCss(customCss);

// Call removeCustomCSS() if you need to remove the custom styles later

2. CSS Templates: Alternatively, you can create a CSS template using the CssTemplate model in Superset. This allows you to manage and apply styles across the application consistently.

By using these methods, you can customize the size of the logo without modifying the core Superset files.

To continue talking to Dosu, mention @dosu.

[acolgecen]

@dosu I dont have InjectCustomCss because I have installed superset with pip install apache-superset and not with superset git repository. So how I do that with pip installed superset.

[dosubot]

In a pip-installed Superset environment, you can still apply custom CSS by using the CssTemplate model to manage and apply styles. Here's how you can do it:

1. Create a CSS Template: You can define a CSS template in Python and load it into the Superset database. This allows you to apply custom styles across the application.

2. Example CSS Template: You can create a Python script to add your custom CSS to the database. Here's a basic example:

from superset import db
from superset.models.core import CssTemplate

# Define your custom CSS
custom_css = """
.navbar-brand img {
    width: 200px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
}
"""

# Create a new CSS template
css_template = CssTemplate(
    template_name='Custom Logo Size',
    css=custom_css
)

# Add the template to the database
db.session.add(css_template)
db.session.commit()

3. Apply the CSS Template: Once the template is added to the database, you can apply it through the Superset UI by selecting it in the appropriate settings or dashboard configuration.

This approach allows you to manage your custom styles without needing direct access to the frontend codebase.

To continue talking to Dosu, mention @dosu.