Adventure Log Woes

Mr_Motivator
Mr_Motivator
edited August 2015 in Campaign Portal Building
Hey there, im currently having issues where the window space of the adventure log is overlapping the Header at top. There is a lot i wanna do here but for now something easy (maybe easy). How can i lower the content space of my log so it doesn thave this overlap issue?

Im assuming its picking up the code im using on all content windows but is there a way to target the adventure logs?

Ideally i would wanna edit it all so its one giant window rather than having the headline seperate.

https://tmits.obsidianportal.com/adventure-log/welcome-to-your-campaign

Below is the code im using to setup the background for my content windows and i wonder if iv got something that perhaps over rides anything further down?

.adventure-log-show .post-main,
.campaign-public-layout #character-details,
.post-player-secret.post-section.player-secret,
.wiki-page, .wiki-edit,
.post-main,
.character-show .main-content section,
.item-show .main-content section {
background-color : transparent;
background-image: url('http://i1006.photobucket.com/albums/af184/tmits/Middle%20test_zpsz3fnvhw2.png');
background-position:center;
background-size:100%;
position:relative;
}

.post-player-secret.post-section.player-secret:before,
.post-player-secret.post-section.player-secret:after,
.adventure-log-show .post-main:before,
.adventure-log-show .post-main:after,
.wiki-page:after, .wiki-page:before,
.character-show .main-content section:after,
.character-show .main-content section:before,
.item-show .main-content section:after,
.item-show .main-content section:before {
background-color : transparent;
background-size:100%;
position:absolute;
background-repeat:no-repeat;
left:-2px;
width:100%;
height:34px;
content:"";
background-position: center center;
z-index:10;
}

.post-player-secret.post-section.player-secret:before,
.adventure-log-show .post-main:before,
.wiki-page:before,
.character-show .main-content section:before,
.item-show .main-content section:before {
background-image: url('http://i1006.photobucket.com/albums/af184/tmits/Top%20Test_2_zpsxecnw4hr.png');
top:-20px;
left:0px;
}

.post-player-secret.post-section.player-secret:after,
.adventure-log-show .post-main:after,
.wiki-page:after,
.character-show .main-content section:after,
.item-show .main-content section:after {
background-image: url('http://i1006.photobucket.com/albums/af184/tmits/Bottom%20Test_2_zpss4estrqx.png');
bottom:-30px;
left:0px;
}

Any help would be greatly appreciated.

Comments

  • Unknown
    I think, and I apologize if this doesn't get the job done as I am sick and in a bit of a haze, this should be what you are looking for:

    .post-header {
    top:-5px;
    }

    The number I am using may not be enough to pull the header away. You could also probably consider using a bottom here as well to push the post away from it.

    If this doesn't work just message again, I'll come back to it and get you a solution.

    --
    Alex
    "Dragon Age: Requiem":https://da-requiem.obsidianportal.com/
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Where would i need to put this bit of code, alongside the code i have currently? not sure what makes it specifically target my adventure logs.

    Thanks for the help btw
  • Unknown
    This would go into the Custom CSS section of the Settings on the Campaign, assuming that you have an Ascendant Membership and can do Custom CSS. The Custom CSS will be under the Advanced tab in the Settings.

    The way this targets the Adventure Log is through the use of classes in the HTML. The Post Header class, if I recall correctly, essentially only effects things in the Adventure Log (it is not used elsewhere in the HTML). I could be mistaken, as I mentioned, and the code I offered may not accomplish what you are looking for, but it is a starting point for us to reach the desired results.
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Yeah just wondering what class would specifically target my adventure log, im assuming something like

    #campaign-content .adventure-log

    so i wanna end up with:

    #campaign-content .adventure-log
    .post-header { top:-5px;
    }
  • Unknown
    No, you just need the .post-header bit since I believe that is only used for the Adventure Log posts as is
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Nah, didn't move the post i'm afraid, perhaps i have some conflicting code somewhere?

    thanks for the help btw, this is incredibly frustrating/rewarding. I'm by no means a coder more an amateur artist
  • Unknown
    Ok, I kinda thought it might not, since I was half awake when I found that code. Try this instead, I tested it and it seems to work alright, let me know if there are any other issues.

    .adventure-log-show .post-header-container {
    margin-bottom: 30px;
    }
  • Mr_Motivator
    Mr_Motivator
    Posts: 19 edited August 2015
    You star! Worked a treat, space has been restored and it looks that little bit tidier. Thanks :D

    Although you have unleashed a question demond now.

    Hope you dont mind and if im annoying gimme a shout, but i want the map to show its full size and was wondering how i could change the content window to match just for this specific page?

    https://tmits.obsidianportal.com/wiki_pages/locations

    Is there smething that could override my content page stuff just for this specific wiki page?

    thanks again btw :)
    Post edited by Mr_Motivator on
  • Unknown
    Hmm, well, this one will take some thought. I suspect it may be possible to accomplish what you're asking, but it is going to be tricky if it is. I'll get back to you on this if I am able to cobble something up.
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Thanks, much appreciated. Im prob gonna give it a hammering later tonight see what i can also muster.
  • cgregory
    cgregory
    Posts: 779
    This might help,

    You could try giving a class to your image and then adding max-width:none to that class (you don't want to give max-width:none to all your images)

    In CSS
    .BigDiv {
    position:absolute;
    left:0;
    right:0;
    width:100%;
    max-width:none;
    }

    .MyBigImage {
    max-width:none;
    }

    In Wiki Page


    [[File:495782 | class=media-item-align-center | ShacklesMap.jpg]]









    "TestPage with two images":https://dead-men-tell-no-tales.obsidianportal.com/wikis/mytestpage

    One has a BigDiv class then other has a BigDiv and MyBigImage class as you can see the one expands beyond the container to it's full width.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Unknown
    And there you have it, not the cleanest looking, but spot on does what is wanted.
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Hmm this is frustrating, doesnt seem to work. The image remains constrained.

    .BigDiv { position:absolute; left:0; right:0; width:100%; max-width:none;
    }

    .MyBigImage { max-width:none;
    }

    is in my Advance CSS field at the top saved out and


    [[File:495949 | class=media-item-align-center | Map.jpg]]


    is in my wiki page, im either missing something or there is a conflicting bit of code in my CSS

    admirable attempt though :) prob messed it up on my end but not sure how
  • cgregory
    cgregory
    Posts: 779
    I'm on my iPad so I can't look at your css, but my initial guess is you didn't create a MyBigImage img class.

    You need to look in your pages source code to find what the src for your img class should be.

    Do you notice that the default embedded img code that obsidian portal creates looks like

    [[file:blah..blah.| map.jpg]] that doesn't allow you to give the img a class.

    So you need to find the actual source path of the image.

    It will be something like cloudfront.net/campaigns/......./map.jpg

    I can find post your map's source file path once I'm in front of a real computer and can look at the source code for your page.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Unknown
    Got it, here is the code:



    Just C&P that to where you presently have code for the image.
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    So does this:



    Effectivly need to go:


    [[File:495949 | class=media-item-align-center | Map.jpg]]
  • Unknown
    Odd, the image file does not appear to be on OP anymore. Ok, try to reupload your map into your bucket, then put it back on the page normally so I can regrab the code for it.
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Righto, ill jump on this once i get home from work.
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Right so i have the image posted in the wiki now, i also have the map uploaded somewhere in my images. Is that an ok format?
  • cgregory
    cgregory
    Posts: 779
    yeah so what you want is in the css

    .BigDiv { position:absolute; left:0; right:0; width:100%; max-width:none;
    }

    .MyBigImage { max-width:none;
    }

    in the wiki





    So on my "Test Page":https://dead-men-tell-no-tales.obsidianportal.com/wikis/mytestpage you can see what your map would look like.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    This is the odd thing, iv currently got it on my page and the image still isnt displaying.

    I deleted ALL of my CSS code and only had the lines you asked, it still didnt work. I thought at first that i may have something interferring but it doesnt seem to be a case.

    Am i missing a tick box somewhere?

    Is there perhaps a switch i need to flip so i can define my own rules such as Mybigimage?

    sorry to be a pain
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    It looks as if it doesnt want to define the rules created. I tried even using your code for the shackle map and still no dice
  • cgregory
    cgregory
    Posts: 779
    I'll fire up my PC and take a look at the source code on your page and report back what I see.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Thanks :)
  • cgregory
    cgregory
    Posts: 779
    Your not being a bother, I just took a while responding due to my bard dying a horrible death at the hands of a wereboar and was busy making a new character.

    No switch or checkbox needed, but I am noticing something wierd with your classes.

    First thing I'm noticing is your classes seem to be having two double quotes around them

    yours


    mine


    looks like maybe your class is using the wrong type of quotes around them. Try deleting the quotes around the classes in your wiki page and manually retype them. I know that sometimes when I copy quotes they get copy across as the wrong type of quotes.

    Also your image is currently missing a src path, but i figured you removed that while playing around.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Thats a shame about the bard, i hope it was at least an interesting death :D

    So deleted the quotes and re-wrote them and it worked. Now we got other problems lol Image isnt centered and my parchment paper seems to be overlapping?
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Whats even worse is i cant click the edit page button now lol cause the image is overlapping it bleughghghghghg
  • Mr_Motivator
    Mr_Motivator
    Posts: 19
    Sorted it :) Now to tinker and clean it up so the parchment is surrounding it in some degree.

    Thanks for the help dude, very kind of you
Sign In or Register to comment.

August 2022
In Over Their Heads

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