brief-rss / brief

RSS reader extension for Firefox
Other
214 stars 44 forks source link

CSS Adjustments #441

Open Freudentaumel opened 5 years ago

Freudentaumel commented 5 years ago

Hello, everybody,

how can I make the following adjustments using CSS:

1) Font size in the feed list (left column)? 2) Headings in the article list (right column)? 3) Articles in the article list (right column)?

Which adjustments do I make in Firefox userChrome.css and which in the settings of Brief?

Thank you for your help Gerhard

bb84000 commented 5 years ago

Hello,

Please go to the issue https://github.com/brief-rss/brief/issues/326 you will find some examples of customization. Customization is done in the box at the end of the Brief settings page.

For instance / Title font for unread article / .title-link {
font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; }

bb

Freudentaumel commented 5 years ago

Hello bb84000,

sorry but I cannnot find the answers to my concret questions in the issue#326.

Could you please give me CSS adjustments to my three questions and where I have to insert them?

Many thanks Gerhard

bb84000 commented 5 years ago

Hello, You cannot make Brief adjustements in userchrome.css.

You can use some parts of the example to make your own "css" file by adding font definition to items you need, and removing colors change you don't want. I have commented the different parts of the example.

For instance, feed list is the part : / Sidebar customization / / Feeds Items title font color /

tree-item > .title, tree-folder-header > .title, tree-folder-footer > .title,

view-list > tree-item > .title {

_color: var(--feedname) !important;_  <- Remove this
font-family: Arial, sans-serif;               <- and add this
font-size: 16px;
font-weight: bold;

} to chang font size of the feeds list. You also need to add font cvhange to the selected and hover cases, please see the example.

Then, copy the content of the file you have made in the Brief customization box in the settings page...

bb

Freudentaumel commented 5 years ago

No offense, but I can't implement the instructions from bb84000.

So I'd like to ask if there's anyone here who can answer my questions step by step - maybe tanriol or one of the other moderators?

bb84000 commented 5 years ago

Sorry, but english is not my native language.

In firefox menu, select tools, addons, select brief and click on settings button. On the very bottom of the page, copy the following css code in the customization box:

tree-item > .title, tree-folder-header > .title, tree-folder-footer > .title {
    font-size: 16px !important;
}

to change the font size of the feed list. bb

Freudentaumel commented 5 years ago

Englisch ist auch nicht meine Muttersprache, sondern Deutsch. Und meine Englischsprachigen Beiträge lasse ich mit https://www.deepl.com/ übersetzen.

Freudentaumel commented 5 years ago

In Deutsch: Super - das hat geklappt. Gibt es ebenfalls einen entsprechenden CSS-Code für die Überschriften und Inhalte in der rechten Spalte?

In English: Great - that worked. Is there also a corresponding CSS code for the headings and contents in the right column?

bb84000 commented 5 years ago

Of course! For instance

/* Title font for unread article */
.title-link {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
}
/* Article content*/
#feed-content {
    font-family: Arial, sans-serif;
    font-size: 12px;
}

bb

Freudentaumel commented 5 years ago

Thanks for your help, bb.

Freudentaumel commented 5 years ago

Hello Bernard,

unfortunately I have to confess that your CSS codes from April 25th don't work after all. Therefore I would like to ask you if you can check them again and thank you in advance.

Best regards from Gerhard

bb84000 commented 5 years ago

Hello Gerhard

I'have tested this working code 👍

/* Article content*/
.content  {
    font-family: Arial, sans-serif;
    font-size: 12px  !important;
}

tree-item > .title, tree-folder-header > .title, tree-folder-footer > .title {
    font-size: 16px !important;
}

/* Title font for unread article */
.title-link {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

Please enjoy 👍

Bernard

Freudentaumel commented 5 years ago

Hello Bernard,

although this code does not work on my computer either, I accept it this way and thank you for your effort.

Have a good day Gerhard

bb84000 commented 5 years ago

I cannot understand why the code don't work for you. Tested with Firefox 66.0.5 on Windows 10.

Bernard