You can use _background-attachment:fixed_, which will simply cause the background image to remain stationary behind your content. Note though that the background image will then be positioned relative to the whole page, not the element you put it on, so you'll have to fiddle with its positioning using _background-position_, and check it at various window widths to make sure it stays in the right place. It may or may not be possible to make it do what you want, depending on what you're using it for. (It also tends to look pretty weird in my opinion, but of course your mileage may vary...)
I tried both Kallak and Chainsaw's approaches, and the background-attachment:fixed seems to work the best for what I was trying to do. I greatly appreciate both of your replies, thanks :)
Okay...so last time I really tried to dive into OP was over a year now i think...or roughly a year... Anyway, I'm using some pretty dark colors that tend to blend some areas together(namely the forums and dashboard) and have been using .large-12 to put borders around the sections. This works great....except the title area on the .public side is also .large-12 and I can't for the life of me figure out how to separate the two. The two areas also share the .columns and I havn't been able to figure out any other way to separate the two. I could just make and add a banner and that would hide the outline or just use it as is for separation but I'd rather nix the outline on the header areas.
"Parade of Black":https://a-parade-of-black.obsidianportal.com/dashboard
Without looking at any specifics, if you're just trying to apply CSS to that area and not to similar classes in the public areas, it sounds like you just need to these classes to your selectors:
So, for example, if you wanted to apply CSS to just items of the .large-12 class in your private pages (dashboard, forums, calendar), you use a selector along the lines of:
Thank you Basileus. Like I said, roughly if not well over a year and I hadn't mastered the CSS yet back then. So, much learned has been forgotten. That was perfect.
Are you Ascendant GambleMoments? If so, scroll down to my parchments code on my "CSS Page":https://a-god-rebuilt.obsidianportal.com/wikis/css
killervp
"A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
Over 350 Fans, and Looking for More!
I recently helped a user in a ticket out with his request to CSS the navigation block into a horizontal bar across the top of the wiki. KillerVP rightly suggested others might find it useful, so here's a "chunk of CSS":http://omnichron.net/external/op/templates/horizontal-nav.css for posterity. Let me know if you have questions.
Hey, Chainsaw, thank you so much for your help with that. I do have one more question actually. I was hoping to get the nav bar at the top to center over the wiki pages/character/adventure log ect. instead of centering over the whole page. It just looks a bit odd. I realize that I can play around with the numbers and get it to work on my desktop but is there a way to do that dynamically so it works across platforms? Or could I have the bar itself extend across the whole page with the text in the middle? That might work better visually.
So I have a CSS question, I guess I'll post it here. Twiggyleaf told me I should expand my text area background, and he is completely right, I should, (specifically on my race page, if nowhere else) but I can't seem to get it to expand properly. I can get the image I have to expand, but it ends up just cutting the image off on the sides, rather than expanding the area. (if that makes sense) I've tried a couple of ways, but have included a link to my code to see if anyone can find where I should be expanding it. Or should I just enter a new code for the races page that expands the background?
Any help is appreciated!
My "CSS":https://terrasia.obsidianportal.com/wikis/css
When I examine your site's main-content-container class it's showing a width of 58.33%. I suspect this is due to the margins and padding set elsewhere in your css for main-content class statements. If I go in and expand the main-content-container to 100%; it works; although 80% works better with your forced left-margin. I've not checked how badly doing this mangles your right-side columns.
Chainsaw XVI posted a few tricks that included expanding the text area on a site and shifting other things about some, he'd be the best one to confirm my suspicions.
Hope this helps.
--
Ketherian
"Signs & Portends":swtwc.obsidianportal.com - A young family has gone missing in a snowstorm.
"Dwarves of Koldukar":dwarves-1.obsidianportal.com - Trunau!!
"In a certain realm":inacertainrealm.obsidianportal.com - Where Faerun meets Russian myth.
For anyone else thinking about this, you can go into Settings|Advanced and click in the "Content Max Width" bar, using arrows at the right of the bar to increase the width of the central text box.
twigs
Post edited by twiggyleaf on
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
So for anyone still using CSS to make dark edit boxes and light text, the new In-line editor has some extremely local rules that force the background to white but not the text to black under the SOURCE button. So without doing hours of digging to find the right parameters a liberal dose of !important in the Textarea and :focus CSS rules make them readable while using the SOURCE button. I won't touch any old pages like this, mind you, but I may try creating some new pages on an under construction campaign.
I see it has been a while since anyone has posted here. I am trying to get back into the swing of OP, but am running up against a few issues, not least of which is my abysmal memory.
First, I am trying to center a particular interactive map on the page, rather than it being left aligned.
Second, while trying to make it work, I thought I might add some CSS to see if that would help. For some reason any CSS I add vanishes as soon as I refresh the CSS page. I have no idea how I messed all that up. If anyone can help me fix this, I would be grateful.
OK. So I have my menu up above in my new Cyberpunk 2077 campaign but I am wondering how to get the right sidebar to go below everything and be more of a footnote kind of thing. Any help would be much appreciated.
I am hoping that once I move it to the bottom I can center the entire area on the logo. Right now it is to the left leaving space for the sidebar I am guessing.
Oh. And I want an exception to be the character's page because I do want their photograph to show up on the right on those pages.
Also I would like to keep the Adventure Log Sidebar like it was originally.
Obviously if you change the width of your .columns.main-content-container.dynamic-sheet-width class to something larger (since you no longer have a sidebar) then you will want to change it back for your character sheets using body.character-show .columns.main-content-container.dynamic-sheet-width
Thank you so much cgregory! That is what I was looking for. Almost. The only problem is that now I have the main body too far to the left and the sidebar below too far to the right. Is there any way to just center them both to the menu and keep them the same width?
Crap. Fix one thing and break another. How do I keep the Adventure Log sections the same as they were before? I tried a variation of your fix above but it didn't work.
Thanks cgregory. That helped a lot. However, after some thought I think I will just go back to the regular layout. I might revisit it later though so that advice will come in handy.
I need help trying to figure out how to get my campaign looking good when viewed on a mobile device, currently it looks all messed up. When viewed on a PC, it looks fine (as far as I can tell)
Comments
"Parade of Black":https://a-parade-of-black.obsidianportal.com/dashboard
~Weasel0
A Parade of Black | ShadowRunHack |
Where I play with CSS code
@[email protected]
versus
@[email protected]
So, for example, if you wanted to apply CSS to just items of the .large-12 class in your private pages (dashboard, forums, calendar), you use a selector along the lines of:
@.campaign-dashboard-layout .large-12 {property: value;}@
Just remember that whatever you use in your selectors that the order should go from general to specific.
~Weasel0
A Parade of Black | ShadowRunHack |
Where I play with CSS code
killervp
"A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
Over 350 Fans, and Looking for More!
Just trying to help out.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Just trying to help out.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
!http://www.solvencyiinews.com/wp-content/uploads/2012/07/morepower.png!
~Weasel0
A Parade of Black | ShadowRunHack |
Where I play with CSS code
^best attempt at the Tim Allen grunt
Any help is appreciated!
My "CSS":https://terrasia.obsidianportal.com/wikis/css
When I examine your site's main-content-container class it's showing a width of 58.33%. I suspect this is due to the margins and padding set elsewhere in your css for main-content class statements. If I go in and expand the main-content-container to 100%; it works; although 80% works better with your forced left-margin. I've not checked how badly doing this mangles your right-side columns.
Chainsaw XVI posted a few tricks that included expanding the text area on a site and shifting other things about some, he'd be the best one to confirm my suspicions.
Hope this helps.
--
Ketherian
"Signs & Portends":swtwc.obsidianportal.com - A young family has gone missing in a snowstorm.
"Dwarves of Koldukar":dwarves-1.obsidianportal.com - Trunau!!
"In a certain realm":inacertainrealm.obsidianportal.com - Where Faerun meets Russian myth.
Signs & Portends, Dwarves of Lost Koldukar, In a certain realm
For anyone else thinking about this, you can go into Settings|Advanced and click in the "Content Max Width" bar, using arrows at the right of the bar to increase the width of the central text box.
twigs
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
~Weasel0
A Parade of Black | ShadowRunHack |
Where I play with CSS code
I see it has been a while since anyone has posted here. I am trying to get back into the swing of OP, but am running up against a few issues, not least of which is my abysmal memory.
First, I am trying to center a particular interactive map on the page, rather than it being left aligned.
Second, while trying to make it work, I thought I might add some CSS to see if that would help. For some reason any CSS I add vanishes as soon as I refresh the CSS page. I have no idea how I messed all that up. If anyone can help me fix this, I would be grateful.
PhoenixMark
Shimmering Kingdoms FATE
OK. So I have my menu up above in my new Cyberpunk 2077 campaign but I am wondering how to get the right sidebar to go below everything and be more of a footnote kind of thing. Any help would be much appreciated.
I am hoping that once I move it to the bottom I can center the entire area on the logo. Right now it is to the left leaving space for the sidebar I am guessing.Oh. And I want an exception to be the character's page because I do want their photograph to show up on the right on those pages.
Also I would like to keep the Adventure Log Sidebar like it was originally.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Here is a mockup showing what I am trying to do:
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Just change your sidebar width. You will likely want to move the left of the side bar back to the left.
to make your character sheets ignore this just add
Obviously if you change the width of your .columns.main-content-container.dynamic-sheet-width class to something larger (since you no longer have a sidebar) then you will want to change it back for your character sheets using body.character-show .columns.main-content-container.dynamic-sheet-width
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Thank you so much cgregory! That is what I was looking for. Almost. The only problem is that now I have the main body too far to the left and the sidebar below too far to the right. Is there any way to just center them both to the menu and keep them the same width?
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Crap. Fix one thing and break another. How do I keep the Adventure Log sections the same as they were before? I tried a variation of your fix above but it didn't work.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Try for the side bar using
And for the main content
That should center it.
As for the adventure logs rather than body.character-show
body.adventure-log-index and body.adventure-log-show
Here is a list of all the body. locations
https://unlockingtheportal.obsidianportal.com/wikis/body
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Thanks cgregory. That helped a lot. However, after some thought I think I will just go back to the regular layout. I might revisit it later though so that advice will come in handy.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
I need help trying to figure out how to get my campaign looking good when viewed on a mobile device, currently it looks all messed up. When viewed on a PC, it looks fine (as far as I can tell)
Campaign: https://terrene.obsidianportal.com/
also, how do I change "GM" to "DM"?