Changing the Font in the Character Page


In the character page there are the "Player Characters" and "Non-Player Characters" labels. I would like to change the font of those and cannot seem to figure it out. help would be greatly appreciated.


  • Johnprime
    Posts: 252

    Changing the fonts on different areas of your OP site is a little challenging. First, if you are not using a font normally available on a computer, you'll need to find what you are looking for under Google Fonts. The link to Google Fonts is here. But your best bet is to do a search for Google Fonts on Google and it will bring back links on what you need to do to use Google Fonts. Some of that information is not needed for OP, but it's good to understand how they work anyway.

    Once you know what font you want to use, you need to go to you your OP site, the Settings Tab and then the Advanced Tab. Under the Custom CSS entry field, you will see a Google Fonts section with a + sign. Click the plus sign and an input field will appear that will let you add a Google Font name. Just type the name in there and click enter once you are through.

    Then you just need to reference the font in some custom css. I'm using a custom font for Character Names which I did with the following Custom CSS.

    .character-list-item-container .character-name {

        font-family: Lobster Two;

        font-size: 1.45em;


    That should give you want you want. If you have any other questions or I didn't explain it well enough, just let me know.



    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • cgregory
    Posts: 779

    John, I think he means the actual "Player Character" and "Non Player Character" headings which would be

    .character-index.campaign-public-layout .secondary-heading, .item-index.campaign-public-layout .secondary-heading{




    If you are not using the Items page  (or don't want it being the same font) then you can leave out the ', .item-index.campaign-public-layout .secondary-heading'

    They are among us!


                       XCom: Defiance - Campaign of the Month November 2016



  • tommy19
    Posts: 62


    cgregory, That was exactly what I wanted. Thank you!

  • GamingMegaverse
    Posts: 2,956

    @cgregory you are an absolute lifesaver for the people here- thanks 

    Just trying to help out.

  • Aveneer
    Posts: 1

    I know I'm two years behind everyone here, but I have a few questions about this:

    1) Where do you put the CSS text? In the field next to place where you choose your font, or do you put it on the actual page you are editing?

    2) What are the different code names you use to reference each type of text? For example, headings on each page, general font on each oage, etc.?


  • Kallak
    Posts: 1,090

    Hey @Aveneer, not to worry, it's never too late to get started on CSS for your campaign(s). Regarding your questions:

    (1) On the Advanced portion of the Settings tab on your campaign, there is a text field for Custom CSS. You'll want to put your rules in there and then save.

    (2) The "codenames" or way that you target things can vary based on what you're trying to do specifically, so you'll need to understand a little bit about how the site is put together structurally. This will help you in your efforts to make things look the way you want them. The first thing you need to know is how to inspect what you're wanting to add rules for. You can do this by right clicking on the element in question. You'll choose to "Inspect", "Inspect Element" or whatever verbiage you have based upon which browser you are using. This will let you see the type of element, and any associated classes and/or IDs it has. You can also see where your element falls in terms of the page's overall structure (what elements your element is the child of).

    So using page headings as an example, here is a HTML setup for the main wiki page's title.

    <h2 class="wiki-page-name title">Main Page</h2>

    It's an element of type h2 (ie, heading 2), has no ID, and has two class names ("wiki-page-name" and "title"). Now let's take a look at another. This time around, it's the page title for an Adventure Log post.

    <h2 class="adventure-log-post-title title" itemprop="name">Session 2 - Complications</h2>

    Note that they have some similarities and some differences. This one is also an element of type h2, and has no ID. It does have the "title" class like the first, but it does not have the "wiki-page-name" class. Instead, it has the "adventure-log-post-title" class.

    So, depending on what you wanted to do specifically, you have some options on how to target. If you want them to be different fonts for example, then your best bet would be to target the individual classes: "wiki-page-name" and/or "adventure-log-post-title". If you want to style both the same, then you could target all h2 elements with the class "title". You could also style all h2 elements by just assigning rules to h2, but this may be broader than you want and end up styling things you hadn't anticipated.

    There's also where your element falls in the hierarchy to consider. For instance, if you only want to style page headings on the "front-facing" side of your campaign (as in not the dashboard, forums, calendar or settings; just the things visitors would see), then you will want to take note that everything on the "front end" is a child of the class "campaign-public-layout" while everything the "back end" (dashboard, forum, calendar and settings) is under the class "campaign-dashboard-layout".

    So, putting all of this together, if we wanted to target all of our page headings on the "front end", we could use something like this as our selector:

    .campaign-public-layout h2.title { INSERT RULES HERE }

    I highly recommend you check out w3schools as a way to learn more about CSS. They have tons of guides, tutorials, "Try it yourself" areas and other great resources. And of course, if you have any further questions, feel free to ask here or send me a private message.

    All the best,
    - Kallak
  • camarilladee
    Posts: 22 edited May 2021

    cgregory first off your fix works great if you're trying to adjust the font, but sadly when I'm using:

    color: #ffffff;


    color: white; 

    in place of the font family css you got up there, it doesn't seem to affect the color at all.  I noticed you used the single quotes in the font family instruction, I tried it that way as well to no avail.

    I'd love to hear if anyone else has input on adjusting the color of the headers which read "Player Characters" and "Non-Player Characters" on the Character Page.


    To be clear --

    .character-index.campaign-public-layout .secondary-heading {



    Doesn't Work:
    .character-index.campaign-public-layout .secondary-heading {



    .character-index.campaign-public-layout .secondary-heading {



    Post edited by camarilladee on
  • camarilladee
    Posts: 22

    Please disregard my above post.  Seems my browser must not have been refreshing or something as I've got no issue with it working now?  Very strange.  Thanks anyway!

Sign In or Register to comment.

June 2022
Baldur's Gate

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!