Aurin777
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
.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
The best source of information can be found in the three 'sticky threads' in the CSS Discussion subforum.
David
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.
https://peacock-knight.obsidianportal.com/wikis/character-background
And tell me what's wrong?
Can you post the code you are using?
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
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.
Thanks again!!
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.
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}
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...
Here's the example:
https://peacock-knight.obsidianportal.com/wikis/the-saga-so-far