Noob CSS

Aurin777
edited May 2014 in Campaign Portal Building
Hey guys, new to the boards and new to CSS! Please forgive my very simple questions, as I'm sure that I will have many. To start off, is there a list of classes that can be altered? I've been poking around with "inspect element" to try to figure some of them out and then using trial and error, but a list would be helpful. Specifically, I'd like to know the class to change the adventure log summary text (defaults to gray, and I cant seem to find the place to change it). Thanks!

Comments

  • Rykros
    Rykros
    Posts: 22
    I'm quite a noob, too, but thanks to the help of Bortas, I think this is a small list that you're looking for. I highly doubt it is a complete list, nor am I 100% sure this is what you're asking for. At least, this may help you get a start.

    .campaign-public-layout .wiki-page
    .campaign-public-layout #character-details
    .campaign-public-layout .adventure-log-post
    .campaign-landing-show .campaign-landing-page-container
    .campaign-public-layout .section
    .campaign-public-layout .post-main
    body.campaign-public-layout .post-main.post-section
    .campaign-public-layout .post-section.post-main
  • bluesguy
    bluesguy
    Posts: 127
    Hi,

    The best source of information can be found in the three 'sticky threads' in the CSS Discussion subforum.

    David
  • Basileus
    Basileus
    Posts: 589 edited May 2014
    Agreed with bluesguy.

    While it would be possible to go through the default application CSS and pull all the classes, IDs, and elements, I'm not sure a list by itself would be very useful (since the context is necessary to understand how it can be used, and selectors can be combined). It would be a bit like having a copy of the periodic table and saying "now go do chemistry!"

    I would recommend looking at some of the templates that have been posted.

    Couple examples, I just updated the "iGlass":https://outremer.obsidianportal.com/wikis/iglass (Sci-fi) and "Stonemason's Ledger":https://theedgeofnight.obsidianportal.com/wikis/stonemasons-ledger (Fantasy) templates with my current CSS as of today. I don't do anything fancy like create my own classes to achieve special effects, but they should be solid examples of customizing the default classes. Not perfectly organized, but everything works and enough comments to understand what I am trying to do with each section.
    Post edited by Basileus on
  • Aurin777
    Posts: 10
    I'm getting stuck trying to create a table. When I use the TryIt Editor on W3 schools, it appears fine, but when I put it into OP, it turns out funny. Can someone please take a look here:

    https://peacock-knight.obsidianportal.com/wikis/character-background

    And tell me what's wrong?
  • Basileus
    Basileus
    Posts: 589 edited August 2014
    You have different numbers of cells in each table row. To fix you could eithermake the top and bottom cell span multiple columns, or you could split up the top and bottom image into three images (basically add "corner pieces").

    Can you post the code you are using?
    Post edited by Basileus on
  • Aurin777
    Posts: 10
    Thanks for the quick response!

    I did make the top and bottom pull across multiple rows, I had thought. Here's the code that I am using:



    table, th, td
    {
    border-collapse:collapse;
    border:0px solid black;
    }
    th, td
    {
    padding:0px;
    }












    ParagraphParagraphParagraphParagraphParagraph hahahahaha haha haah ahaha hahaha hahahaha hahaha hahaaah aaha aha aaah
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    It's probably worth noting that _colspan_ and _rowspan_ aren't allowed by the parser, so they just disappear when you try to use them.
  • Aurin777
    Posts: 10
    That is probably a big part of it. Is there a way to work around it in the parser? Is there a quick way to do what I'm trying to tackle here?
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Since you're using opaque images, there's actually a super nice and easy way to do this using multiple background images:

    You'll want a handy class in your CSS:

    bc. .sidebar{
    background-image:
    url('https://db4sgowjqfwig.cloudfront.net/campaigns/90506/assets/358151/Table-Top-Thin_-_Top_Image.jpg?1407960997'),
    url('https://db4sgowjqfwig.cloudfront.net/campaigns/90506/assets/358152/Table-Top-Thin_-_Bottom_Image.jpg?1407961030'),
    url('https://db4sgowjqfwig.cloudfront.net/campaigns/90506/assets/358232/Table-Top-Thin_-_left.jpg?1407978364'),
    url('https://db4sgowjqfwig.cloudfront.net/campaigns/90506/assets/358234/Table-Top-Thin_-_right.jpg?1407978384');
    background-repeat: no-repeat,no-repeat,repeat-y,repeat-y;
    background-position: top,bottom,left,right;
    width:288px;
    padding:50px 20px 20px 20px;
    }

    And then your content is as simple as:

    bc.
    ParagraphParagraphParagraphParagraphParagraph hahahahaha haha haah ahaha hahaha hahahaha hahaha hahaaah aaha aha aaah


    If you decide you want to use transparent borders that's a little more complex, but still doable. Let me know and I can set up an example.
  • Aurin777
    Posts: 10
    ChainsawXIV, thanks so much for the help on this. I got it all working and squared away! One quick question - is there a way to create a little additional buffer between the text and the floating object? the body text butts right up against the border of the table. Take a gander here: https://peacock-knight.obsidianportal.com/wikis/character-background
    Thanks again!!
  • Basileus
    Basileus
    Posts: 589 edited August 2014
    @Aurin:

    Simply add a small margin to the CSS for your .sidebar-top-rightside class. Something like this:

    @margin: 1em;@

    Or you could use the "margin-left" property instead if you only want extra space on the left side and not the top and bottom.
    Post edited by Basileus on
  • Aurin777
    Posts: 10
    This was incredibly helpful, thank you both! My side bar is now perfect.

    I'm currently fiddling around with a few different side bars and nesting a table within a table, so I'm sure I'll have questions on that shortly :)

    One other question - does anyone know why my adventure log header font color is grey here (https://peacock-knight.obsidianportal.com/adventure-log) but white when you click onto the indivudal logs such as here (https://peacock-knight.obsidianportal.com/adventure-log/social-obligation)? I'm trying to get it white in both places. I'm using this:

    .adventure-log-index-title{color: white !important}
  • Basileus
    Basileus
    Posts: 589 edited August 2014
    A default rule in the site's CSS is more specific and thus taking precedence. (that text is actually a child "a" element of the ".adventure-log-index-title" class)

    Try this:

    @body.campaign-public-layout .title a {color: white;}@

    I just pulled the selector from the default application CSS that was currently active on your page. Since your custom CSS is processed after the application's default CSS, it should take precedence - and you get to avoid the infamous !important tag...
    Post edited by Basileus on
  • Aurin777
    Posts: 10
    That worked for the adventure log - but now the titles for the characters and items are white (while I need those to still be black). Is there a more focused "selector"?
  • Aurin777
    Posts: 10
    Guys - thanks again for all of the help on this stuff. I ran into another outstanding thing that I can't seem to fix. I can't remove the space between "a simple errand" (the image) and the text with the aligned-right floating table without the formatting going haywire. I think a simple fix would be to make the space between the image and the text smaller. Right now I've inserted < P > to do that. Is there a way for me to put a break that's smaller than a full carriage return?

    Here's the example:

    https://peacock-knight.obsidianportal.com/wikis/the-saga-so-far
Sign In or Register to comment.

August 2022
In Over Their Heads

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