Difference between revisions of "Customizable CSS for E-Shuushuu"

From Shuushuu
Jump to: navigation, search
(Description)
m
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[File:Lato-cropped.png|600px]]
+
[[File:Lato-cropped.png|600px|center]]
  
 
=Description=
 
=Description=
 
* With this Custom stylesheet, user will be able to customize the image board, forum and wiki appearance, even with custom background and fonts, ect
 
* With this Custom stylesheet, user will be able to customize the image board, forum and wiki appearance, even with custom background and fonts, ect
* The default setting for the main them will generate the appearance as the Dark version, except the Dark version is [https://developers.google.com/speed/docs/insights/MinifyResources Minified] plus Oxygen font embedded inside the CSS.
+
* The default setting for the main stylesheet generates same appearance as the Dark version, except the Dark version is [https://developers.google.com/speed/docs/insights/MinifyResources Minified] plus Oxygen font embedded inside the CSS.
  
 
=Release Note=
 
=Release Note=
Line 12: Line 12:
  
 
=Installation / Update=
 
=Installation / Update=
*1. Install the Stylish browser addon, which is supported by Firefox, Opera and Chrome.   
+
*1. Install the Stylus browser addon, which is supported by [https://addons.mozilla.org/en-US/firefox/addon/styl-us/ Firefox], [https://addons.opera.com/en/extensions/details/stylus/ Opera] and [https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne Chrome].   
*2. Install/update the scripts by click the green button on [https://userstyles.org/styles/119305/e-shuushuu-customizable-theme E-shuushuu Customizable Theme] or [https://userstyles.org/styles/129995/e-shuushuu-dark E-shuushuu Dark]
+
*2. Install/update the scripts by clicking the green button on [https://userstyles.org/styles/119305/e-shuushuu-customizable-theme E-shuushuu Customizable Theme] or [https://userstyles.org/styles/129995/e-shuushuu-dark E-shuushuu Dark]
 +
*3. Microsoft Edge user can install the JavaScript version, but Tampermonkey Addon installation is required.
 +
*4. Optional Javascript font loader if you use the Adobe Typekit font, [https://greasyfork.org/en/scripts/24371-adobe-typekit-fonts-for-shuu get it here]
 +
 
 +
=Usage=
 +
These option are for the Main theme:
 +
*1. '''Background'''
 +
**Replace the background with solid color.
 +
*2. '''Custom Background Image'''
 +
**use the preset wallpapers from the list, only one can be enabled, either use only solid background color or Custom background Image, else the solid color will override the custom background image. If both of the option are "none", it may works with the monthly themes.
 +
*3. '''Provide your own'''
 +
**use the image you desire so userstyle.org will add the image URL into the CSS.
 +
*4. '''Upload your own'''
 +
**Don't use this option, the website will attempt to encode the image into Base64 format and embedding into CSS, which will cause browser hang if the image file size is too large.
 +
*5. '''Theme Visual Effect'''
 +
**on/off switch of the Rain drop/pedals effect, and custom background images from monthly themes.
 +
*6. '''Quick Tagging menu color'''
 +
**Change the quick tagging dropdown menu color.
 +
*7. '''Hypertext Color'''
 +
**Change the hypertext color
 +
*8. '''Plaintext Color''' 
 +
**same as above
 +
*9. '''Color Scheme for Header/Title'''
 +
**same as above
 +
*10. '''Secondary Color Scheme'''
 +
**Affect majority of the site appearance, including wiki and forum
 +
*11. '''Border settings'''
 +
**Default or Borderless.
 +
*12. '''Border Style'''
 +
**This setting has no effect if the Border setting is "Borderless"
 +
*13. '''Optional, Remove background on Wiki/Forum'''
 +
**Improve text readability on Wiki/forum if custom background option is used
 +
*14. '''Optional, Shuu Banner,  App Banner, Wiki Banner, Forum Banner '''
 +
**Remove the banners, ect
 +
*15. '''Elements Shadow Intensity'''
 +
**Change the Shadow thickness and blur radius, ect 
 +
*16. '''Border Color''' 
 +
**Has no effect if the "Border Setting" is "Borderless"
 +
*17. '''Admin username Color, Tagger username Color, Mod username Color, Regular username Color, Dropdown Menu Color, Text/Elements Shadow color''' 
 +
**Change the default usergroup name to different color
 +
*18. '''Optional, Custom Font'''
 +
** Changing the default Font style to Web Fonts, currently only 3 fonts are added, [https://fonts.google.com/?query=lat&selection.family=Lato|Oxygen|Titillium+Web Lato, Oxygen and Titillium] added into stylesheet, each font has 2 version, CSS Embedded, and Web version, which the CSS retrieves the fonts settings from Google.
 +
*19. '''Optional, Transparency effect on text/form fields'''
 +
**Increase the readability partially if user wish to keep the custom background image.
 +
*20. '''**Optional, Images Transparency Filter'''
 +
** Decrease the image opacity, but restore when mouse hover over the images.
 +
*21. '''**Optional, Opacity Filter, May cause hallucination'''
 +
** Decrease the imageboard overall opacity.
  
 
=Support=
 
=Support=
Line 25: Line 72:
  
 
=Future=
 
=Future=
*
+
*Replace most of the raster icons with SVG?
*
+
*Tampermoneky addon so user can switch option on-the-fly (another century may be)
  
 
=Known issues=
 
=Known issues=
 
*When user installed the Custom Stylesheet without Stylish browser Addon, Javascript will be installed and have some issue like  text and elements color inconsistency,
 
*When user installed the Custom Stylesheet without Stylish browser Addon, Javascript will be installed and have some issue like  text and elements color inconsistency,
Because not every value are appended with '''!important'''.
+
Because not every value are appended with '''!important''' which will override the default CSS settings.
 +
 
 +
[[Category:Updates]]

Latest revision as of 00:31, 31 May 2020

Lato-cropped.png

Description

  • With this Custom stylesheet, user will be able to customize the image board, forum and wiki appearance, even with custom background and fonts, ect
  • The default setting for the main stylesheet generates same appearance as the Dark version, except the Dark version is Minified plus Oxygen font embedded inside the CSS.

Release Note

0.9 Oct 1, 2016

  • Latest

0.1 Sep 30, 2015

  • Initial release

Installation / Update

  • 1. Install the Stylus browser addon, which is supported by Firefox, Opera and Chrome.
  • 2. Install/update the scripts by clicking the green button on E-shuushuu Customizable Theme or E-shuushuu Dark
  • 3. Microsoft Edge user can install the JavaScript version, but Tampermonkey Addon installation is required.
  • 4. Optional Javascript font loader if you use the Adobe Typekit font, get it here

Usage

These option are for the Main theme:

  • 1. Background
    • Replace the background with solid color.
  • 2. Custom Background Image
    • use the preset wallpapers from the list, only one can be enabled, either use only solid background color or Custom background Image, else the solid color will override the custom background image. If both of the option are "none", it may works with the monthly themes.
  • 3. Provide your own
    • use the image you desire so userstyle.org will add the image URL into the CSS.
  • 4. Upload your own
    • Don't use this option, the website will attempt to encode the image into Base64 format and embedding into CSS, which will cause browser hang if the image file size is too large.
  • 5. Theme Visual Effect
    • on/off switch of the Rain drop/pedals effect, and custom background images from monthly themes.
  • 6. Quick Tagging menu color
    • Change the quick tagging dropdown menu color.
  • 7. Hypertext Color
    • Change the hypertext color
  • 8. Plaintext Color
    • same as above
  • 9. Color Scheme for Header/Title
    • same as above
  • 10. Secondary Color Scheme
    • Affect majority of the site appearance, including wiki and forum
  • 11. Border settings
    • Default or Borderless.
  • 12. Border Style
    • This setting has no effect if the Border setting is "Borderless"
  • 13. Optional, Remove background on Wiki/Forum
    • Improve text readability on Wiki/forum if custom background option is used
  • 14. Optional, Shuu Banner, App Banner, Wiki Banner, Forum Banner
    • Remove the banners, ect
  • 15. Elements Shadow Intensity
    • Change the Shadow thickness and blur radius, ect
  • 16. Border Color
    • Has no effect if the "Border Setting" is "Borderless"
  • 17. Admin username Color, Tagger username Color, Mod username Color, Regular username Color, Dropdown Menu Color, Text/Elements Shadow color
    • Change the default usergroup name to different color
  • 18. Optional, Custom Font
    • Changing the default Font style to Web Fonts, currently only 3 fonts are added, Lato, Oxygen and Titillium added into stylesheet, each font has 2 version, CSS Embedded, and Web version, which the CSS retrieves the fonts settings from Google.
  • 19. Optional, Transparency effect on text/form fields
    • Increase the readability partially if user wish to keep the custom background image.
  • 20. **Optional, Images Transparency Filter
    • Decrease the image opacity, but restore when mouse hover over the images.
  • 21. **Optional, Opacity Filter, May cause hallucination
    • Decrease the imageboard overall opacity.

Support

For support, PM yong or post on the forum.

To Do

  • 1. TODO
  • 2. TODO
  • 3. TODO TODO TODO TODO TODOOO.

Future

  • Replace most of the raster icons with SVG?
  • Tampermoneky addon so user can switch option on-the-fly (another century may be)

Known issues

  • When user installed the Custom Stylesheet without Stylish browser Addon, Javascript will be installed and have some issue like text and elements color inconsistency,

Because not every value are appended with !important which will override the default CSS settings.