Need help with CSS

Sting52jb
Sting52jb
edited August 3 in Custom CSS Discussions

Hey everyone I've been on OP since the beginning but I've never really done anything crazy with any of my campaigns.  recently I've decided to spice them up a bit and so I started a new one and I wanted to try some new things but I've ran into a few problems.  

So first I can't figure out how get my text boxes to be transparent so the background image is seen behind my writing. and second how do I get the images to upload into my little boxes that I created following the tutorial.  I followed the code in the FAQ section but it didn't work. 

And my final question is how can I get a game system added to the list in the hope for a Dynamic Character Sheet Template to be made for it? I'm running my game using the Esper Gensis rules with is a port of the 5th Edition D&D rules. Thanks for any help. 



https://thedarkstarchronicles.obsidianportal.com/wikis/main-page

 

Post edited by OPAdmin on

Comments

  • Kallak
    Kallak
    Posts: 1,032

    @Sting52jb, first and foremost, I think it's awesome to see you trying some of these more advanced things out - so bravo on that front! They can certainly be challenging in the beginning, but proficiency will come quicker than you think. That said, let me jump into your questions:

    Firstly, for the page background, all you need to do is swap the background-color to be "transparent" from "white". So in your CSS, you would want to put (using the wiki page as an example):


    .campaign-public-layout .post-section.post-main {
    background-color: transparent;
    }

    Regarding the menu block item images, when I wrote the article, I just put a sort of template style entry for how the background images would be applied. The idea was to try and save some space in the article, but I can see now how that might not be sufficient for folks just starting out, so let me supplement that for you here with a specific example on your particular page.

    I note that you appear to already have (at least some of) the images for the menu uploaded to your Media Library, so that's good. I'm going to use the "Corporations" block and your "Corporations.jpg" file to show you how it's done. Then you can give it a go with the other ones and see if you get stuck (and if you do, by all means let me know and I'll help get you squared away).

    In your menu, the "Corporations" link is associated with the "my-menu-5" class, so this is the selector we will use to add the background image and size it.


    .my-menu-5 {
    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099976/Corporations.jpg?1595963007');
    background-size: 100% 150px;
    background-repeat: no-repeat;
    }

    We begin by assigning the image as the background for the block via the "background-image" property. Our image is significantly larger than our block however, so we need to scale it down to fit better inside our box. Now, in this particular case, the image in question is a landscape oriented rectangle, just like our block, so we can simply set the width to be 100% of the block, and then set the height to be the same 150px as our block. We do this with the "background-size" property. For good measure, we make sure to set things up so that the image doesn't repeat.

    An important thing to note is that our "background-size" property will not necessarily be universal all of our menu items. If you wish to use a portrait oriented rectangle image, or a square image, then the "100% 150px" value could result in some pretty noticeable distortions. Depending on the images you have selected, you may need to play with these values, or only show part of the image. You can scale the image with "background-size" and then move which part of the image is in the viewable area with the "background-position" property (I encourage you to do some googling on that if you end up needing it).

    Hopefully this clarifies some things, let me know if you get stuck or need any additional help.

    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)

  • Kallak
    Kallak
    Posts: 1,032

    Oh, almost forgot. I have added Esper Genesis to the game systems listing. Hopefully it won't take too long for someone to make a DST for it.

    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)

  • Sting52jb
    Sting52jb
    Posts: 7

    Okay sweet that was easy enough but for some reason my 7th box wont change the photo. 

     

    .my-menu-1 {

    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099892/PC_s.jpg?1595929326';);

    background-size: 100% 150px;

    background-repeat: no-repeat;

    }

    .my-menu-2 {

    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099973/Races.jpg?1595963006';);

    background-size: 100% 200px;

    background-repeat: no-repeat;

    }

    .my-menu-3 {

    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099975/NPCs.jpg?1595963006';);

    background-size: 100% 275px;

    background-repeat: no-repeat;

    }

    .my-menu-4 {

    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099978/Government.jpg?1595963008';);

    background-size: 100% 150px;

    background-repeat: no-repeat;

    }

    .my-menu-5 {

    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099976/Corporations.jpg?1595963007';);

    background-size: 100% 150px;

    background-repeat: no-repeat;

    }

    .my-menu-6 {

    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099977/Organizations.jpg?1595963007';);

    background-size: 100% 150px;

    background-repeat: no-repeat;

    }

    .my-menu-7 {

    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099979/Worlds.jpg?1595963008';);

    background-size: 100% 150px;

    background-repeat: no-repeat;

    }

    .my-menu-8 {

    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099980/Shipyards.jpg?1595963009';);

    background-size: 100% 150px;

    background-repeat: no-repeat;

    }

    .my-menu-9 {

    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/232666/assets/1099974/Creatures.jpg?1595963006';);

    background-size: 100% 300px;

    background-repeat: no-repeat;

    }

     

    is all my code don't know what's wrong the others all worked easy enough. 

  • Sting52jb
    Sting52jb
    Posts: 7

    also that was the code I already had inputted to make the backgrounds transparent but something must be contradicting it in some other code because it doesn't change. I'll mess around with it more tomorrow I guess. 

  • Kallak
    Kallak
    Posts: 1,032

    There error looks to be in the HTML. The class name currently assigned to the 7th block is "my-menu-4", so it's using the rules from your 4th block, which is why the image "won't change".

    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)

  • Kallak
    Kallak
    Posts: 1,032

    Also, I see the issue with the transparency, the original white color addition has the body tag at the front of the selector, so the snippet I posted was less specific and thus not a proper overwrite. This should work for you:


    body.campaign-public-layout .post-section.post-main {
    background-color: transparent;
    }

     

    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)

  • Sting52jb
    Sting52jb
    Posts: 7

    Thanks Kallak ya i figured out the problem with the immage.  I almost made the mistake big time in my Player Races as well but caught it before i started uploading the photos. 

    I will try the transpanency and see how that works now. 

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 229

    Hey @Sting52jb- this is already looking great! I'm definitely going to be tracking this. Esper Genesis is a super cool system too.

  • Sting52jb
    Sting52jb
    Posts: 7

    Thanks @Conan_Lybarian  I'm enjoying getting back into this and this may well get me back into working on my original campaign.  We shall see. 

     

  • Sting52jb
    Sting52jb
    Posts: 7

    Okay i'm now running into some new problems I've been able to get all my pages to have a transparent background but then the words are not readable so i use the following code to make the readable 


    p {
    color: white;
    }

    which worked but for some reason it made my front page loose its transparency and doesn't change the title color which is still dark and unreadable any suggestions? 

    I've been racking my brain on this for hours. 

     

  • Kallak
    Kallak
    Posts: 1,032

    This should do it for you:


    .campaign-landing-show .campaign-landing-page-container {
    background-color: transparent;
    }

    Also, (and optionally), you can add it to your other transparent background declaration if desired. The basic format for setting up multiple things to use the same rules is to separate them with a comma, so like so:


    .element-1, .element-2 {
    background-color: transparent;
    }

    Obviously, you don't have to combine anything, but it saves space.

    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)

  • Sting52jb
    Sting52jb
    Posts: 7

    Thanks @Kallak you have been a huge help.  okay that makes sense. My code probably looks like garbage as i'm just taking bits from hear and there and plugging it in to make it work. 

     

Sign In or Register to comment.

Get your heroism on with Freedomverse! October'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