Single line article titles?

[robuck86]

I love Miniflux, but I wish I could make it so each article title is on one line as opposed to the default layout.
Right now it's like this:

Title of the Article
www.websiteofthearticle.org | 4 days ago 
Read Star External Link

I'd like to make it look more minimalistic, and have each article on a single line like this:

Title of the Article ------ Date
Title of the 2nd Article ------ Date
or
Title of the Article ------- Author - Date

Is it possible there's a setting somewhere to achieve this?

[SansGuidon]

Miniflux exposes custom CSS through settings for this exact purpose, to avoid proliferation of special cases to maintain.
I've quickly tested something like below on my instance and that gives a layout similar to what you describe, yet I have also other CSS applied, so your layout will differ.

Now if you have everything at same line you might have to tune this a bit depending your other CSS config.

article.item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0.25em 0;
  margin: 0;
}

.item-header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-header .category {
  display: none;
}

.item-meta {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.item-meta-info {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.item-meta-info li.item-meta-info-title::after {
  content: " - ";
}

[robuck86]

Thanks, I tweaked it a little and it works great!

article.item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0.01em 0;
  margin: 0;
  transition: background-color 0.2s ease-in-out;
  color: #ff6f61; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}


.item-meta {

  display: flex; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  column-gap: 5em;
}
.item-header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.item-header .category {
  display: inline-flex;
  font-size: 0.55rem;
}
.item-meta-info {
  display: none;
  align-items: center;
  gap: 0.05em;
  font-family: system-ui, sans-serif;
  font-size: 0.15rem;
}

.item-meta-info li.item-meta-info-title::after {
  content: " - ";
}
/* Optional hover style */
article.item:hover {
  background-color: #fce4cf;
}

[SansGuidon]

Glad it helps 🚀 !