Custom pages shorthand CSS

Conan_Lybarian
Conan_Lybarian
edited January 2020 in Campaign Portal Building

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?

Post edited by Conan_Lybarian on

Comments

  • gastoff
    gastoff
    Posts: 136

    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:


    .Alysia {
    background-image:url("https://i.pinimg.com/originals/76/2c/38/762c387f64125c3de36c4890ad53806d.jpg";);
    background-size:100%;
    background-position:center;
    padding:10px 60px;
    font-size:20px;
    }

    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:


    body.campaign-public-layout .post-section{
    padding:0;
    }

    This saves you from having to add each page's unique slug to the custom CSS each time a journal entry is made.

    image

  • gastoff
    gastoff
    Posts: 136

    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:

    image

     

     

    image

    image

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    Not in front of a computer right now, but that looks exactly like what I'm looking for! And for the text boxes too :-)

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

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

  • gastoff
    gastoff
    Posts: 136

    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.

    image

  • cgregory
    cgregory
    Posts: 780 edited January 2020

    You might be looking for

    body[class^="adventure-log-show adventure-log-slug-alysia"]

    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240 edited January 2020

    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?

    On review, I have several custom lines for the background for adventure logs across the campaign. Would an !important tag help here maybe?

    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...
    Post edited by Conan_Lybarian on

  • cgregory
    cgregory
    Posts: 780

    I tested it out on a test campaign and it worked.

    body[class^="adventure-log-show adventure-log-slug-the"].adventure-log-show .post-section.post-main  {background: transparent;}

    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!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

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

Sign In or Register to comment.

March 2024
Wrath of the Highborn

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