Design for CSS settings page #49

New issue

Open

opened 2018-05-16 12:16:00 +00:00 by tammoterhark · 2 comments

tammoterhark commented

2018-05-16 12:16:00 +00:00

(Migrated from github.com)

This page reads from the default theme (which is not editable by itself) and shows on top the variables that are defined in the root.

Order to be defined.

This page reads from the default theme (which is not editable by itself) and shows on top the variables that are defined in the root. Order to be defined. ![css_settings](https://user-images.githubusercontent.com/6483317/40116335-a67b406a-5913-11e8-8033-35c4bfc95745.png)

tammoterhark commented

2018-11-26 11:12:06 +00:00

(Migrated from github.com)

From hypha-improvements:

New user interface for custom CSS, offers three modes:

Use default styling (no customizations possible)
Extend default styling
In the page, three parts of CSS are included: defaults, variable overrides and customizations
Default CSS defines CSS variables, some of which are marked as "editable" (or "basic") others are unmarked (or marked as "advanced").
PHP scans the CSS for these basic variables and offers an interface to change them (e.g. color picker or font picker)
This interface stores its data in a css file (say variables.css) in the data folder
Intention is to limit this to four color variables and two font variables, to prevent too much complexity
Advanced customizations can be done through a textarea that edits a third css file (e.g. customizations.css). This can override the advanced variables from the default CSS, define and use new variables and add or override CSS rules themselves.
You can also upload of background image (should this just be a CSS variable that is included in the above?)
You can also upload a favicon (which is pretty much unrelated to the CSS)
https://github.com/PlanBCode/hypha/issues/49
Replace the default styling
In this mode you get just a single textarea that defines the entire CSS to be included in the page, which is stored in a separate file (e.g. custom-theme.css or something)
This file should be different from the customizations when using the extend-mode.
When you first select this option, the textarea is filled with the default.css. There should be an option to revert back to default.css later.

From hypha-improvements: New user interface for custom CSS, offers three modes: * Use default styling (no customizations possible) * Extend default styling In the page, three parts of CSS are included: defaults, variable overrides and customizations Default CSS defines CSS variables, some of which are marked as "editable" (or "basic") others are unmarked (or marked as "advanced"). PHP scans the CSS for these basic variables and offers an interface to change them (e.g. color picker or font picker) This interface stores its data in a css file (say variables.css) in the data folder Intention is to limit this to four color variables and two font variables, to prevent too much complexity Advanced customizations can be done through a textarea that edits a third css file (e.g. customizations.css). This can override the advanced variables from the default CSS, define and use new variables and add or override CSS rules themselves. You can also upload of background image (should this just be a CSS variable that is included in the above?) You can also upload a favicon (which is pretty much unrelated to the CSS) https://github.com/PlanBCode/hypha/issues/49 Replace the default styling In this mode you get just a single textarea that defines the entire CSS to be included in the page, which is stored in a separate file (e.g. custom-theme.css or something) This file should be different from the customizations when using the extend-mode. When you first select this option, the textarea is filled with the default.css. There should be an option to revert back to default.css later.

tammoterhark commented

2018-11-26 11:15:54 +00:00

(Migrated from github.com)

Important extra option:
possibility to (temporarily) revert to standard styling.
For checking/debugging purposes.

Important extra option: possibility to (temporarily) revert to standard styling. For checking/debugging purposes.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

harmen/hypha#49

No description provided.

Rows
Columns