History

sotys 5bbd6c5909 Add CustomCSS example (#87 ) * Update README.md * Add example screenshots * Update README.md * Delete desktop_resolution.png * Delete mobile_resolution.png * Add (correct) example screenshots * Add CSS highlighting Co-authored-by: Frans de Jonge <fransdejonge@gmail.com> Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>		2020-08-13 11:45:12 +02:00
..
i18n	i18n French for CustomCSS / CustomJS	2017-12-13 23:04:55 +01:00
static	removed un-editable static/styles.css	2017-12-06 23:50:54 +01:00
configure.phtml	added permission check, error message and german translation	2017-12-06 22:37:49 +01:00
desktop_resolution.png	Add CustomCSS example (#87 )	2020-08-13 11:45:12 +02:00
extension.php	removed un-editable static/styles.css	2017-12-06 23:50:54 +01:00
LICENSE	Add the first extension (CustomCSS)	2015-01-08 21:20:35 +01:00
metadata.json	Update metadata.json to version 0.2 (#59 )	2019-10-03 08:31:04 +02:00
mobile_resolution.png	Add CustomCSS example (#87 )	2020-08-13 11:45:12 +02:00
README.md	Add CustomCSS example (#87 )	2020-08-13 11:45:12 +02:00

README.md

CustomCSS extension

A FreshRSS extension which give ability to create user-specific CSS rules to apply in addition of the actual theme.

To use it, upload this directory in your ./extensions directory and enable it on the extension panel in FreshRSS. You can add CSS rules by clicking on the manage button.

Changelog

0.2 added file permission check, added german translation, removed un-editable file static/style.css
0.1 initial version

Examples

Enhancing mobile view

The following CSS rules let you have a more comfortable mobile view by hiding some icons (read/unread article, mark as favorite and RSS feed's favicon) and by reducing text size. It also displays the name of the subscribed feed, instead of the favicon:

@media (max-width: 840px) 
{
	.flux_header .item.website
	{
		width:20%;
		padding:3px;
	}

	.flux .website .favicon, .flux_header .item.manage
	{
		display:none;
	}
	
	
	.flux_header .item.website span
	{
		display:inline;
		font-size:0.7rem;
	}
}

The result is shown below:

Desktop screen resolution:

Mobile screen resolution: