A Totally Unofficial CSS Help & Tips FAQ

124»

Comments

  • Abersade
    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.

    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Post edited by Abersade on
  • Savannah
    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)
    {
    CODE THAT ONLY APPLIES IN COMPUTER LAYOUT HERE
    }

    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
    Dicetomato
    Posts: 2

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

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 116

    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: 36

    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
    Conan_Lybarian
    Posts: 116

    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: 36

    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
    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 

    https://mpwrp.obsidianportal.com/wikis/main-page

    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

    https://mpwrp.obsidianportal.com/wikis/test

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 116

    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. 

    https://starbreaker.obsidianportal.com/wikis/main-page

  • Jynx001
    Jynx001
    Posts: 19

    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

Sign In or Register to comment.