Need help with CSS

Sting52jb
Sting52jb
edited August 2020 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,090

    @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
  • Kallak
    Kallak
    Posts: 1,090

    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
  • 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,090

    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
  • Kallak
    Kallak
    Posts: 1,090

    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
  • 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: 240

    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,090

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

     

  • PhoenixMark
    PhoenixMark
    Posts: 90

    Hi Friends. I am starting a new campaign after a long dormancy. I forgot how to code CSS for custom header fonts and sizes. I have older campaigns but they don't seem to work. I just need the basic CSS and I know I can figure out the rest. Thanks

    ~Mark

  • thaen
    thaen
    Posts: 1,064

    @PhoenixMark, welcome back!

    Can you give an example of a Campaign where you've done this before or one where you've seen it done?  I looked at a few of your older Campaigns, and they all had the header text "baked" into the image, so it wasn't separate, and wouldn't be affected by CSS.  Or maybe I'm misunderstanding what effect you're wanting to create?

    Obsidian Portal Developer

  • PhoenixMark
    PhoenixMark
    Posts: 90

    @thaen, thanks.

    Below is a link to a test page for a campaign where it works right and for my new campaign. Also some screen shots of "how page headers look" in CSS for each campaign. I have no idea what I am doing wrong. Any help is appreciated.

    Shimmering Kingdoms

    Test Page

    Nothing Ventured

    Test Page

     

     

  • thaen
    thaen
    Posts: 1,064

    @PhoenixMark, ah!  You meant actual html headers...not the Campaign "header" (aka Banner)...sorry for the confusion.

    Thanks for the screenshots, those are very helpful!  I think I see the issue.  On this line:

    .campaign-public-layout .main-content h1 {font-family: EB Garamond:color:#fab04a;text-align:center;margin-top:5px;margin-bottom:7px;border-bottom:1px solid #dcbf86;font-size:30pt;}

    ...the colon (":") after "EB Garamond" should be a semicolon (";").

    Also, this may not be affecting anything, but on this line:

    .campaign-public-layout .main-content h2 {font-family: EB Garamond;color:#fab04a;text-align:center;margin-top:5px;margin-bottom:7px;border-bottom:1px solid #dcbf86;font-size:40pt;text-shadow: 1px 2px #9d0912;};}

    ... that last ";}" is a duplicate and might confuse the browser.

    Let me know if that fixes it!

    Obsidian Portal Developer

  • Tigervirgo
    Tigervirgo
    Posts: 3 edited January 2021

    Transparent Background & Black Text Color

    Okay, so I've decided to jump into this rabit hole of CSS after upgrading my OP account. I was a pro at HTML codes because of the Basic Membership but CSS is definitely new to me. 

    So far everything is going pretty good BUT my black fonts for my wiki pages are being hidden by the transparent background. I don't want to go through all of my wiki pages to change EVERY page individually to the white text and font size 20.

    I spent years coding everything for this RPG system (Marvel Super Heroes) in HTML & I'm looking for a quick Custom CSS code to apply to this problem. To emphisize the amount of time & work I have put into this, imagine taking D&D 5E Player's Handbook & adding a wiki page for each spell, FEAT, weapon, etc..  (Yes, I am that thorough- lol)

    Here is what I posted in the Custom CSS of the Advance section of Settings.

    .campaign-landing-page-container { background-color:transparent !important; } body.campaign-public-layout .post-section.post-main { background-color:transparent !important; }

    .campaign-public-layout .main-content h1, .campaign-public-layout .main-content h2, .campaign-public-layout .main-content h3, .campaign-public-layout .main-content h4, .campaign-public-layout .main-content h5, .campaign-public-layout .main-content h6 {color:#FFFFFF;}

    Thoughts? Suggestions? 

    Post edited by Tigervirgo on
  • thaen
    thaen
    Posts: 1,064

    @Tigervirgo, welcome!

    From this page, it looks like you've got this figured out as the heading is now a gold color.

    https://marvel-universe.obsidianportal.com/wikis/armour-skin

    Do you still need help with this?  If so, can you post a couple of the pages where you want to see the changes and we can go from there?

    Obsidian Portal Developer

  • Tigervirgo
    Tigervirgo
    Posts: 3

    @thaen Yea, had a bit of frustrations but working it out. The previous discussions help as you can tell - lol. Hope to have this done soon. SO much fun though :)

  • thaen
    thaen
    Posts: 1,064

    @Tigervirgo, congrats on growing the new CSS skill!  If you do need any help, feel free to ask here again.

    Obsidian Portal Developer

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