Newsfeed size

Mykle1

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

cyberphox

@sdetweil sorry i’ve been fighting with CSS all day and typed that in wrong…
What I mean to say was I moved the newsfeed module to lower_third

In custom.css I’ve tried:

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

cyberphox

I even tried this - thinking maybe the indent made a difference but nope!

.newsfeed .small {
  font-size: 80px;
  line-height: 65px;
  }
.newsfeed .medium {
  font-size: 70px;
  line-height: 75px;
  }

sdetweil

@cyberphox i would open the developers window, ctrl-shift-i or f12, and select the elements tab, and scroll thru to the needs feed objects and look at their classes and settings (the css tree is expand on the right as u select an item, nears to the element at the top (custom.css -> main.css ) to furthest at the bottom

it solves so many problems to be able to just look at it

cyberphox

Oh I’ve been looking at the damn thing all day!

newsfeed-title bright medium light seems to be one…if i could at least change something!

sdetweil

@cyberphox said in Newsfeed size:

newsfeed-title

in your class u said

.newsfeed

not the same thing

Mykle1

These work:

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

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

Mykle1

@cyberphox

cyberphox

It’s does work! and it’s not the first time @Mykle1 has bailed me out!
Thanks again man!