Colors in Cyanine Theme

[josephzitt]

(My apologies if this isn't the right place to ask. I'm relatively new to Github, which seems to be more for developer questions than user questions, but I don't know of a more appropriate forum.)

I'm trying to figure out the color scheme in the default Cyanine theme. Changing the values under Colors in Setup is having unexpected results. I don't quite follow the descriptions. I would like to do a sort of Dark Mode design, with pale grey text on a dark grey background, which I find easiest to read. As an example, http://darkforcesswing.blogspot.com/ has a relatively good example of such a color scheme. I understand how the notation for colors work, but I don't quite understand which values to set.

What would I set for these?

I'm primarily a tech writer rather than a coder, so I would be happy to help with rewording the descriptions once I understand how it works.

[trendschau]

The color-customization in cyanine is not perfect yet. The problem with the flexibilization is, that you either have dozens of colors for each element-type, which is flexible but harder to understand/maintain, or you have only a handful of colors, but then each color applies to several element-types.

For a dark theme, you will have to overwrite some stuff in the css input box. Unintentionally I hardcoded the basic font-color to dark-gray, so that has to be changed at least.

A very rough dark theme without details (did not check everything) might look like this:

primary brand color: #333 secondary brand color: #333 primary font color: #ddd (this does not work, will fix in next release) secondary font color: #ddd text-links: #fff thin border color: lightgray

then in Custom CSS:

.dark-gray{
  color: #ddd!important; /* to fix text-color, will be improved in next release */
}
pre, code{
   color: #333;
}
.notice1, .notice2, .notice3{
   color: #333;
   border-color: darkgray;
   background: #ddd;
}
table{
  background: #333;
}

[josephzitt]

Thanks! I'll try this in a few hours.

Also: Does Cyanine not support images? I've tried to add one, both as a hero image and through Markdown as notated in the Markdown Test page, but haven't gotten it to appear.

[josephzitt]

This worked for a lot of it -- but the body text remained dark-grey, and is now invisible against the background.

I notice both of the strings "dark-grey" and "darkgrey" in the custom CSS. Is this as it should be?

[trendschau]

Hm, it works correct on my local instance. Can you make sure that there is only the css-code posted above in the custom-css-field and that the values are stored? The Field only accepts css-rules, it does not work with html or JS.

.dark-gray{
  color: #ddd!important;
}
pre, code{
   color: #333;
}
.notice1, .notice2, .notice3{
   color: #333;
   border-color: darkgray;
   background: #ddd;
}
table{
  background: #333;
}

Yes, images work. But Cyanine has not implemented hero-images yet (only for the news on the front-page). If images do not work with the markdown field, please try with the visual editor and then switch back to the raw mode. The rules for the image path are a bit special right now and I will improve it in next release #202

[josephzitt]

I've double-checked that the values are saved for the theme. (At least when I go back into the theme settings, they, and the css code, are still there.

This is what I see:

Here's the code of that page:

The first set of posts to **_as if in dreams_** has appeared as a physical book and ebook.

![Cover of "as if in dreams: Notes following Aliyah"](media/live/aiid-front-683x1024.jpeg){.right}

_Moving to Israel, an American Jew finds both an alternate reality and an eternal home. In what becomes a daily practice of brief notes posted online, he creates a mosaic text, observing everyday life and how it blends the sacred and the mundane. Vivid, precise, and often hilarious, these entrancing vignettes embody how what might seem like nothing special appear to a poet’s eye._

__“… [Joseph Zitt] has found a literary form that exists precisely at the intersection of prose and free-form poetry, and has delivered this form with grace, panache and precision.”__ — [Amazing Stories](https://amazingstories.com/2019/08/review-as-if-in-dreams-notes-following-aliyah/)

[Read an excerpt in the Kindle Edition.](https://www.amazon.com/gp/product/B07T6289DR/ref=dbs_a_def_rwt_bibl_vppi_i2#reader_B07T6289DR)

-   [Get it and support your local bookstore via Bookshop.org](https://bookshop.org/books/as-if-in-dreams-notes-following-aliyah/9789659274208)
-   [Book Depository](https://www.bookdepository.com/as-if-in-dreams-Joseph-Zitt/9789659274208)
-   [Barnes & Noble](https://www.barnesandnoble.com/w/as-if-in-dreams-joseph-s-zitt/1132101170?ean=9789659274208)
-   [Books-A-Million](https://www.booksamillion.com/p/if-dreams/Joseph-Zitt/9789659274208?id=7645956537214)
-   [Amazon](https://www.amazon.com/gp/product/9659274203/ref=ox_sc_mini_detail?ie=UTF8&psc=1&smid=A3TJVJMBQL014A)

[trendschau]

I checked our folder and it looks like your folders do not exist or the folders are not writable/readable.

Please check that the folders:

• \cache
• \settings
• \content
• \media

have the correct permissions (e.g. 744 or 774) like described here: https://typemill.net/getting-started/installation

You can check it calling your sitemap like this: your-domain/cache/sitemap.xml. Right now it returns a standard page of the server instead of the xml-file.

[josephzitt]

The folders do look to me to be in the right place with the right permissions. Is there something I'm not understanding about where they should be?

[trendschau]

Sorry, I had to check it again, I think you should use 755 for the cache folder and then 644 for the files in it. Then it should work. Right now there is a 403 forbidden when I try to access e.g. the sitemap.xml in the cache folder.

[josephzitt]

OK! I set the values as you've suggested, and it looks like it's working. Thanks.

[josephzitt]

OK, I have the colors as I want them with some further tweaking.

But now the contents have gotten messed up. Under content/02-book-3-in-the-days-of-the-virus, there are folders for each month. When I try to navigate through them or look at them in the sitemap, March appears twice, once in the proper place and once after August. Only the second instance has content. The rest of the months don't appear to have content either, although the content is there. This may be a reslut of having changed things from pages to posts and back, but I'm confused as to how to fix it.

EDIT: Looking at it further, it looks like I have gotten thing messed up by doing and undoing thing and changing things around. I'm going to remove the whole Book 3 section and recreate it this evening, doing it the right way (I hope) this time.

On another issue (should I open another thread for this?): I see that there is code in cyanine/page.twig to handle widgets, right where I would expect to find it. As I'd mentioned, I would like to drop in a block of markdown with a static blurb and links. It appears that I could do that by creating a "widgets" array somewhere with a call to a Markdown to HTML convertor and the content. It looks like several of these exist. Does Typemill include or support any of them? And where would I create the arry? It wold seem that it would be cleanest to put it in another file so as not to mess with page.twig itself, but (being new to much of this), I'm not clear where, Is this possible?

[josephzitt]

Hmm. An edit from yesterday on my previous comment appears to have disappeared.

I deleted everything from the scrambled Book 3 section and uploaded it again. That appears to have cleared up the out-of-order posts.

I have also changed the colors to correspond to what Gmail's dark mode uses. Everything looks pretty good, except for the text on the expand-or-contract button (currently black on dark grey, so unreadable; I'm not sure what controls that) and that the body text, which looks good on my PC and my Android phone, is dim and blurry on my Mac.

[trendschau]

good to hear! Generally you can inspect the elements with the developer tool of your browser and then find out which css rule you need to change the design. For the button you can use this for example:

.contentnav button {
    color: #fff;
}

Regarding the widget: That feature is not very sophisticated yet and you have to code a little plugin to use it. I suppose that is out of the scope. However, you can find the minimal documentation here: https://typemill.net/theme-developers/theme-functions/render-widgets and you can check the search plugin that uses it: https://plugins.typemill.net/search

The part that uses the widget is this one:

    public function onPageReady($page)
    {
        $pageData = $page->getData($page);

        $pageData['widgets']['search'] = '<div class="searchContainer" id="searchForm">'.
                                                '<input id="searchField" type="text" placeholder="search ..." />'.
                                                '<button id="searchButton" type="button">GO</button>'.
                                        '</div>';
        $page->setData($pageData);
    }

... but you have to adopt the html to your need and embed it into a whole working plugin. Instead of html you can also create a markdown field for your plugin, use that content, transform it into html and then inject it in the way above. This way you can edit your widget-content in the plugin-settings easily.

An alternative way is to add a new field to the theme and use it directly with the twig-markdown function (e.g. markdown(myfieldcontent) ), but that solution is not ideal because then you cannot update your theme without loosing that function or copy it manually again and again.

Finally you have to style your widget-content (if it does not look good out of the box). You can either inject a CSS file with the plugin or you can use the custom-css-field of the cyanine-theme again.

So it is a bit of work, easy for a developer but it requires developer skills. Typemill is not a page-builder and of course not so sofisticated like WordPress or other big CMS. I think it is very flexible already but the possibilities are limited for non-devs.

[josephzitt]

OK, flexing my minimal dev skills after reading the documentation...

I've created a plugin named "blurbbox" by making a copy of "search" and stripping it down to what's needed: Just the .yaml and .php files in a plugin directory of that name.

biurbbox.php is

<?php

namespace Plugins\blurbbox;

use \Typemill\Plugin;
use \Typemill\Models\Write;

class blurbbox extends plugin
{
    protected $item;

    public static function getSubscribedEvents()
    {
        return array(
            'onPageReady'           => 'onPageReady',
        );
    }

    public function onPageReady($page)
    {
        $pageData = $page->getData($page);

        $pageData['widgets']['blurbbox'] = '<div><p>Notes on (mostly) daily perceptions and experiences by Joseph Zitt, an American immigrant to Israel.</p>' .
                                            '<p><a href="http://www.josephzitt.com/home/books/as-if-in-dreams-notes-following-aliyah/">Buy the book.</a></p>' .
                                            '<p><a href="https://buttondown.email/josephzitt">Subscribe to the weekly newsletter.</a></p></div>'; 

        $page->setData($pageData);
    }
}

blurbbox.yaml is

name: blurbbox
version: 1.0.0
description: Add a blurb to site pages. Adapted from Search by Trendschau.
author: Joseph Zitt
homepage: https://www.josephzitt.com
licence: MIT
paypal: https://paypal.me/josephzitt
amount: 10

For a while, until I fixed some of the HTML embedded in the .php file, it prevented pages from loading at all (so at least I know that it was being noticed). Now that I've fixed that, nothing happens at all. It also doesn't show up in the Settings plugins page so that I could activate it.

I suspect that I've missed something simple. Do you spot anything?

[trendschau]

Hi Joseph,

congratulations, it looks good! I copied your code and it works fine on my local version. Can you check if your folders and files are named correctly?

\blurbbox
  blurbbox.php
  blurbbox.yaml

You can also skip out some stuff from your code, but that is not the reason for the error:

<?php

namespace Plugins\blurbbox;

use \Typemill\Plugin;

class blurbbox extends plugin
{   
    public static function getSubscribedEvents()
    {
        return array(
            'onPageReady'           => 'onPageReady',
        );
    }

    public function onPageReady($page)
    {
        $pageData = $page->getData($page);

        $pageData['widgets']['blurbbox'] = '<div><p>Notes on (mostly) daily perceptions and experiences by Joseph Zitt, an American immigrant to Israel.</p>' .
                                            '<p><a href="http://www.josephzitt.com/home/books/as-if-in-dreams-notes-following-aliyah/">Buy the book.</a></p>' .
                                            '<p><a href="https://buttondown.email/josephzitt">Subscribe to the weekly newsletter.</a></p></div>'; 

        $page->setData($pageData);
    }
}

If you still get an error, can you switch on the error reporting by adding this line:

displayErrorDetails: true 

into the settings file \settings\settings.yaml and then post the error?

If it works, you can style the box with the id #blurbbox, so something like

#blurbbox p{ font-size: 1.2em} 

I will be off until Tuesday and then check again.

[josephzitt]

It works! The problem was that I had somehow nested a second blurbbox folder within the first one, with the files inside of that. (I probably fumbled something with FileZilla.) I have moved them up into the correct folder, and it's working. I'll have to fiddle with colors, but that's relatively easy.

Thanks for your help and encouragement.

[trendschau]

that is great and congratulations! I will be unavailable for some days but if you want you can enhance your plugin a bit and make the content editable with markdown. It is described in the tutorial here: https://typemill.net/plugin-developers/tutorial/make-variables-editable

Not important of course, but might be more convenient if you want to change the text in future :)

[trendschau]

Version 1.4.0 of typemill is published and also a version 1.1.0 of the cyanine theme. Color-Logic has been refactored completely, so you will have to update your individual color scheme. It should be possible to create that individual theme design without any additional custom css.