A Totally Unofficial CSS Help & Tips FAQ

ChainsawXIV · January 2014

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

Dropbeartots · January 2014

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 :)

weasel0 · January 2016

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

Basileus · January 2016

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:

@[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 · January 2016

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.

GambleMoments · February 2016

I am having trouble figuring out what class to change background in adventure log when I zoom into it as well as wiki pages

GamingMegaverse · February 2016

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!

ChainsawXIV · February 2016

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.

HumAnnoyd · February 2016

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.

GamingMegaverse · February 2016

Thanks Chainsaw! You are awesome!

ChainsawXIV · February 2016

Easy enough. "Here you go":http://omnichron.net/external/op/templates/horizontal-nav-narrow.css.

HumAnnoyd · February 2016

Thanks again! You are like the magic CSS fairy!

NikMak · February 2016

the chainsaw fairy: like the tooth fairy, but less fun, and the you need biological enzymes to clean up afterwards...

weasel0 · February 2016

I thought maybe it was for when you out grew the baby teeth chainsaw and were ready for more power.

!http://www.solvencyiinews.com/wp-content/uploads/2012/07/morepower.png!

Basileus · February 2016

Rrrruuh?!

^best attempt at the Tim Allen grunt

Lxcharon · March 2016

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

ketherian · March 2016

Hi Lxcharon.

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.

Lxcharon · March 2016

Jesus, the container! I was adjusting the background image without adjusting the container. Thank you for your help Ketherian!

twiggyleaf · March 2016

Thanks Ketherian!

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

weasel0 · April 2016

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.

killervp2 · April 2016

Yet another issue.

PhoenixMark · November 2017

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

HumAnnoyd · October 2018

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.

HumAnnoyd · October 2018

Here is a mockup showing what I am trying to do:

cgregory · October 2018

Just change your sidebar width. You will likely want to move the left of the side bar back to the left.

#sidebar {

width: 70%;

left: -25%;

}

to make your character sheets ignore this just add

body.character-show #sidebar {

width: 25%;

left: 0;

}

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

HumAnnoyd · October 2018

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?

HumAnnoyd · October 2018

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.

cgregory · October 2018

Try for the side bar using

width: 90%;

right: 5%;

And for the main content

.columns.main-content-container.dynamic-sheet-width {

width: 90%;

left: 5%;

}

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

HumAnnoyd · November 2018

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.

Vishera · January 2019

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"?

A Totally Unofficial CSS Help & Tips FAQ

Comments

June 2023
Candlekeep Mysteries

Howdy, Stranger!

Discussions

Categories

Forum

Information

A Totally Unofficial CSS Help & Tips FAQ

Comments

June 2023 Candlekeep Mysteries

Howdy, Stranger!

Discussions

Categories

Forum

Information

June 2023
Candlekeep Mysteries