Ah! @Basileus! You have an official Quick’n‘Dirty CSS Fix thing going on! Yes, please add anything there, it is extraordinarily helpful having everything all in one post/place. Thanks for taking the time to comb through the forums and combine everything!
Huge thanks to @Madartiste for getting me on the right track with the horizontal navbar.
I've managed to get rid of the annoying arrow too, just stick this line in:
#campaign-nav li.active:after {display:none}
"Here":https://things-to-do-in-denver.obsidianportal.com/ is what I've managed so far. Seriously in awe of everyone who's managed to completely convert their campaigns already, impressive stuff :)
@PurpleSteve: Sweet! I'm glad it helped someone. :) I actually got around to removing the arrow myself later, but then totally forgot to put the code in, so thanks! Your nav bar looks sweet - and the rest of the page too!
I've also got some code for removing the nav link text all together and replacing it with images if anyone wants it.
which does convert my CSS text area to white on black, but only until I click in the text area itself. At that point, it goes to white on dark grey. How can I address this? I have tried :active and :focus, but neither provide a solution. Anyone know what it is that I'm missing?
Thanks Steve! Your line reminded me that changes don't necessarily take unless you use the !important flag. Adding just that element was sufficient to solve the problem, so the issue is seemingly one of prioritization.
Don't forget, folks, that just making CSS changes may not be enough to override settings without the !important flag (that so many others have already incorporated into their snippets, thankfully).
I would also like to thank (again) all the great folks contributing snippets of style code for the CSS to help us get back to a semblance of order.
pjrichert, what finally worked for me was picking a different "theme" (which changed the colors) AND deselecting the default background checkbox at the same time - doing it separately didn't work. Really stupid when what you really want is simply no background at all.
Try uploading your background and deselecting the default checkbox in the same save session.
Has anyone tried to change the appearance of the top bar? I can change the color of everything except the three sections that have dropdowns (Welcome [your user name], Campaigns, and +New). As you can see "here":https://ageofworms-ap.obsidianportal.com/ I've got an odd mishmash of coloring going on up there... I've used inspect element to try to figure out what those are called, but have had no luck. Anyone else tried and succeeded?
Hmm...that effects the dropdown menus themselves (thanks!) but not the visible sections on the top bar that you hover over to get the dropdown menus. Am I doing something wrong?
Found my problem with #top-bar .welcome-user -- you can't change the background color unless you also tell it to not display the background image. No idea why they'd do it that way, but oh well. I've got it working perfectly, thanks! :)
Sure thing. There may be a way to do this more efficiently (if so, please tell me!), but this is what I came up with.
Here's how to modify the appearance of the new top navigation bar (note that mine is a black background with white text and a green underline):
bc. #top-bar /*Change overall background color and borders here*/
{
background-color:black;
border-bottom:2px solid #073704;
}
#top-bar .welcome-user, .top-bar-section li a:not(.button), .quick-link, #campaign-search-container, #top-bar #sticky-toggle
{
background-color:transparent;
background-image:none; /*BOTH of these are necessary for the appearance you set above to show through*/
color:white;
}
.top-bar-section .dropdown li a
{
background-color:black !important;
}
#top-bar li.divider
{
display:none;
}
Also, I just discovered something REALLY COOL (seriously, my dog thinks I'm crazy for being this excited over the computer...then again, I'm pretty sure she already thought I was crazy...). I'm putting it in a separate post to make it easier to share a link later.
Okay, so a lot of people are disappointed with how narrow the main text area is on the new layout. I found out a way to make it wider AND have it still shrink automatically if you adjust the width of your browser window! Now, personally I kinda like the narrower size on the home page, but only the home page. Check out the "home page of my Age of Worms campaign":https://ageofworms-ap.obsidianportal.com/. That's unmodified Reforged OP widths. Now check out the "main wiki page of the same campaign":https://ageofworms-ap.obsidianportal.com/wikis/main-page. As you can see, I've shrunk down the last edited by sidebar to make my main text area much wider, and that area will adapt to narrower monitor/browser widths without forcing a horizontal scroll bar. Now, this trick does require you to collapse the front page menu (there's bound to be a way around that, but since I wanted the menu collapsed anyway I haven't gone looking for it). Even better, it's two lines of code:
You can adjust the percentages as desired. The .wiki-page-show restricts it to only the wiki pages, leaving your home page and all other pages untouched.
Thanks to Thorvaldr for the idea to put in min-width, which prevents it from getting any smaller than a certain point for readability's sake on a tiny screen.
@Savannah: That's a great way of doing it! I might also recommend throwing a "min-width: ___px;" in there, just to make sure it can't get to 5 pixels in width. :P
Also, thank you for the nav bar code! I'm sure I'll be changing that soon enough.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
@Savannah Thanks a million for both of those.
I've put together a version of your navbar code that uses transparency, for people who use a custom background and want it to show through. You can see what it looks like "here":https://things-to-do-in-denver.obsidianportal.com/
bc. /* Top Bar */
#top-bar {
background-color: rgba(40,40,40,0.5)
}
#top-bar .welcome-user, .top-bar-section li a:not(.button), .quick-link, #campaign-search-container, #top-bar #sticky-toggle{
background-color: transparent;
background-image: none;
color:white;
}
.top-bar-section .dropdown li a {
background-color: rgba(40,40,40,0.8) !important;
}
.top-bar-section .dropdown li a:hover {
background-color: rgba(40,40,40,1) !important;
}
So I spent all of last night trying to get my "Characters":https://tyellador.obsidianportal.com/characters page back to what it was before the reforge. There are still a few kinks to work out, but in the most part it's there. The hardest part by far was getting rid of the two-column standard Obsidian Portal put in. And as with most difficult things, hours of work are boiled down to one line of code. :P
Anyways, here is a quick "guide/template":https://tyellador.obsidianportal.com/wikis/custom-characters-page I wrote up last night for how to customize your Characters page. This will let you have as many (or few) columns as you like, manipulate the text/images, and put in custom backgrounds or colors.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Comments
I've managed to get rid of the annoying arrow too, just stick this line in:
#campaign-nav li.active:after {display:none}
"Here":https://things-to-do-in-denver.obsidianportal.com/ is what I've managed so far. Seriously in awe of everyone who's managed to completely convert their campaigns already, impressive stuff :)
I've also got some code for removing the nav link text all together and replacing it with images if anyone wants it.
.wiki-page { font-family: "caflisch-script-pro"; }
Just trying to add a typekit family to my wiki pages. Anyone have any thoughts?
I have the following line in my CSS
.campaign-settings #style-settings #custom-css-field {color:white;background-color:black;}
which does convert my CSS text area to white on black, but only until I click in the text area itself. At that point, it goes to white on dark grey. How can I address this? I have tried :active and :focus, but neither provide a solution. Anyone know what it is that I'm missing?
#style-settings textarea:focus {background-color: black !important;}
Don't forget, folks, that just making CSS changes may not be enough to override settings without the !important flag (that so many others have already incorporated into their snippets, thankfully).
I would also like to thank (again) all the great folks contributing snippets of style code for the CSS to help us get back to a semblance of order.
Try uploading your background and deselecting the default checkbox in the same save session.
When inspecting those elements, the thing that's styled is the a element, the link, not the list element.
Just trying to help out.
Here's how to modify the appearance of the new top navigation bar (note that mine is a black background with white text and a green underline):
bc. #top-bar /*Change overall background color and borders here*/
{
background-color:black;
border-bottom:2px solid #073704;
}
#top-bar .welcome-user, .top-bar-section li a:not(.button), .quick-link, #campaign-search-container, #top-bar #sticky-toggle
{
background-color:transparent;
background-image:none; /*BOTH of these are necessary for the appearance you set above to show through*/
color:white;
}
.top-bar-section .dropdown li a
{
background-color:black !important;
}
#top-bar li.divider
{
display:none;
}
Okay, so a lot of people are disappointed with how narrow the main text area is on the new layout. I found out a way to make it wider AND have it still shrink automatically if you adjust the width of your browser window! Now, personally I kinda like the narrower size on the home page, but only the home page. Check out the "home page of my Age of Worms campaign":https://ageofworms-ap.obsidianportal.com/. That's unmodified Reforged OP widths. Now check out the "main wiki page of the same campaign":https://ageofworms-ap.obsidianportal.com/wikis/main-page. As you can see, I've shrunk down the last edited by sidebar to make my main text area much wider, and that area will adapt to narrower monitor/browser widths without forcing a horizontal scroll bar. Now, this trick does require you to collapse the front page menu (there's bound to be a way around that, but since I wanted the menu collapsed anyway I haven't gone looking for it). Even better, it's two lines of code:
bc. .wiki-page-show #sidebar {width:10%; min-width:50px;}
.wiki-page-show .main-content-container {width:90% !important; min-width:300px;}
You can adjust the percentages as desired. The .wiki-page-show restricts it to only the wiki pages, leaving your home page and all other pages untouched.
Thanks to Thorvaldr for the idea to put in min-width, which prevents it from getting any smaller than a certain point for readability's sake on a tiny screen.
Unconquered Kingdoms, July 2016 CotM
Also, thank you for the nav bar code! I'm sure I'll be changing that soon enough.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
I've put together a version of your navbar code that uses transparency, for people who use a custom background and want it to show through. You can see what it looks like "here":https://things-to-do-in-denver.obsidianportal.com/
bc. /* Top Bar */
#top-bar {
background-color: rgba(40,40,40,0.5)
}
#top-bar .welcome-user, .top-bar-section li a:not(.button), .quick-link, #campaign-search-container, #top-bar #sticky-toggle{
background-color: transparent;
background-image: none;
color:white;
}
.top-bar-section .dropdown li a {
background-color: rgba(40,40,40,0.8) !important;
}
.top-bar-section .dropdown li a:hover {
background-color: rgba(40,40,40,1) !important;
}
Anyways, here is a quick "guide/template":https://tyellador.obsidianportal.com/wikis/custom-characters-page I wrote up last night for how to customize your Characters page. This will let you have as many (or few) columns as you like, manipulate the text/images, and put in custom backgrounds or colors.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/