So I've started doing a few custom pages for my players who want to create and post on the portal
https://thecoldtruce.obsidianportal.com/adventure-log/alysia-s-journal-the-way-to-faxton
I'm trying to figure out though if there is a way to shorthand one line of CSS that would capture a partial attribute so that I don't have to write a novel as the custom pages add up. For example, all of "Alysia's Jounral" start the title the same way.
body.adventure-log-slug-alysia-s-journal-the-way-to-faxton .post-main,
body.adventure-log-show.adventure-log-slug-alysia-s-journal-the-way-to-faxton .post-header-container{;background-image:url(https://i.pinimg.com/originals/76/2c/38/762c387f64125c3de36c4890ad53806d.jpg);background-position:center; background-size:100%;}
But I've found some rules for some partial capture:
[class|="alysia"] {background-image:url(https://i.pinimg.com/originals/76/2c/38/762c387f64125c3de36c4890ad53806d.jpg);background-position:center; background-size:100%;}
It's just not coming out right. Anyone see what I'm missing?
And also, because I'm a goon... How do you do the little code boxes in the forums so the formatting doesn't look like I'm illiterate?
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
What specifically is not coming out right?
Since you are not changing the actual page background and are only adjusting the content of the journal posts, you should be able to create a custom CSS class to handle each character's style and then just add a single line of code at the beginning of each entry to make it all work.
Something like:
Then wrap your entire journal text in a div class tag:
<div class="Alysia">
JOURNAL TEXT
</div>
If you want it to cover whatever journal background you have set sitewide, you may need to remove the padding from the parent element so the custom background stretches to fill the entire space:
This saves you from having to add each page's unique slug to the custom CSS each time a journal entry is made.
Oh, and the code fields in the forum are made using the "Insert Code Snippet" tool. Be sure to preview your post before submitting since sometimes the code breaks if the wrong style is selected:
Not in front of a computer right now, but that looks exactly like what I'm looking for! And for the text boxes too :-)
@Gastoff So that CSS doesn't seem to be working. Is it because of trying to apply it as a div just around the text itself? Because I'm going after any page who's slug starts with "alysia", not the content of the post itself.
I misunderstood what all you were trying to accomplish with the CSS and which elements you were looking to have customized, so the CSS I listed might not be work as you are hoping. Wrapping the text with a div tag can be used to alter any aspect of the post itself, including the font, size, color, background, padding, etc:
However, since the post is nested inside other elements on the page, you can't alter the PAGE background using this method. Notice that each of the examples in the CSS test above have the same default campaign background. Unfortunately, the only way I know how to alter a specific page's background separate from the rest of the campaign is to use the page slug method and call out that specific page in the Custom CSS for each page you want altered.
I am still fairly new to CSS, but I know you can utilize wildcards in your CSS, and this might be your ticket to using a single line of CSS on the back end to address any page that includes "Alysia" in its slug.
You might be looking for
They are among us!
XCom: Defiance - Campaign of the Month November 2016
I hate to say it @cgregory, but unless I'm missing something, this isn't applying it either. Maybe I need to go thru my total custom CSS log and clean it up. Maybe I have some counterproductive or redundant lines that could be stopping this from working?
Ugh- on *second* review- I could probably due with less Important! tags. I can tell how I've improved as I go thru and see the chunky code I've just been layering as I've been learning...On review, I have several custom lines for the background for adventure logs across the campaign. Would an !important tag help here maybe?
I tested it out on a test campaign and it worked.
Here is the campaign that I tested it on.
https://dead-men-tell-no-tales.obsidianportal.com/adventure-log
Any adventure log starting with "the" will have a transparent background such as
https://dead-men-tell-no-tales.obsidianportal.com/adventure-log/the-test
While those without it will have the standard white background.
https://dead-men-tell-no-tales.obsidianportal.com/adventure-log/welcome-to-your-campaign
They are among us!
XCom: Defiance - Campaign of the Month November 2016
@cgregory - It finally worked! It's weird, but it wasn't working until I inspected the elements of your test page, copied and pasted the exact same code you have posted here, and then BAM! I appreciate it! I just have to figure out the header, but I'm sure I can land it now. Thanks again for the time you put in for the OP community.