CSS in text widget / fonts in HTML widget

  • 1
  • Question
  • Updated 2 years ago
  • Answered
I can't get custom CSS to work in text widget. DO I just need to use html widget instead?

I tried to add: 

<style>

ul {

    list-style-image: url('MyImageUrl');

}

</style>

 to style the bullets in a list but could not get it to work.

So I went with the html widget instead. Which leads to the question;
Can I access the fonts that are in the text widget in an html widget? - How?

Thanks 
Photo of Scott Williams

Scott Williams

  • 594 Points 500 badge 2x thumb

Posted 2 years ago

  • 1
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Scott,
Yes you generally need to use the HTML Widget for this and to add the <style></style> tag between the <header></header>

For fonts, you can get the link to the font itself using Google Fonts or you can also upload your own font on to Rise Storage and link to the font. You can also directly name the font in CSS. For example one of the available fonts in the Text Widget is Ceviche One so in the CSS you can style and reference it as:

font-family: 'Ceviche One', cursive;
(Edited)
Photo of Scott Williams

Scott Williams

  • 594 Points 500 badge 2x thumb
Thanks,
It works fine in html widget, I didn't realize they were google fonts.
I was trying to use:

font-family: 'Abril Fatface', sans-serif;

but it wasn't working


Is there no way to "style" with CSS in the text widget?
Is it possible to target the id ?
I tried several ways without success, so just wondering.

The presentation is Gallery Ad if you want a look see

Thank You
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Scott,


I copied what you had on the HTML Widget and it looks like it's working and I can see Abril Fatface.


Is this working in preview for you also? What about on the live Display?

Let me also check with you as to whether or not it's possible to style on the Text Widget. Thanks!
(Edited)
Photo of Scott Williams

Scott Williams

  • 464 Points 250 badge 2x thumb
Yes, it all works fine in HTML widget . Thanks
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Scott,

You should be able to style with the Text Widget via the code view in that Widget. You can use below:


<ul style="list-style-image: url('http://walkinartcenter.org/ds/gallery/FA_WIAC-28x75-trans.png'); font-family: 'Abril Fatface', serif; font-size: 60px;">
<li>Weddings</li>
<li>Dinners</li>
<li>Receptions</li>
<li>Corporate Events</li>
<li>Training</li>
<li>Seminars</li>
<li>Trade Shows</li>
<li>Fund Raisers</li>
<li>Reunions</li>
</ul>


See if you can try this out on the current or a new presentation.
Photo of Scott Williams

Scott Williams

  • 464 Points 250 badge 2x thumb
Thanks, I have it working in HTML but I'll give this a go in text stack and see how it does