Custom App Styles

[sdc50]

Several people have asked me about customizing the default app styles, so I'm finally posting how to do that.

When you first create an app it will look something like this:

With a little CSS you can get a little more room for you content:

Here's how:

#app-header .tethys-app-header {
    height: 60px;
}

#app-header .tethys-app-header .toggle-nav {
    margin-top: 10px;
}

#app-header .tethys-app-header .icon-wrapper img {
    height: 50px;
}

#app-header .tethys-app-header .icon-wrapper {
    margin-left: 15px;
    padding: 5px 10px;
}

#app-header .tethys-app-header .app-title-wrapper .app-title {
    padding: 0;
    padding-left: 65px;
}

#app-header .tethys-app-header .exit-button {
    margin-top: 10px;
}

#app-header .tethys-app-header .exit-button a {
    padding: 5px 10px;
}

#app-content-wrapper #app-content #app-actions{
    height: 50px;
    padding-top: 5px;
}

#app-content-wrapper #app-content #app-navigation {
    padding-top: 60px;
}

#app-content-wrapper #app-content #app-navigation .nav {
    padding: 0;
}

Now, many apps are map centric. By default when you drop a map on the home page of your app it will look like this:

If you want the map to fill all the available space:

Add the following CSS:

#app-content-wrapper #app-content{
    height: 100%;
    padding-top: 60px;
    padding-bottom: 50px;
}

#inner-app-content{
    padding: 0;
}

And make sure that your map height and width are set to 100%:

map_view_options = MapView(height='100%',
                           width='100%',

Hopefully this is helpful. Maybe it would be worth changing the default CSS to have the slimmer look.

[Michael S]

Nice. I would add that if you want to get rid of the left ribbon completely, you can add the following two lines to the main.js and it will take care of it.

	$(".toggle-nav").removeClass('toggle-nav');
	$("#app-content-wrapper").removeClass('show-nav')