Home › Discussions › Campaign Portal Building › Changing the Font in the Character Page - Campaign Portal Building Discussions on Obsidian Portal Community Forums
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.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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.
John
Johnprime
Where the west is really wild!
The Valley of Life
John, I think he means the actual "Player Character" and "Non Player Character" headings which would be
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
cgregory, That was exactly what I wanted. Thank you!
@cgregory you are an absolute lifesaver for the people here- thanks
Just trying to help out.
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.?
Thanks!
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.
- Kallak
cgregory first off your fix works great if you're trying to adjust the font, but sadly when I'm using:
color: #ffffff;
or
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.
Thanks!
To be clear --Works:
.character-index.campaign-public-layout .secondary-heading {
font-family:arial;
}
Doesn't Work:
.character-index.campaign-public-layout .secondary-heading {
font-family:arial;
color:white;
}
.character-index.campaign-public-layout .secondary-heading {
font-family:arial;
color:#ffffff;
}
Brink of Eternity
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!
Brink of Eternity