FreshRSS/rssguard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add empty skin for skin creators

Browse Source
This commit is contained in:
Martin Rotter 2021-09-21 08:22:08 +02:00
parent 39d2717140
commit 7e65408e61
11 changed files with 172 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/docs/Documentation.md
View File

@ -453,6 +453,8 @@ You can select style and skin in settings category `User interface`.
RSS Guard encapsulates styling capabilities via *skins* feature. Each skin is placed in its own folder and must contain several [files](https://github.com/martinrotter/rssguard/tree/master/resources/skins/vergilius). There are some [built-in](https://github.com/martinrotter/rssguard/tree/master/resources/skins) skins, but you can place your custom skins in your [user data folder](#userd). You can find exact path to your user data folder in `About` dialog. Note that there must be subfolder `skins`. Create it if it does not exist and place your custom skins inside.
Also, there is "empty" [skin](https://github.com/martinrotter/rssguard/tree/master/resources/skins/plain) which can be used as a base for your custom skins. Look into its main [layout file](https://github.com/martinrotter/rssguard/tree/master/resources/skins/plain/html_wrapper.html) for some commentary.
<img src="images/about-skins.png" width="600px">
So for example if your new skin is called `greenland`, you must place it in folder

32
resources/skins/dark/html_wrapper.html
View File

@ -1,6 +1,4 @@
<!DOCTYPE html>
<!-- This is core html which is used as a wrapper for "html_single_message.html -->
<html lang="en">
<head>
@ -7219,41 +7217,11 @@ a.list-group-item-danger.active:focus {
}
</style>
<!-- PERCENTAGE-1 gets replaced by actual title of the message by RSS Guard. -->
<title>
%1
</title>
<!-- Required JavaScript code for RSS Guard. -->
<script>
document.addEventListener('DOMContentLoaded', function () {
// Do something when message(s) gets loaded.
}, false);
function switchReadStatus(link) {
if (link.className == "mark-read") {
link.className = "mark-unread";
alert(link.getAttribute("message_id") + "-" + "read");
} else {
link.className = "mark-read";
alert(link.getAttribute("message_id") + "-" + "unread");
}
}
function switchStarredStatus(link) {
if (link.className == "mark-starred") {
link.className = "mark-unstarred";
alert(link.getAttribute("message_id") + "-" + "starred");
} else {
link.className = "mark-starred";
alert(link.getAttribute("message_id") + "-" + "unstarred");
}
}
</script>
</head>
<!-- PERCENTAGE-2 gets replaced by contents of message(s). -->
<body>
%2
</body>

4
resources/skins/plain/html_adblocked.html Executable file
View File

@ -0,0 +1,4 @@
<div>
<h4>%1</h4>
<div>%2</div>
</div>

1
resources/skins/plain/html_enclosure_every.html Executable file
View File

@ -0,0 +1 @@
<a href="%1">%2<span style="text-transform: uppercase;">%3</span></a>

1
resources/skins/plain/html_enclosure_image.html Executable file
View File

@ -0,0 +1 @@
<a href="%1"><img src="%1" alt="%2" style="height: %3px;" /></a>

8
resources/skins/plain/html_single_message.html Executable file
View File

@ -0,0 +1,8 @@
<div dir="auto">
<h5>%1 <a href="%3">🔗URL</a> %6</h5>
<div>
<div style="text-align: center;">%2, %5</div>
<div>%7</div>
%4
</div>
</div>

85
resources/skins/plain/html_wrapper.html Executable file
View File

@ -0,0 +1,85 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<!--
This is the main layout file for article viewer.
This file is processed in runtime with article which
should be displayed.
%1, %2, ..., %N placeholders are used throught all files and are replaced
with various article's properties when needed.
Here is overview of all placeholders used throughtout the skin:
Common placeholders:
%data% - is replaced by current absolute path to user data folder.
html_wrapper.html:
%1 - Title of the article.
%2 - Body of the preview which is composed from:
- single html_single_message.html (single article preview),
- multimple html_single_message.html (newspaper mode).
html_single_message.html:
%1 - Title of the article.
%2 - "Written by" text.
%3 - URL of the article.
%4 - Body of the article.
%5 - Date/time of the article.
%6 - Attachments (composed from html_enclosure_every.html).
%7 - Attached pictures (composed from html_enclosure_image.html).
html_adblocked.html:
%1 - Title of the page. This page is used when the website is entirely blocked by AdBlock.
%2 - Description of what and why was blocked.
html_enclosure_every.html:
%1 - URL of the attached media file.
%2 - Attachment symbol.
%3 - MIME type of the attachment.
html_enclosure_image.html:
%1 - URL of the attached picture file.
%2 - MIME type of the picture.
%3 - height of the picture thumbnail to be displayed which is loaded from application settings.
-->
<head>
<!-- Place your custom skin-wide CSS styles here. -->
<style>
</style>
<!-- This resets key font sizes, so that font size can be changed in RSS Guard. -->
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
font-size: 100%;
font: inherit;
}
html {
height: 100%;
}
body {
height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>%1</title>
</head>
<body>
%2
</body>
</html>

18
resources/skins/plain/metadata.xml Executable file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.666">
<author>
<name>Martin Rotter</name>
<email>rotter.martinos@gmail.com</email>
</author>
<palette>
<!--
Keys are defined in file
"https://github.com/martinrotter/rssguard/blob/master/src/librssguard/miscellaneous/skinfactory.h"
Specifically, they are taken from enumeration "PaletteColors".
-->
<color key="1">#00BFFF</color>
<color key="2">#FF0000</color>
<color key="3">#32CD32</color>
</palette>
</skin>

13
resources/skins/plain/theme.css Executable file
View File

@ -0,0 +1,13 @@
/* Qt stylesheet. */
QTextEdit {
selection-background-color: #4861f0;
}
QStatusBar::item {
border: none;
}
QSplitter::handle {
background: rgba(117, 117, 117, 0.5);
}

79
resources/skins/vergilius/html_wrapper.html
View File

File diff suppressed because one or more lines are too long

3
src/librssguard/gui/webviewer.cpp
View File

@ -118,7 +118,8 @@ void WebViewer::loadMessages(const QList<Message>& messages, RootItem* root) {
enc_url = QUrl::fromPercentEncoding(enc_url.toUtf8());
enclosures += skin.m_enclosureMarkup.arg(enc_url,
QSL("&#129527;"), enclosure.m_mimeType);
QSL("&#129527;"),
enclosure.m_mimeType);
if (enclosure.m_mimeType.startsWith(QSL("image/")) &&
qApp->settings()->value(GROUP(Messages), SETTING(Messages::DisplayEnclosuresInMessage)).toBool()) {