-
Notifications
You must be signed in to change notification settings - Fork 1
Styling
I've provided some default styling in main.css in the css/ folder. This could be seen as an example, or a basis for your own styles.
-
<body>has its line height expanded and color set to the{color:Body Text}variable from the HTML file - All inline media types align vertically central with text
- Wrap
<blockquote>content in curly quotes. - Disallow horizontal textarea resizing
To allow custom CSS through the Advanced section of the customization screen, a {CustomCSS} block variable needs to be present. I've included this in a separate <style> tag in the HTML so as not to interfere with the build process.
You may wish to provide your CSS as an external file using Tumblr's static file upload, which is fine, but you should know that variables contained in external stylesheets cannot be read by the theming engine. To get around this, you can provide the customizable CSS in a <style> tag, then include the rest in another file, but I usually go for the 'all or nothing' approach.
Sass is great. However, Sass doesn't like the use of the Tumblr variables as property values, as it treats them like nested properties. The only workaround I have found for this so far is to wrap the variable in quotes, then use the built-in unquote() function to output the literal string:
body {
color: unquote('{color:Body Text}');
}
Yes, it's dumb, but it works!