Tiny Tiny RSS Black (Pink) Theme with two columns

ttrss-theme-black-two-column.css

@import url("https://fonts.googleapis.com/css?family=Miriam+Libre:400,700|Rubik:400&display=swap");
a.title {
  font-family: "Miriam Libre", Noto Sans CJK SC, Sarasa Gothic SC,
    Microsoft YaHei, sans-serif, Apple Color Emoji, Segoe UI Emoji !important;
}
#content-wrap#content-wrap .content,
#content-wrap#content-wrap .content-inner,
#feedTree,
body {
  font-family: rubik, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
    Arial, PingFang SC, Noto Sans CJK SC, Sarasa Gothic SC, Microsoft YaHei,
    sans-serif, Apple Color Emoji, Segoe UI Emoji !important;
}
#feedTree {
  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, Segoe UI,
    Helvetica, Arial, PingFang SC, Noto Sans CJK SC, Sarasa Gothic SC,
    Microsoft YaHei, sans-serif, Apple Color Emoji, Segoe UI Emoji !important;
}
#content-wrap#content-wrap .content h1,
#content-wrap#content-wrap .content h2,
#content-wrap#content-wrap .content h3,
#content-wrap#content-wrap .content h4,
#content-wrap#content-wrap .content h5,
#content-wrap#content-wrap .content h6 {
  font-family: "Miriam Libre", Noto Sans CJK SC, Sarasa Gothic SC,
    Microsoft YaHei, sans-serif, Apple Color Emoji, Segoe UI Emoji !important;
  margin: 1.5rem 0;
}
#content-wrap#content-wrap .post .title {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  font-family: "Miriam Libre", Noto Sans CJK SC, Sarasa Gothic SC,
    Microsoft YaHei, sans-serif, Apple Color Emoji, Segoe UI Emoji !important;
}
#content-wrap#content-wrap .post .header {
  font-size: 13px;
  font-family: "Miriam Libre", Noto Sans CJK SC, Sarasa Gothic SC,
    Microsoft YaHei, sans-serif, Apple Color Emoji, Segoe UI Emoji !important;
}
#content-wrap#content-wrap .content p {
  max-width: 100%;
  line-height: 2;
  margin: 1.5rem 0;
}
body.ttrss_main div.post div.header .row {
  justify-content: start;
}
#content-wrap#content-wrap .post .header > * {
  align-items: center;
}
body.ttrss_main div.post div.header .comments {
  display: none;
}
#content-wrap#content-wrap .content img,
#content-wrap#content-wrap .content video {
  display: block;
  margin: 1rem auto;
}
#content-wrap#content-wrap .content figure {
  text-align: center;
  font-style: normal;
}
body.ttrss_main .alert-info,
body.ttrss_utility .alert-info {
  border-color: #d66e8b !important;
  background-color: #e4779621 !important;
  color: #d66e8b !important;
}
body.ttrss_main a:hover {
  color: #d66e8b !important;
}
#content-insert {
  min-width: 860px !important;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeRow.Error .dijitTreeLabel {
  color: #0000005c;
}
body.ttrss_main #main {
  background-color: #f7f7f7 !important;
}
.dijitTreeLabel {
  font-weight: 600;
}
#feeds-holder#feeds-holder
  #feedTree
  .dijitTreeRow[style="padding-left: 19px;"] {
  padding-left: 2px !important;
}
#feeds-holder#feeds-holder #feedTree {
  font-size: 14px;
}
#content-wrap#content-wrap .content,
#content-wrap#content-wrap .content-inner {
  font-size: 14px;
}
.flat .dijitTree .dijitTreeNode .dijitTreeRow {
  padding: 5px 0;
}
#feeds-holder#feeds-holder #feedTree .dijitTreeContainer {
  padding: 30px 0;
}
#feeds-holder#feeds-holder #feedTree .dijitTreeExpando {
  top: 0;
  left: -5px;
}
#feeds-holder#feeds-holder #feedTree .dijitTreeNodeContainer[role="group"] {
  padding-left: 28px;
}
#content-wrap#content-wrap #headlines-frame {
  padding-top: 0;
}
#content-wrap#content-wrap #headlines-spacer::after {
  background-color: #fff;
}
#content-wrap#content-wrap #floatingTitle,
#content-wrap#content-wrap #floatingTitle .title,
.cdm div.feed-title a:hover,
.flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons,
.flat .dijitCalendarNextYear,
.flat .dijitCalendarPreviousYear,
.flat .dijitCalendarSelectedYear,
.flat .dijitCheckBoxIcon:before,
.flat .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon:before,
.flat .dijitSliderDecrementIconH,
.flat .dijitSliderDecrementIconV,
.flat .dijitSliderIncrementIconH,
.flat .dijitSliderIncrementIconV,
.flat .dijitTab i.material-icons,
.flat .dijitTabContainerTabListNested .dijitTab,
.flat .dijitTabContainerTabListNested .dijitTabActive,
.flat .dijitTabContainerTabListNested .dijitTabChecked,
.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive,
.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover,
.flat .dijitTabStripIcon,
.flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando,
.flat .dijitTreeExpando,
body.ttrss_main #headlines-spacer a:hover,
body.ttrss_main #prefFilterTestResultList,
body.ttrss_main #toolbar-frame #toolbar #selected_prompt,
body.ttrss_main a,
body.ttrss_main ul.hotkeys-help .hk,
body.ttrss_utility .content h4,
body.ttrss_utility .footer a:hover,
body.ttrss_utility a,
div#floatingTitle .collapse i.material-icons,
div#floatingTitle .feed-title a.catchup:hover,
div.cdm.expandable.active .collapse i.material-icons,
div.cdm.expandable.active div.header a.title,
div.cdm.expanded.active div.header a.title {
  color: rgba(0, 0, 0, 0.75);
}
.flat .dijitButton.alt-info .dijitButtonNode,
.flat .dijitButton.alt-primary .dijitButtonNode,
.flat .dijitComboBox.alt-info .dijitButtonNode,
.flat .dijitComboBox.alt-primary .dijitButtonNode,
.flat .dijitComboButton.alt-info .dijitButtonNode,
.flat .dijitComboButton.alt-primary .dijitButtonNode,
.flat .dijitDropDownButton.alt-info .dijitButtonNode,
.flat .dijitDropDownButton.alt-primary .dijitButtonNode,
.flat .dijitSelect.alt-info .dijitButtonContents,
.flat .dijitSelect.alt-info .dijitButtonNode,
.flat .dijitSelect.alt-primary .dijitButtonContents,
.flat .dijitSelect.alt-primary .dijitButtonNode,
.flat .dijitSliderImageHandle:after,
.flat .dijitSpinner.alt-info .dijitArrowButton,
.flat .dijitSpinner.alt-primary .dijitArrowButton,
.flat .dijitTabContainerBottom-tabs .dijitTabChecked:before,
.flat .dijitTabContainerLeft-tabs .dijitTabChecked:before,
.flat .dijitTabContainerRight-tabs .dijitTabChecked:before,
.flat .dijitTabContainerTop-tabs .dijitTabChecked:before,
.flat .dijitToggleButton.alt-info .dijitButtonNode,
.flat .dijitToggleButton.alt-primary .dijitButtonNode,
::selection {
  background: rgba(0, 0, 0, 0.75);
}
.flat .dijitButton.alt-info .dijitButtonNode,
.flat .dijitButton.alt-primary .dijitButtonNode,
.flat .dijitComboBox.alt-info .dijitButtonNode,
.flat .dijitComboBox.alt-primary .dijitButtonNode,
.flat .dijitComboButton.alt-info .dijitButtonNode,
.flat .dijitComboButton.alt-primary .dijitButtonNode,
.flat .dijitDropDownButton.alt-info .dijitButtonNode,
.flat .dijitDropDownButton.alt-primary .dijitButtonNode,
.flat .dijitSelect.alt-info .dijitButtonContents,
.flat .dijitSelect.alt-info .dijitButtonNode,
.flat .dijitSelect.alt-primary .dijitButtonContents,
.flat .dijitSelect.alt-primary .dijitButtonNode,
.flat .dijitSpinner.alt-info .dijitArrowButton,
.flat .dijitSpinner.alt-primary .dijitArrowButton,
.flat .dijitToggleButton.alt-info .dijitButtonNode,
.flat .dijitToggleButton.alt-primary .dijitButtonNode {
  border-color: rgba(0, 0, 0, 0.9);
}
.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle,
.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover,
.flat .dijitCalendarSelectedDate .dijitCalendarDateLabel,
.flat
  .dijitCalendarSelectedDate.dijitCalendarHoveredDate
  .dijitCalendarDateLabel,
.flat .dijitMenuBar .dijitMenuItemActive,
.flat .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected,
.flat .dijitMenuBar .dijitMenuItemHover,
.flat .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected,
.flat .dijitMenuBar .dijitMenuItemSelected,
.flat .dijitMenuItemActive,
.flat .dijitMenuItemActive td,
.flat .dijitMenuItemHover,
.flat .dijitMenuItemHover td,
.flat .dijitMenuItemSelected,
.flat .dijitMenuItemSelected td,
.flat .dijitProgressBarFull,
.flat .dijitRadio:after,
.flat .dijitRadioIcon:after,
.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon:after,
.flat .dijitSlider .dijitSliderBottomBumper,
.flat .dijitSlider .dijitSliderLeftBumper,
.flat .dijitSlider .dijitSliderProgressBarH,
.flat .dijitSlider .dijitSliderProgressBarV,
.flat .dijitTreeRowActive.dijitTreeRowSelected,
.flat .dijitTreeRowHover.dijitTreeRowSelected,
.flat .dijitTreeRowSelected,
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.75);
}
.cdm div.feed-title {
  border: 0 solid rgba(0, 0, 0, 0.75);
}
.dojoDndItemAfter,
.dojoDndItemBefore,
.flat .dijitCheckBoxCheckedHover,
.flat .dijitCheckBoxHover,
.flat .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg,
.flat
  .dijitColorPalette
  .dijitPaletteTable
  .dijitPaletteCellSelected
  .dijitPaletteImg,
.flat .dijitEditorFocused .dijitEditorIFrameContainer,
.flat .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame,
.flat .dijitEditorHover .dijitEditorIFrameContainer,
.flat .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame,
.flat .dijitRadio,
.flat .dijitRadioIcon,
.flat .dijitSliderImageHandle {
  border: 1px solid rgba(0, 0, 0, 0.75);
}
.flat .dijitCalendarCurrentDate .dijitCalendarDateLabel,
.flat .dijitTextBoxFocused,
.flat .dijitTextBoxHover {
  border-color: rgba(0, 0, 0, 0.75);
}
.flat .dijitCheckBoxChecked {
  background-color: rgba(0, 0, 0, 0.75);
  border-color: rgba(0, 0, 0, 0.75);
}
.dojoDndItemAnchor,
.flat .dijitInlineEditBoxDisplayModeHover {
  border: 1px dashed rgba(0, 0, 0, 0.75);
}
body.ttrss_main .alert-info,
body.ttrss_utility .alert-info {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
}
#content-wrap#content-wrap .cdm.expandable:not(.active).Selected,
#content-wrap#content-wrap .cdm.expandable:not(.active).active,
#content-wrap#content-wrap .hl.Selected,
#content-wrap#content-wrap .hl.active {
  border-color: rgba(0, 0, 0, 0.9);
  background-color: rgba(0, 0, 0, 0.05) !important;
}
#content-wrap#content-wrap .hl > .left .dijitCheckBox.dijitCheckBoxChecked {
  background-color: #d66e8b !important;
}
body.ttrss_main .text-info,
body.ttrss_utility .text-info {
  color: rgba(0, 0, 0, 0.75);
}
.flat .dijitRadioCheckedDisabled {
  border-color: #e47795a8;
}
.flat .dijitRadioCheckedDisabled:after {
  background-color: #e47795a8;
}
.flat .dijitCheckBoxCheckedDisabled {
  border-color: #e47795a8;
  background-color: #e47795a8;
}
.flat .dijitMenuBar .dijitMenuItemDisabled.dijitMenuItemSelected,
.flat .dijitMenuItemDisabled.dijitMenuItemSelected,
.flat .dijitMenuItemDisabled.dijitMenuItemSelected td {
  background: #e47795a8;
}
.flat
  .dijitMenu
  .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected)
  .dijitMenuItemLabel {
  color: rgba(0, 0, 0, 0.75);
}
#content-wrap#content-wrap #headlines-spacer {
  height: 150px;
  position: relative;
}
body.ttrss_main #headlines-frame.auto_catchup #headlines-spacer {
  height: auto;
}

Preview

Hi Spencer,
could you help me to do only display the user name, date, and battery usage? i was doing it many times, and obviously i did not code anything before. And when it is done could you send it to my email? [email protected] thanks

Hi Spencer,
could you help me to do only display the user name, date, and battery usage? i was doing it many times, and obviously i did not code anything before. And when it is done could you send it to my email? [email protected] thanks

No. And I have absolutely no idea what you are talking about.