Themes and Styles

To make it easy for you to incorporate FatSecret Platform JavaScript applications within your web pages, we've provided a handful of themes you can use to match to your site. If you can't find a theme that is suitable for you site, a CSS Reference of all the cascading style sheets (CSS) used by the API is available, including instructions for overriding themes.
Figure 1: Some of the different themes available
The default theme is blue. You can find the full list of available themes in the theme URL parameter reference:
<script src="http://platform.fatsecret.com/js?key=XXXXX"></script>
As above, when no theme URL query parameter is specified, the blue theme is used:
Figure 2: FatSecret Platform application in the blue theme
There is also a blank theme, which provides a useful starting point when providing your own CSS style for an application:
<script src="http://platform.fatsecret.com/js?key=XXXXX&theme=blank"></script>
Figure 3: FatSecret Platform application with a "blank" theme

Creating your own custom theme

If you do not find a theme that suits your web page or find that you need to tweak an existing theme just a little bit, you can extend or create your own custom theme. Simply create a new CSS file and import it into your web page. Refer to CSS Reference for a complete list of all the CSS classes for each section. All elements are prefixed with fatsecret_ to minimize conflicts.
E.G.: creating our own custom theme
Create custom.css and add some styling (this is largely taken from the blue_small theme)
custom.css
/* the container */
#fatsecret_container {
border:10px solid #3160A6;
}

/* heading in the canvas */
#fatsecret_container .fatsecret_heading {
color:#3472AB;
}

/* all buttons in the canvas */
#fatsecret_container .fatsecret_button {
border:1px solid #4592C0;
background-color:#D8ECF7;
}

/* item separators */
#fatsecret_container .fatsecret_borderbottom {
border-bottom:1px solid #D8ECF7;
}

/* footer */
.fatsecret_footer {
text-align:center;
padding:5px 0;
}
Create custom.html and use predefined templates with no navigation. Import the custom.css stylesheet.
custom.html
<link rel="stylesheet" type="text/css" href="custom.css"></link>
<script src="http://platform.fatsecret.com/js?key=XXXXX&auto_nav=false"></script>
Figure 4: Our own custom theme
The changes outlined above are all that is necessary to create the new blue_small theme. These styles that have been created apply application-wide, affecting the container as a whole. We can also target specific sections in a canvas using CSS.
E.G.: Changing the CSS of the calendar section in the calendar.get_month canvas
Additional CSS is added for the calendar in custom.css as follows:
custom.css
/* calendar */
#fatsecret_container .fatsecret_calendar_table, #fatsecret_container .fatsecret_calendar_table tr td {
border:1px solid #3160A6;
}

/* days row (Sun, Mon, Tues, etc) */
#fatsecret_container .fatsecret_days_row td {
background-color:#3160A6;
color:#FFF;
}

/* the day of the month (1-31) */
#fatsecret_container .fatsecret_day_number {
color:#3160A6;
}
Figure 5: Our own custom theme for the calendar.get_month canvas
See the Sample Code for setting up a custom theme.
FatSecret Sites
For Developers

For Professionals

For Everyone

FatSecret Platform API

Support
API

About FatSecret

© 2017 FatSecret. All rights reserved.