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
#fatsecret_container {
border:10px solid #3160A6;
}
#fatsecret_container .fatsecret_heading {
color:#3472AB;
}
#fatsecret_container .fatsecret_button {
border:1px solid #4592C0;
background-color:#D8ECF7;
}
#fatsecret_container .fatsecret_borderbottom {
border-bottom:1px solid #D8ECF7;
}
.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
#fatsecret_container .fatsecret_calendar_table, #fatsecret_container .fatsecret_calendar_table tr td {
border:1px solid #3160A6;
}
#fatsecret_container .fatsecret_days_row td {
background-color:#3160A6;
color:#FFF;
}
#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.