Newsfeed size

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