CSS Codes for Wiki page Infobox's

RyukHateshenai
RyukHateshenai

I am new to Obsidian Portal and I have no real skills with CSS, I am building my games wiki and I am trying to build an infobox for some of my pages but I am unable to figure it out. I have seen examples on other campaigns that are exactly what I am going for but the process of doing it myself is not panning out. So I was wondering if anyone would be willing to share the codes they use?

Comments

  • ragnarhawk
    Posts: 168 edited November 2021

    Hi Ryuk,

    First of all - welcome to OP!

    Next, if you are talking about tooltips (hovertext?), that is an Ascended feature.  If you have an Ascendant account the option for tooltips is in the block menu to the right of your edit box when editing the page.

    If you are not Ascended, you may well want to consider it - there are a lot of benefits when the GM of an OP campaign is Ascended.  (multiple maps and custom CSS are just 2 of the biggest - there are a lot more)

    You can still have a very usable wiki with a Basic account, but the customization for Ascendant campaigns can be amazing

    Oh - you can also often get faster responses from the community on the OP Discord: https://discord.gg/vs38Pmuu3x
    Post edited by ragnarhawk on
  • RyukHateshenai
    RyukHateshenai
    Posts: 2

    Thank you for your response Ragnar,

    Thank you for the suggestion to the discord. I am an ascended member but what I am looking for isnt tooltips(hover text?) What I am looking for is more along the lines of this

    https://forgottenrealms.fandom.com/wiki/Akadi

    https://terroratthrushmoor.obsidianportal.com/wikis/erastil

    https://alfaysia.obsidianportal.com/wikis/danaan

    I am looking to create an information box that has important info on it; name, titles, and other information.

    Thank you,

    Ryuk

  • cgregory
    cgregory
    Posts: 780

    They are just tables that have some css applied to them.  For example the code to the third one is

     

    <table style="width:287px;">

        <tbody><tr>

            <td colspan="3"></td>

        </tr>

        <tr>

            <td><strong>Title(s)</strong></td>

            <td></td>

            <td><em>The Earth Mother</em></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td><strong>Power Level</strong></td>

            <td></td>

            <td>

    <em>Lesser God/Spirit</em> (32)</td>

        </tr>

        <tr>

            <td><strong>Alias</strong></td>

            <td></td>

            <td><em>none</em></td>

        </tr>

        <tr>

            <td><strong>Alignment</strong></td>

            <td></td>

            <td><em>Good</em></td>

        </tr>

        <tr>

            <td><strong>Portfolio</strong></td>

            <td></td>

            <td><em>Earth, Stone, Plants, Animals</em></td>

        </tr>

        <tr>

            <td><strong>Domains</strong></td>

            <td></td>

            <td><em>Domain, Domain, Domain</em></td>

        </tr>

        <tr>

            <td><strong>Devotees</strong></td>

            <td></td>

            <td><em>Clerics, Druids, Rangers, Farmers</em></td>

        </tr>

        <tr>

            <td><strong>Symbol</strong></td>

            <td></td>

            <td><em>Oak tree with roots</em></td>

        </tr>

        <tr>

            <td><strong>Favored Weapon</strong></td>

            <td></td>

            <td><em>Sickle</em></td>

        </tr>

        <tr>

            <td><strong>Realm</strong></td>

            <td></td>

            <td><em>material</em></td>

        </tr>

    </tbody></table>

     

    With the following CSS applied

    #content table {

        border-collapse: collapse;

    }

    #content table {

        background-color: #white;

        border-style: solid;

        border-color: #1e90ff;

    }

    table {

        margin: 0px auto;

    }

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780

    You can lookup the CSS of any site with most browsers by clicking view source.

    Search for custom and click opening the url found there.

    image

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • weasel0
    weasel0
    Posts: 435

    Lol....careful!!! You might get accused of F12 hacking!!!

Sign In or Register to comment.

April 2024
Season of Strife

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