Newsfeed size

Kenta

I want a bigger newsfeed, so I made a custom.css file and added this

.newsfeed .medium
{
font-size: 60px;
line-height: 60px;
}

This only increased the size of the header, not the body of the newsfeed

Any tips?

Mykle1

line-height: 60px;

.newsfeed .bright.medium.light {
  font-size: 60px;
  line-height: 60px;
}

Kenta

@Mykle1
Nope. Still just the headlines. Does the css need to contain more than just the code you suggested?

sdetweil

@Kenta i would look at the code for className=

if(showingDescription)
   description.className = "newsfeed-desc small light"

so, change newsfeed-desc
.newsfeed .newsfeed-desc {
???
}

Kenta

@sdetweil thank you for trying, but I don’t know where to look… Total n00b…
This is from my config.js
{
module: “newsfeed”,
position: “bottom_bar”,
config: {
feeds: [
{
title: “NRK Nyheter”,
url: “https://www.nrk.no/nyheter/siste.rss”
}
],

sdetweil

@Kenta understand… each module gets to do its own thing… hardly any are documented well…

all modules code are in the ~/MagicMirror/modules folder

all the built in ones are in the modules/default folder…

each module has a file with the name matching the module name… so in this case

~/MagicMirror/modules/default/newsfeed/newsfeed.js

setting the UI component css ‘class’ is done y setting the ‘className’ variable of the element

so, you edit the file and search for className , and there may be multiple… (as there are in this case)…

Mykle1

@Kenta said in Newsfeed size:

Nope. Still just the headlines. Does the css need to contain more than just the code you suggested?

So, I second guessed myself and checked again. The code above does what you want for the headlines. Are you saying you want the New York Times, 2 hours ago: portion as well? In that case, add this as well.

.newsfeed .light.small.dimmed {
  font-size: 60px;
  line-height: 60px;
}

Screenshot

Kenta

@Mykle1 not exactly. I want my entire newsfeed bigger. Not just the headlines. This is the original (https://www.dropbox.com/s/nzb2o5kecn6gfdy/Screenshot_20200317_065226_com.realvnc.view![alt

Then by the changes made in the before mentioned css I get this https://www.dropbox.com/s/pxnuosggy7g24q7/Screenshot_20200317_065703_com.realvnc.viewer.android.jpg?dl=0
But the actual news is still same size…

Mykle1

@Kenta

Assuming we are talking about the default newsfeed module, I could only identify two classes.

The title

.newsfeed .bright.medium.light {
  font-size: 60px;
  line-height: 60px;
}

And the source

.newsfeed .light.small.dimmed {
  font-size: 60px;
  line-height: 60px;
}

I’m not seeing another. As you can see from my picture both rules are working. Are you using BOTH of these?

.newsfeed .bright.medium.light {
  font-size: 60px;
  line-height: 60px;
}

.newsfeed .light.small.dimmed {
  font-size: 60px;
  line-height: 60px;
}

Maybe I’m using an old version? Open the dev console when the mirror is running and identify the third class, if there is one.

Kenta

@Mykle1
None of those help. The first gives a bigger headline, as I’ve showed in previous posts, the other one a bigger name of news channel/time of occurrence.
In dev I see this alt text

Kenta

This post is deleted!

Kenta

this

sdetweil

@Kenta posting pictures does not work… u have to link to them uploaded somewhere else

Kenta

@sdetweil
As previously stated, I’m a complete n00b. It’s sad because I want to be a nerd 😂
Yeah I’ve tried unsuccessfully to post images, but this last one was a link to a Dropbox image. Did it not work.?

sdetweil

@Kenta ok, didn’t see the last as a link.

For Dropbox, if u change the url, dl=0, to dl=1, then it will show here…

sdetweil

@Kenta said in Newsfeed size:

As previously stated, I’m a complete n00b

no problems, we all were…

sdetweil

@Kenta the code for the source title and date/time is

sourceAndTimestamp.className = “newsfeed-source light small dimmed”;

newsfeed-source doesn’t exist in main.css

light is

.light {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
}

small is

.small {
  font-size: 20px;
  line-height: 25px;
}

and dimmed is

.dimmed { 
  color: #666;
}

so, to change the SIZE you need to change the value for class ‘small’

so, for example
in ~/MagicMirror/css/custom.css put

.newsfeed .small {
  font-size: 40px;
  line-height: 45px;
}

for the title text the code is

title.className = “newsfeed-title bright medium light” +

newsfeed-title doesn't exist 
so 'medium' is the size

.medium {
font-size: 30px;
line-height: 35px;
}

so change that to, in custom.css

.medium {
font-size: 50px;
line-height: 55px;
}


so now, custom.css looks like this (sizes just for example)

.newsfeed .small {
font-size: 40px;
line-height: 45px;
}
.newsfeed .medium {
font-size: 50px;
line-height: 55px;
}

Kenta

@sdetweil
Thank you! That worked perfectly!

cyberphox

@sdetweil said in Newsfeed size:

.newsfeed .small {
font-size: 40px;
line-height: 45px;
}

Why the heck isn’t this working for me!
I’ve moved compliments module to lower_third region but i can’t seem to change the size of it

sdetweil

@cyberphox show me the css class setup you did… note that each module gets to choose there own class usage… so ‘small’ might not work for compliments… read the readme,

or look at the
main.css or
compliments.css or
last resort the compliments.js. file for class usage (search for className in the js file)

sometimes the class usages is documented, and sometimes(most times) not