Mr_Motivator
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
.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/
Thanks for the help btw
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.
#campaign-content .adventure-log
so i wanna end up with:
#campaign-content .adventure-log
.post-header { top:-5px;
}
thanks for the help btw, this is incredibly frustrating/rewarding. I'm by no means a coder more an amateur artist
.adventure-log-show .post-header-container {
margin-bottom: 30px;
}
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 :)
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!
XCom: Defiance - Campaign of the Month November 2016
.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
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!
XCom: Defiance - Campaign of the Month November 2016
Just C&P that to where you presently have code for the image.
Effectivly need to go:
[[File:495949 | class=media-item-align-center | Map.jpg]]
.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!
XCom: Defiance - Campaign of the Month November 2016
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
They are among us!
XCom: Defiance - Campaign of the Month November 2016
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!
XCom: Defiance - Campaign of the Month November 2016
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?
Thanks for the help dude, very kind of you