Fonts in tables

Frak_Lou_Elmo
Frak_Lou_Elmo
edited April 2022 in Campaign Portal Building

Hey all,

I am trying to get the text in a table to have a specific font, but can't get it to work. I have read

https://help.obsidianportal.com/article/183-custom-css-basics

and manged to get the font change in a test line (scroll to the bottom here) , but not in the table using the same method. Is it simply not possible or is there another way?

Also, I notice that the fonts changed this way are fro headings. Is it possible to do it to the text which is not the heading? what if I want to use 1 font for an h4 somewhere and another font for an h4 elsewhere? (Like I have the handwriting of different characters)

 

Post edited by Frak_Lou_Elmo on



twitter: @Frak_Lou_Elmo

Comments

  • thaen
    thaen
    Posts: 1,064

    On your test page, next to the flaming d6s (nice!), it says "h5. DiceLog Room 437"

    The "h5." part means that it's not actually being turned into a heading.

    I'm not entirely sure what look you're going for here, but you might just need to put the "h5. DiceLog Room 437" in a separate "td" element from the image?

    The "h5." needs to be the first thing on its own line in the WikiPage for it to be read correctly by the converter.

    Once the "h5." is being converted to a real heading, then the styling should work just fine.

    If you want to use different fonts on the headings, you can use CSS classes on the headings.

    Here's the textile page on how to do classes:

    https://textile-lang.com/doc/classes-and-ids

    For example, you might have ...

    "h5(handwriting). This title will show up in the handwriting font."

    ... in your wiki page, and then in your Custom CSS:

    .handwriting {

      font-family: 'Some Handwriting Font Name';

    }

    Let me know if I'm not making sense.

    Obsidian Portal Developer

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 174 edited April 2022

    the CSS classes does make sense.

    figured out how to get the font in the table, thanks!



    Also, is there a way in the html to say "all text on this page is font XXX regardless of size?"

    Post edited by Frak_Lou_Elmo on



    twitter: @Frak_Lou_Elmo

  • thaen
    thaen
    Posts: 1,064

    Nice!  Looks great!

    Other people here are probably better with CSS than I am, so anyone else please say if there's an easier way ...

    But the way I would do that is something like this:


    body.wiki-page-slug-accordion-test div[itemprop="text"],
    body.wiki-page-slug-accordion-test div[itemprop="text"] p,
    body.wiki-page-slug-accordion-test div[itemprop="text"] h1,
    body.wiki-page-slug-accordion-test div[itemprop="text"] h2,
    body.wiki-page-slug-accordion-test div[itemprop="text"] h3,
    body.wiki-page-slug-accordion-test div[itemprop="text"] h4 {
    font-family: "Pirata One";
    }

     

    This is only going to change the font of the things inside of the editable part of the page ... not the navigation on the page or the title/heading of the page.

    "accordion-test" is the slug for the page that I was testing this on, so you would replace that part with the slug for the page you want this to affect.  And add in any other tags that aren't using the correct font yet.  Depending on how specific the other CSS rules affecting the page are, there might be parts that aren't changing that you do want to change.

    Let me know if that code doesn't make sense and I can detail an explanation of it.

    Obsidian Portal Developer

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions