Font size/style (Custom CSS)

[jade_3132]

Hello!

So I use this overlay for my mario kart streams and was wanting to customize it a bit and managed to change the font of the overlay but wasn't able to change the font size. I heard that you had to add the tag of whatever it was under, but it unfortunately it didn't seem to work. I'll leave the link to the overlay so you can look at it but if anyone could help, it would be greatly appreciated. Thanks so much and have a great day!

prismillon stats overlay

 

[Suslik V]

Exactly for your page you can try to add:

#stats img{
 width:200px;
}

#stats p{
 font-size:180px;
}

#stats span{
 font-size:140px;
}

into OBS browser source, below already existing custom CSS string.

Usually, for simple pages like this one, users looking at the Inspect page menu or Developers tools menu (of Chrome browser) and searching for "<style>" element on the page. Thus, you can see existing/imported styles for all elements on the page.

 

[jade_3132]

Exactly for your page you can try to add:

#stats img{
 width:200px;
}

#stats p{
 font-size:180px;
}

#stats span{
 font-size:140px;
}

into OBS browser source, below already existing custom CSS string.

Usually, for simple pages like this one, users looking at the Inspect page menu or Developers tools menu (of Chrome browser) and searching for "<style>" element on the page. Thus, you can see existing/imported styles for all elements on the page.

This unfortunately didn't seem to work, although something might be wrong in mine as I don't know a whole lot about code. Here's what I have in the custom css right now. I'm trying to change the size of the white and green text.

CSS:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

@import url('C:/Windows/Fonts/Mk8dxNumberal-Regular.ttf');

* {
    font-family: 'MK8DX Numeral' !important;

#stats img{
 width:200px;
}

#stats p{
 font-size:120px;
}

#stats span{
 font-size:140px;
}

}

 

[PaiSand]

You have a #stats id for a <p> tag and a .green class for a <span> tag
So you need to add !important to all of this. And of course you have to add the font in each one.

#stats p {
  font-family: "MK8DX Numeral";
  font-size: 120px !important;
}

#stats span.green {
  font-family: "MK8DX Numeral";
  font-size:140px !important;
}

You don't need to use the url as the font is in your system.

 

[jade_3132]

You have a #stats id for a <p> tag and a .green class for a <span> tag
So you need to add !important to all of this. And of course you have to add the font in each one.

#stats p {
  font-family: "MK8DX Numeral";
  font-size: 120px !important;
}

#stats span.green {
  font-family: "MK8DX Numeral";
  font-size:140px !important;
}

You don't need to use the url as the fon't is in your system.

Thank you so much, this worked perfectly!

 

[Suslik V]

By specifying one class you may miss other class from selection.
You have direct access to elements (and to all of its selectors), why to use "!important" rule?