A Totally Unofficial CSS Help & Tips FAQ

124

Comments

  • Abersade
    Abersade
    Posts: 191 edited February 2019

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

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

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

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

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

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

    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
    BardicPerspiration
    Posts: 1 edited November 2019

    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
    weasel0
    Posts: 401

    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:

    https://teaching-myself-css.obsidianportal.com/wiki_pages/css

    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.

  • PhoenixMark
    PhoenixMark
    Posts: 88

    Hi friends,

    I am back after a long hiatus. Starting a new campaign. I have no memory for the html and CSS. Can someone quickly tell me how to change(reduce) the padding/margin between the main content box and the sidebar, preferably widening my main text box. 

     

    I tried searching for an answer but I ran out of patience... lol

     

    Yours in ignorance,

    PhoenixMark

  • PhoenixMark
    PhoenixMark
    Posts: 88 edited January 11

    Hi friends,

    I am back after a long hiatus. Starting a new campaign. I have no memory for the html and CSS. Can someone quickly tell me how to change(reduce) the padding/margin between the main content box and the sidebar, preferably widening my main text box. 

     

    I tried searching for an answer but I ran out of patience... lol

     

    Yours in ignorance,

    PhoenixMark

    PS, I am finding that my borrowed CSS was the issue
    Post edited by PhoenixMark on
  • Kallak
    Kallak
    Posts: 1,021 edited January 11

    Mark! Welcome back man, it's great to see you again!

    Regarding your question, you essentially have 2 options at your disposal. You'll have to forgive the overly drawn out explanation, but since this is the Help and Tips posts, I'm going to write it out for future OPers to find. Option 1 is the sort of "quick and easy, but probably not what you're actually looking for" way to go. Option 2 is the "bit more involved, but most likely what you REALLY want" method.

    Option 1:

    Go into the "Advanced" area of your campaign's "Settings" tab and increase the "Content Max Width" value that is stored there, and then click the Save button.

    This is sort of the quick and dirty answer. It's also the answer available for those who don't have access to the custom CSS field. On the plus side, it will increase the size of your content area. On the flip side, it will also increase the size of your navigation and your sidebar. This is because the value that you change in "Max Content Width" is for the campaign page's overall content, which includes all 3 columns (nav, content and sidebar). These columns are set with percentage-based widths, so as you increase the "Max Content Width" number, they all get bigger together.

    As a bonus, you can go to the "Style" area of the "Settings" tab and check the "Collapse Front Page Menu" checkbox and then click the Save button. This will buy you a bit more room, as the space freed up from the narrowing of the collapsed menu is given to the content area only (the sidebar does not increase).

    Option 2: (requires access to the custom CSS field)

    Go to the "Advanced" area of your campaign's "Settings" tab and input custom CSS settings that give new values for the widths and padding of the 4 elements involved in the overall page's layout.

    This requires (1) the above mentioned access to the custom CSS field, (2) a basic understanding of the overall page layout/structure, and (3) enough knowledge of CSS to change the necessary values to achieve the desired result. For the first one, an Ascendant subscription is required, you don't have access to the custom CSS without it. For the second, here's a quick breakdown:

    The overall page's content width is determined by the width of the id 'content' element. Inside of the id 'content' element, the page's columns are the class 'front-nav-container' element, the class 'main-content-container' element, and the id 'sidebar' element. Each of the 3 interior elements has a percentage-based width, and a set amount of padding on the left and right side.

    Now, for number 3, it just comes down to knowing some CSS basics and the appropriate class or ID names. I've posted them already in the breakdown, so now it's just a matter of applying new rules to them. Essentially you're going to want something that looks roughly like the following.


    .campaign-public-layout #content {
    width: [insert new width here];
    }
    .collapsable-nav-row .front-nav-container {
    width: [insert new width here];
    padding-left: [insert new padding-left here];
    padding-right: [insert new padding-right here];
    }
    .collapsable-nav-row .main-content-container {
    width: [insert new width here];
    padding-left: [insert new padding-left here];
    padding-right: [insert new padding-right here];
    }
    #sidebar {
    width: [insert new width here];
    padding-left: [insert new padding-left here];
    padding-right: [insert new padding-right here];
    }

    How much or little of this you need to change depends on what exactly you want to do. If you only want to make your page's content area bigger, then you probably only need to increase the id 'content' width value and then either adjust your width percentages on the 3 sub elements or give them set values. You can also adjust the padding values to suit your tastes, but depending on how much space you want to use, this may not be necessary.

    Hopefully this is clear and not overboard.

    Post edited by Kallak on

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

  • Keryth987
    Keryth987
    Posts: 858

    Seeing how this old thread seems to be getting attention I'll try here. Cuz I need some help :)

    Trying to use the accordion function. However, I need to figure out how to resize it. Anyhow know what to do? 

    Here's the code I'm using right now


    [accordion]
    [accordion-item] [title] &amp;lt;div class="leftThumbnail" style="position:absolute;left:6px;top:8px;height:100px;width:100px;border-color:black;border-style:solid;border-width:2px;"&amp;gt;&amp;lt;img style="width:100px;height:100px;" src="https://db4sgowjqfwig.cloudfront.net/campaigns/43870/assets/516814/Government_Agents.jpg"&amp;gt;&amp;lt;/div&amp;gt;
    &amp;lt;div class="Title" style="position:absolute;left:140px;top:10px;height:100px;width:500px;"&amp;gt;&amp;lt;img style="" src="https://db4sgowjqfwig.cloudfront.net/campaigns/43870/assets/551035/Government_Agents.png"&amp;gt;
    &amp;lt;/div&amp;gt;[end-title] [content] Test 1 [end-content] [end-accordion-item]
    [accordion-item] [title] Test 2 [end-title] [content] Test 2 [end-content] [end-accordion-item]
    [accordion-item] [title] Test 3 [end-title] [content] Test 3 [end-content] [end-accordion-item]
    [end-accordion]

    And what it looks like can be seen HERE at the bottom of my test page.

     

    Thanks

     

     

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,844

    Welcome back PhoenixMark!

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

  • PhoenixMark
    PhoenixMark
    Posts: 88

    Thanks Kallak,

    I have been tooling around on a test campaign, and your provided CSS worked well... except for individual characters. What did I do wrong? Or how can I fix it? 

    I sure appreciate your help! Nice to see you too.

     

    BTW, here is my new 5e campaign: Calondyr Imperiled WIP

  • gastoff
    gastoff
    Posts: 84

    I've never been able to get the accordion feature to work on character pages. Not sure what causes it to break but that may be what you are running into as well.

    image

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 226

    So, awhile ago I saw the thread with @gastoff asking for the ability to short hand a script that will add custom fonts/backgrounds/features based on either slugs or tags? If I want a certain character's entries to always have the same font and background image, am I adding it manually each page, or is there a div that supports that? The CSS for it just seems kind of.... crunchy... so far.

  • Kallak
    Kallak
    Posts: 1,021

    @PhoenixMark, the width of the individual character page not matching the rest of the pages is actually a bug. I've just recently gotten myself lined up with dev access, so I will be hunting that bug down and fixing it in the near future. In the meantime, you can manually set it to match the rest of the site. The following should work for you:


    body.character-show #content {max-width: [insert width to match your content value];}

    @Keryth987, based on the test page, it looks like you just need the clickable headers to be taller so that you can display your images, correct? Assuming so, you'll want something along these lines:


    .ui-accordion h3 { height:[insert desired height]; }

    Finally, @gastoff, currently the javascript insertables do not work on character pages at all. This is because they were never rolled out to them. As I understand it, the powers that be at that time decided that the subtle push should be toward having players prefer DSTs for use with characters. I have advocated rolling them out for characters to the current powers, and there is a feature review scheduled to see where the development efforts should go (with lesser used things getting less priority, more for more, etc..). If you want them rolled out to characters, make some noise and I can take that to the meeting.

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

  • Keryth987
    Keryth987
    Posts: 858

    @Kallak

    I assume that is CSS, so I put it in, and put an H3 in the code right before the Div, but still nothing

     


    .ui-accordion h3 { height:1000px; }

     

  • gastoff
    gastoff
    Posts: 84 edited January 14

    @Conan_Lybarian, The page slug feature that was rolled out after Kallak took my request to the devs is best suited when wanting to fully customize a single page's elements, like each PC's page. The slugs are also the best option if you are wanting to customize elements of an adventure posts outside the text field that are not site wide. For example, if you wanted all of the background images and parchment style to change when an adventure post is written from Character A or Character B, slugs is the way to go.

    However, if you are only concerned with altering font style/size or other features that are within the text itself (like having each character have their own unique font so it feels like a personalized journal) then the better option in my opinion is just setting up those changes in a custom div tag and then apply that in line.

    For example, on my character journal page, I have a chosen font size and style for my rogue, Perrigren Lee. I added this to the CSS:


    .Perrigren{
    font-family:Shadows Into Light;font-size:22px;
    }

    For any journal entry that I write that is in "his hand", I just wrap it in a div tag:


    <div class="Perrigren">
    TEXT GOES HERE
    </div>

     

    Post edited by gastoff on

    image

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 226

    @gastoff- I'm wanting to do the "characters A's posts look like", with a custom background. I've got the inline for fonts figured out, but what's the code for the background image? I'm stuck at the "what BLEEPING punctuation mark/ space/ command word am I missing!?" point of this particular CSS adventure. 

    Keep up the great work btw. Your stuff looks awesome!

  • gastoff
    gastoff
    Posts: 84 edited January 15

    @Conan_Lybarian, One of the wiki pages on my campaign has an elder god that is all about secrecy and the void, so I wanted to change all the elements on that page so the faded out over time. I also changed the background to a custom background for that page. Here is the CSS I used:


    /*HASTUR FADEOUT*/
    .wiki-page-slug-hastur .see-all-wiki-pages-button {animation: fadeout 4s linear 0s forwards;}
    .wiki-page-slug-hastur .media-library-button.button {animation: fadeout 5s linear 1s forwards;}
    .wiki-page-slug-hastur .section.file-docker {animation: fadeout 2s linear 1s forwards;}
    .wiki-page-slug-hastur .sidebar {animation: fadeout 8s linear 2s forwards;}
    .wiki-page-slug-hastur .front-nav-container {animation: fadeout 2.25s linear 2.5s forwards;}
    .wiki-page-slug-hastur .wiki-page {animation: fadeout1 4s linear 4s forwards;}
    .wiki-page-slug-hastur #header {animation: fadeout 6s linear 7s forwards;}
    .wiki-page-slug-hastur .page-background {opacity:0; background-image:url("https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1028696/Yellow_Sign_BG.png?1576248951";); background-position:center; animation: fadeout2 3s linear 9s forwards;}
    .wiki-page-slug-hastur .campaign-public-header, .wiki-page-slug-hastur #campaign-footer {animation: fadeout1 6s linear 4s forwards;}

    The format to change the background on a single page would be:

    .wiki-page-slug-[YOUR PAGE SLUG] .page-background {background-image:url("PAGE URL");}

    Post edited by gastoff on

    image

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 226

    Thanks @gastoff! I'm off and running with it now. The players are all wanting to start their own journals and writings, and wanted something of their own for each. Anything to get them more engaged, and this is definitely the trick.

  • Keryth987
    Keryth987
    Posts: 858

    So, i figured out what i was trying to do with the Accordion, partially. Now, anyone know how to embed an accordion in an accordion? In other words...

    Title 1

       Title 1a

          Content

       Title 1b

          Content

    Title 2

  • Kallak
    Kallak
    Posts: 1,021

    I don't think I've ever tried to put an accordion inside of another one before. I don't imagine it would work, though (maybe?). What's the intention behind doing so? Organization?

    It would seem like you could just add more sections, and since they are all h3's, it would be equivalent in terms of like the auto-outlining hierarchy for instance.

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

  • Krothos
    Krothos
    Posts: 224

    I'm trying to find the code to change the color of the links at the bottom of each page. I have a lot of different combinations, trying to change the color to #1782d7. It's a bit frustration since I feel I'm so close to figuring it out, but just not quite getting it right.

    .campaign-footer #links.inline-list ul li a {color:#1782d7 !important}

    ul.links.inline-list {color:#1782d7}

    ul.links.inline-list {color:#1782d7 !important}

    ... plus other combinations.

    image

    Any help you could provide would be appreciated.

     

  • Kallak
    Kallak
    Posts: 1,021

    Give this a go:


    .campaign-public-layout #campaign-footer .links li a {color:#1782d7 !important}

     

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

Sign In or Register to comment.

Star Wars - Das Erbe der Jedi-Ritter is September's Campaign of the Month!

Read the feature post on the blog!
Or 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