SuperMemo stylesheet: Difference between revisions

From SuperMemo Help
Jump to navigation Jump to search
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Introductions ==
Stylesheets make it easy to format text in many elements in SuperMemo. You can edit individual stylesheets with '''Text : Style : Edit style''' on the [[component menu]], or you can edit the default stylesheet that is used by default in new elements with '''[[Toolkit menu|Toolkit]] : [[Options]] : [[Fonts tab in Options|Fonts]] : Stylesheet'''.
== SuperMemo Stylesheet editor ==
== SuperMemo Stylesheet editor ==


Use the '''SuperMemo Stylesheet''' editor (available via '''[[Tools]] : [[Options]] : [[Fonts tab in Options | Fonts]] : Stylesheet''') to customize the default stylesheet for those HTML components, which do not use any stylesheet from the stylesheet registry.
Use the '''SuperMemo Stylesheet''' editor (see the picture) to customize the default stylesheet for those [[HTML component|HTML components]], which do not use any stylesheet from the stylesheet [[Glossary:Registry|registry]].


[[File:Supermemo stylesheet editor.jpg|center|SuperMemo Stylesheet editor that helps you customize the CSS rules defined in the default SuperMemo stylesheet]]
[[File:Supermemo stylesheet editor.jpg|center|SuperMemo Stylesheet editor that helps you customize the CSS rules defined in the default SuperMemo stylesheet]]
Line 9: Line 13:
The following is a detailed breakdown of the '''SuperMemo Stylesheet''' editor:
The following is a detailed breakdown of the '''SuperMemo Stylesheet''' editor:


* '''CSS rule combo box''' - contains the list of CSS rules available in the default SuperMemo stylsheet. Allows you to select the CSS rule you want to customize/preview
* '''CSS rule combo box''' - contains the list of CSS rules available in the default SuperMemo stylsheet. Allows you to select the CSS rule you want to customize/preview. For example, if you change the font in the ''Text'' rule, that font will change in texts that use the edited stylesheet and do not specify an overriding font
 
 
* '''Font''' - opens the standard Windows '''Font''' dialog box which assists you in changing the font, as well as its style, size and other properties for the currently selected CSS rule
* '''Font''' - opens the standard Windows '''Font''' dialog box which assists you in changing the font, as well as its style, size and other properties for the currently selected CSS rule
* '''Color''' - opens the standard Windows '''Color''' dialog box which helps you choose the text color for the currently selected CSS rule
* '''Color''' - opens the standard Windows '''Color''' dialog box which helps you choose the text color for the currently selected CSS rule
* '''Background''' - opens the standard Windows '''Color''' dialog box which assists you in selecting the background color for the currently selected CSS rule
* '''Background''' - opens the standard Windows '''Color''' dialog box which assists you in selecting the background color for the currently selected CSS rule
* '''Delete''' - removes the contents of the currently selected CSS rule from the default stylesheet
* '''Delete''' - removes the contents of the currently selected CSS rule from the default stylesheet
* '''Sample box''' - lets you preview the effects of the changes that you make to the currently selected CSS rule
* '''Sample box''' - lets you preview the effects of the changes that you make to the currently selected CSS rule
* '''Stylesheet description''' - displays the name of the edited stylesheet and its location. In the presented example, the default stylesheet is edited and the file path points to the ''supermemo.css'' file in the ''[BIN]'' subfolder
* '''OK''' - closes the '''SuperMemo Stylesheet''' editor
* '''Close''' - closes the '''SuperMemo Stylesheet''' editor
* '''Edit''' - if you know CSS, you could use this button to open the default SuperMemo stylesheet in the default editor (e.g. Notepad), and manually edit individual CSS rules beyond the basic properties provided in the editor (e.g. you could increase the spacing between lines of text of a given CSS rule by adding the ''line-height'' CSS property)
* '''View''' - open the default SuperMemo stylesheet in the program set on your computer to open ''.css'' files


== Video example ==


* '''Default stylesheet path''' - displays the path to the default stylesheet (i.e. the ''supermemo.css'' file in the ''[BIN]'' subfolder) used by SuperMemo
This is how you can change fonts with the use of stylesheets:
 


* '''OK''' - closes the SuperMemo Stylesheet editor
{{#ev:youtube|A7hhUh9h0fQ}}
* '''Close''' - closes the SuperMemo Stylesheet editor
* '''Edit''' - if you know CSS, you could use this button to open the default SuperMemo stylesheet in Notepad, and manually edit individual CSS rules beyond the basic properties provided in the editor (e.g. you could increase the spacing between lines of text of a given CSS rule by adding the ''line-height'' CSS property)
* '''View''' - open the default SuperMemo stylesheet in the program set on your computer to open ''.css'' files

Revision as of 17:52, 9 August 2019

Introductions

Stylesheets make it easy to format text in many elements in SuperMemo. You can edit individual stylesheets with Text : Style : Edit style on the component menu, or you can edit the default stylesheet that is used by default in new elements with Toolkit : Options : Fonts : Stylesheet.

SuperMemo Stylesheet editor

Use the SuperMemo Stylesheet editor (see the picture) to customize the default stylesheet for those HTML components, which do not use any stylesheet from the stylesheet registry.

SuperMemo Stylesheet editor that helps you customize the CSS rules defined in the default SuperMemo stylesheet

SuperMemo Stylesheet options

The following is a detailed breakdown of the SuperMemo Stylesheet editor:

  • CSS rule combo box - contains the list of CSS rules available in the default SuperMemo stylsheet. Allows you to select the CSS rule you want to customize/preview. For example, if you change the font in the Text rule, that font will change in texts that use the edited stylesheet and do not specify an overriding font
  • Font - opens the standard Windows Font dialog box which assists you in changing the font, as well as its style, size and other properties for the currently selected CSS rule
  • Color - opens the standard Windows Color dialog box which helps you choose the text color for the currently selected CSS rule
  • Background - opens the standard Windows Color dialog box which assists you in selecting the background color for the currently selected CSS rule
  • Delete - removes the contents of the currently selected CSS rule from the default stylesheet
  • Sample box - lets you preview the effects of the changes that you make to the currently selected CSS rule
  • Stylesheet description - displays the name of the edited stylesheet and its location. In the presented example, the default stylesheet is edited and the file path points to the supermemo.css file in the [BIN] subfolder
  • OK - closes the SuperMemo Stylesheet editor
  • Close - closes the SuperMemo Stylesheet editor
  • Edit - if you know CSS, you could use this button to open the default SuperMemo stylesheet in the default editor (e.g. Notepad), and manually edit individual CSS rules beyond the basic properties provided in the editor (e.g. you could increase the spacing between lines of text of a given CSS rule by adding the line-height CSS property)
  • View - open the default SuperMemo stylesheet in the program set on your computer to open .css files

Video example

This is how you can change fonts with the use of stylesheets:

Retrieved from "http://help.supermemo.org/index.php?title=SuperMemo_stylesheet&oldid=10841"