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.
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.
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.
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.
Congrats!#
You’ve completed customizing MyXBlock to have up and down voting functionality. Read on for more about XBlocks - and have fun making your next XBlock!