A Totally Unofficial CSS Help & Tips FAQ



  • Abersade
    Posts: 176 edited February 28

    You will want to look into using "@media" then. I have no experience with doing this but w3 has a couple of articles that sort of cover it, good starting point at any rate.



    Post edited by Abersade on
  • Savannah
    Posts: 188

    So since the mention of @media and associated links happened to solve my problem without my needing to ask (thanks Abersade!), I'll add that 770px wide seems to be the tipping point where it goes from computer layout to mobile layout - I had to go hunting for the number, so hopefully I'll save someone else some time!

    @media only screen and (min-width: 770px)

    seems to be working perfectly for me. (Presumably the same thing with max-width instead of min-width would work for code that only applies in mobile layout, if that makes more sense for your situation.)

  • Dicetomato
    Posts: 2

    cant use @import... this is a sadness :(

  • Conan_Lybarian
    Posts: 120

    I've been playing with quote boxes some, but still am getting snagged on a few things. I've found that "div style=" has given me the best results. But between that and "Blockquote.", I still have not been able to figure out how to change the font or the font color within the quote. To be clear, I'm typing it when creating adventure logs and wikis. Any help would be awesome!

  • ragnarhawk
    Posts: 38

    Hi @Conan_Lybarian, saw your comment in the quote boxes thread.  Had not realized that this question was directed at me :-)

    To change the font, you need to add the font to your campaign.  It is on the Settings > Advanced tab in the lower right of the page.  You then need to specify the font in CSS.  In the case of the snippet that I provided in the other thread, I used inline CSS again

    <div style="color:black; font-family: 'Germania One', cursive;  background-color:#DBC58F; ">

    This says to use the defined font, in black, with the "parchment" background color.  You can change it to color:<colorname> (e.g. color:green) to get a different color for the font.  You can either use the predefined color words, or enter a hex value like I did for background-color.

    I hope that this helps


  • Conan_Lybarian
    Posts: 120

    Am I putting that in the back end CSS or on the specific page I'm writing in? I've added the fonts- I'm trying to make it a different font and color from the rest of the campaign

  • ragnarhawk
    Posts: 38

    Right.  I am adding the CSS directly to the page.  I'm afraid that my CSS-fu is weak when it comes to using it the right way :-)

    I set the CSS using the style= attribute for the div.  I am sure that there are cleaner ways to do it, but it is working for me

  • MPW_Admin
    Posts: 3

    Hello, I am trying to build a minimalist table to put my wiki in using textile markup 

    I am trying to change the font size of the cells, as well as change the border color of the cells to one of my style colors, and the background to solid black. 

    So far my custom css includes the following 

    #content table tr td {color: white; background-color: black;}

    I am trying to compress the contents of this wiki page into an organized table 


    Example of the headers

    | Guides | Rules | Roles | Knowledge Base |

    I am also curious how to activate the table of contents sidebar to see if that would be worth pursuing for ease of site navigation. Thank you! My CSS is a mess and the result of reverse engineering from many help forum searches! 

    Here is a link to my custom CSS


  • Conan_Lybarian
    Posts: 120

    Not sure about the CSS for the font and styling, but have you tried the accordion to create your wiki? It's definitely helped me keep mine clean. 


  • Jynx001
    Posts: 21

    Be sure to check out Kallak's stream on Twitch, Tuesday nights at 10pm Eastern (GMT-4). He's doing CSS tutorials on how to customize your OP pages. Good for beginners or pros. I'm calling the stream "Kallak Haxx." https://www.twitch.tv/obsidianportal

  • BardicPerspiration
    Posts: 1 edited November 29

    Hello, all I want to do is include a background image/color behind my posts similar to the one you can see on this page: https://es-rage-of-demons.obsidianportal.com/

    Is this easy to do, or do I need to learn how to use CSS etc. to do it? Is there a current guide at all? The 'read our guide' link on the advanced setting page leads to a "This site is closed." page.

    Edit: So, I've basically managed to figure it out by investigating the source of the linked page. But still, the question stands: is there a somewhat up-to-date guide on any of this stuff around?
    Post edited by BardicPerspiration on
  • weasel0
    Posts: 376

    No official current guide. I don't think but I think theres one on one of the back burners. I could be wrong but until such a time, most of us just share our mod code via a "what i'm using page" of some sort.

    I think that's the best there is right now. Such as:


    but I haven't messed with the coding in a few years so what you've found there will be what it is. As noted look for wolfhound, if his one campaign is still around, it's set up as a tutorial type area, parts of it anyway.

Sign In or Register to comment.