5.4. Customize myxblock.css#
This section describes how to modify the static CSS file of the XBlock you
created, myxblock.css
, to provide the functionality in the Thumbs XBlock
example in the XBlock SDK.
In myxblock.css
, you define the styles that are added to the
fragment that is returned by the view method to be displayed by the runtime
application.
5.4.1. The Default XBlock CSS File#
When you create a new XBlock, the default
static CSS file is created automatically, with skeletal functionality defined.
In the xblock_development/myxblock/myxblock/static/css
directory, see the
file myxblock.css
.
/* CSS for MyXBlock */
.myxblock_block .count {
font-weight: bold;
}
.myxblock_block p {
cursor: pointer;
}
The file contains CSS code to format the count
field that was added by
default to the XBlock. Delete this code.
5.4.2. Add CSS Code#
You must add CSS code to format the XBlock content. Follow the guidelines below.
Create a single class that defines formatting for
.upvote
and.downvote
.The cursor type is pointer.
The border is 1px, solid, and with the color #888.
The padding is
0.5em
;The color for
.upvote
is green and fordownvote
is red.
5.4.3. Check CSS Against the Thumbs XBlock#
After you have defined the CSS code, check your work against the CSS in the
Thumbs XBlock, in the file xblock_development/xblock-sdk/sample_xblocks/thumbs/static/css/thumbs.css
.
.upvote, .downvote {
cursor: pointer;
border: 1px solid #888;
padding: 0 .5em;
}
.upvote { color: green; }
.downvote { color: red; }
If necessary, make corrections to the CSS code in your XBlock so that it matches the code in the Thumbs XBlock.
The styles in thumbs.css
are referenced in the XBlock HTML file.