There are several CSS classes used to style the workout HTML pages. The base class definitions are below, you may over-ride any of them to create the look you want. This technique works best when embedding an HTML page within another page. That is, you need to have a place to put your CSS class over-rides, SugarWOD doesn't host them for you.
Some tips:
- If your changes aren't visible, try adding
!important
- To hide an element, use
display:none
. For example, to hide the "track" name:
.sugarwod_track { display:none; }
The classes used are:
- sugarwod_container - div that wraps everything else
- sugarwod_day_container - div that wraps each day
- sugarwod_track_container - div that wraps each track (within a day)
- sugarwod_workout_container - div that wraps each workout (within a track)
- sugarwod_date - the date of the workout
- sugarwod_track - the track name (e.g. "Workout of the Day")
- sugarwod_title - the title of the workout
- sugarwod_description - the workout description
- sugarwod_score_type - the scoring type (e.g. "REPS")
The base class definitions:
<style>
.sugarwod_container {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 18px;
}
.sugarwod_day_container {
margin: 1em 0 1em 0;
padding: 0;
}
.sugarwod_track_container {
margin: 0;
padding: 0;
}
.sugarwod_workout_container {
margin: 0 0 0.5em 0;
padding: 0.25em;
background-color: #F5F5F5;
border-radius: 3px;
}
.sugarwod_date {
margin: 1em 0;
color: #424242;
font-family: monospace;
text-transform: uppercase;
}
.sugarwod_track {
color: #757575;
font-size: 14px;
text-transform: uppercase;
}
.sugarwod_title {
color: #2196F3;
font-size: 18px;
}
.sugarwod_result_type {
margin-left: 0.25em;
color: #757575;
font-size: 14px;
text-transform: uppercase;
}
.sugarwod_description {
color: #757575;
font-size: 14px;
font-family: monospace;
}
</style>
Comments
0 comments
Article is closed for comments.