Change Element Text

Hojou
Hojou
edited November 2024 in Custom CSS Discussions

Another question about something I can't seem to figure out.

I'm trying to figure out how to change the text field at the top of the Forum page, so it says something other than "Forum."  Is this even possible?  I found the element for the icon, but the text "Forum" is just part of the html, and not defined by the CSS.

Any suggestions?

Post edited by Hojou on

Comments

  • vadercomplex
    vadercomplex
    Posts: 267

    Hi friend! We'll get back to you on this one as soon as we can. :~) 

    Obsidian Portal Support Druid | [email protected]

  • thaen
    thaen
    Posts: 1,130

    @Hojou

    I think you can get close with this ...


    .forum-page-header h2 {
      display: none;
    }

    .forum-page-header .small-11::before {
      content: "TEST";
      display: inline-block;
      margin-top: 30px;
    }

     

    But, since that's referencing ".small-11", that's kind of brittle.

    I can add a span around the "Forum" text to make it easier to hide that word, and then use an ::after on the op-icon-forum span with the "content" that you want instead. But I won't be able to make that change until Monday.

    (Unless it's an emergency, we try not to deploy changes over the weekend so if something unexpected happens, we're not interrupting anyone's game.)

    I'll post back here when I've made that change on Monday.

    Obsidian Portal Developer

  • Abersade
    Abersade
    Posts: 629

    Well, no wonder I couldn't get it to work. I could get the new text to show up no problem but everything I tried to hide the word Forum was hiding everything or having no effect at all.

    GM of Stream of Kairos - 2025 Campaign of the Year

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • thaen
    thaen
    Posts: 1,130

    @Hojou

    I added the span with a class of "text", so this should now get you what you want. (Note the "space" before "TEST" ... otherwise there will be no space between "TEST" and the icon.)


    .forum-page-header h2 .text {
      display: none;
    }

    .forum-page-header .op-icon-forum::after {
      content: " TEST";
    }

     

    Let us know if you run into any other issues!

    Obsidian Portal Developer

  • Hojou
    Hojou
    Posts: 29

    Awesome!  I wasn't actually expecting a change to the websites code.  Thanks!

Sign In or Register to comment.

September 2026
City of Shadows

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

Categories