Tutorial: Basic theme set-up using the Styles Dash
Before we export your website, let’s give it a title and subtitle and make a few stylistic changes.
Go to the Export Window and click the Dash: Styles tab to bring the Styles Dash into view:
What you see is the Styles Dash. It determines 90% of the look of your website. What is missing are the only the background settings. These are controlled by the $blogBkgOpt key attribute (run the stamp to invoke it). Background settings are governed by prototypal and structural inheritance, so you can lend the smart structural relations of Tinderbox to your website thematization.
- Background: Each note has
$blogBkgImage,$blogBkgTexture, and a$blogBkgColor. So every webpage can have its background set to an image, texture, or color (image overrides texture overrides color, in case you set multiple). - Card: Your body text can export either on a single frosty rectangle or it can float over the background in a fully opaque card. This is especially nice for truncated teaser posts on the home and categories pages.
Now let’s make some changes. To open the dashBannerWidget (the large block that says [Title] and [Subtitle], select it and hit ⌘5 to half-open the Text Pane:
Set font, color, and shadow settings for the title and subtitle
Set $DisplayExpression to the title of your blog and set $Subtitle to the subtitle of your blog. You can also make other changes. Which ones? Each key attribute determines some stylistic feature of your website. The attribute name will tell you. If not, the green text in the main text field will guide you.
Apply the default banner texture from your Theme Folder (MetalTheme)
You have changed the banner color to a nice medium gray. But you are feeling industrious today and would prefer a cross-hatched metal sheet texture. Just set $blogBkgOpt to BKG-TEXTURE. When you set $blogBkgOpt of the banner to BKG-TEXTURE or BKG-IMAGE, it will be overridden by the texture (BannerTexture.png) or image (BannerImage.png) in your current Theme Folder (MetalTheme). Remove this option, and your banner will display the solid color you see here in the Styles Dash.
(Not only the banner, but notes also support the $blogBkgOpt options—so your webpages can likewise be filled with a texture or image. Webpages also support the BKG-COLOR option. And if the image or texture has an alpha channel, you can combine all three! Read more about image and texture control here: Tutorial: Basic theme set-up using the Styles Dash).
Turn heading background-colors on
Hit ⌘6 to maximize the View Pane. You can see that headings 2–4 are set to light green, yellow, and orange. These will provide the background-colors for your headings that fade out from left-to-right. Sadly, the Colors: ON/OFF button is set to OFF. Let’s turn it on to activate the backgrounds. Select the button, hit ⌘5, and check the checkbox.
Make the navbar static instead of sticky
Hit ⌘6 to clear the Text Pane. You will have noticed that the navbar is FIXED, meaning that it will sit on top of the user’s browser window and never scroll up, up, and away. To make the navbar STATIC (away-scrolling), select the dashNavbar widget and uncheck the $Sticky key attribute.
$Sticky is unchecked, your navbar will scroll on down the road as the page raises.For a better view, hit ⌘6 to remove the Text Pane:
