Basileus
A few lines collected from other threads (so the original credit for most of it isn't mine), tweaked, and then boiled down to the basics. This should help those who didn't do much CSS coding beforehand, but are finding that the Reforge is playing shenanigans with their formatting.
This is what I have cobbled together in a couple hours (minus my own campaign customizations), so I may expand it going forward, but will try to keep it generic (no fiddling with colors, effects, or custom graphics - just sizing, placement, etc...).
This should do the following:
* Restore pre-Reforge banner size
* Restore pre-Reforge page width/size, so that should help with much of the formatting errors from the narrower size (also aligns/resizes navbar and sidebar to allow for this, without having to use the minimized navbar icons)
* Eliminate some of that empty space and new, nonessential elements near the top.
* This will only affect the public-facing portions of your campaign (dashboard and such should not be affected)
* Adjust Characters, Items, and Maps pages to fit this layout
* Restore Pre-Reforge table appearance/functionality
* Restore pre-Reforge link behavior and colors
How to use:
* In your campaign, go to "Dashboard", then "Settings"
* Navigate to the "Style" tab
* Copy the lines below and paste into the "Custom CSS" section
* Scroll down and click "Save"
@/* RESTORES PREFORGE BANNER SIZE */
.campaign-public-layout #banner-container .campaign-banner-image {fixed; height: 300px; width: 750px; margin-right: auto; margin-left: auto;}
/* REMOVES "HIGHLIGHTS" AND SPACE ABOVE BANNER */
.campaign-public-layout .highlight-container {display:none;}
.campaign-public-layout #campaign-summary-row .row {opacity: 0.0; height: 30px}
/* RESTORES PREFORGE TABLE FUNCTIONALITY */
#content table {background-color: transparent; border-style: none;}
#content tr:nth-child(even) {background-color: transparent;}
/* RESTORE PREFORGE LINK COLORS AND BEHAVIOR */
#content a:link {color:darkblue;text-decoration:none;}
#content a:visited {color:darkblue;text-decoration:none;}
#content a:hover {color:blue;text-decoration:underline;}
#content a:active {color:darkblue;text-decoration:none;}
#content a:link.create-wiki-page-link {color:red;text-decoration:none;}
#content a:visited.create-wiki-page-link {color:red;text-decoration:none;}
#content a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
#content a:active.create-wiki-page-link {color:red;text-decoration:underline;}@
For those who would like to restore just the aspect ratio, but the original banner will be blown up to cover the whole layout width, replace the first line with this:
@/* RESTORES PREFORGE BANNER ASPECT RATIO */
.campaign-public-layout #banner-container .campaign-banner-image {height: 440px;}@
Also moving the original code to resize page width to this separate area, since it can now be done in the campaign settings (Dashboard > Settings > Advanced > Content Max Width). This should be set to 1368 to achieve the old page width of 730 (which will preserve the current OP sidebar and navbar).
@/* RESTORES PREFORGE PAGE WIDTH AND BALANCES NAVBAR/SIDEBAR */
.campaign-public-layout #content {max-width:1100px}
.campaign-public-layout .main-content-container {width:730px; padding: 0px;}
.campaign-public-layout .campaign-landing-page-container {width:730px; padding: 0px;}
.campaign-public-layout .section {width:730px;}
.campaign-public-layout .post-main {width:730px;}
.campaign-public-layout .front-nav-container {position:relative; z-index:5; width: 185px}
.campaign-public-layout .sidebar {position:relative; z-index:5; width: 185px}
/* ADJUSTS CHARACTER, ITEM, AND MAP PAGES TO NEW LAYOUT */
.collapsable-nav-row .full-width.main-content-container {width: 900px; padding: 0px;}@
**********
An example (at time of this post): "Outremer":https://outremer.obsidianportal.com/
Please report any errors or potential additions.
-Edit: In particular, if anyone finds ways to make tables behave more like they did before, please let me know.- Thanks Thorvaldr
Comments
Was it supposed to drop the characters list below the nav bar like in this example?
"Alfaysia":https://alfaysia.obsidianportal.com/characters
Unconquered Kingdoms, July 2016 CotM
I'm going to hunt down some breakfast and then see if I can't fix that.
I've updated the code in the original post, or you can simply add this last line:
@.collapsable-nav-row .full-width.main-content-container {width: 900px; padding: 0px;}@
Please let me know if you test this.
Edit: Oops, minor update, should be 900px, not 915px, to line up with the rest of the site (updated in both posts).
"Alfaysia":https://alfaysia.obsidianportal.com/characters
Unconquered Kingdoms, July 2016 CotM
Looks like that last update might have wrought some havoc with your front page, though I can't recreate it. Can you confirm if there is any additional CSS you have added or any other oddities on that page that might cause the formatting to go wonky?
Thanks.
Unconquered Kingdoms, July 2016 CotM
Looks like its only happening in IE and Safari. No problems in Firefox, Chrome, or Opera, and I can't recreate it in another campaign, so I am going to assume for now that it is just some sort of browser oddity or my personal settings conflicting with a particular image, or something along those lines.
Edit: One more minor update, do to a slight miscalculation, I had to increase the size of the banners a bit more to preserve the original aspect ratio. Original post updated accordingly.
For those who would like to preserve the size as well as the aspect ratio of the original banners, replace the first line of code with this:
@.campaign-public-layout #banner-container .campaign-banner-image {fixed; height: 300px; width: 750px; margin-right: auto; margin-left: auto;}@
You will avoid zooming in/blowing up the image, but it will no longer span the whole width of the layout. Use whichever option is more aesthetically pleasing to you.
For comparison, here is one with this option as opposed to the first one: "Edge of Night":https://theedgeofnight.obsidianportal.com/
NVM problem was on my end found solution!!!
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
@/* REMOVES CHARACTER AVATAR FROM SIDEBAR */
.campaign-public-layout .sidebar .character-avatar .frame {display: none;}@
And adding the same image as both a right-aligned image in the "Description" section, and as the character avatar as normal. The end result should be that the avatar will appear normally in the main "Characters" page, but with avatar as part of the text on the character's personal page (similar to the old style).
Examples:
"Characters page":https://outremer.obsidianportal.com/characters
"Individual character page":https://outremer.obsidianportal.com/characters/test-character-3
Edit: Since that isn't purely CSS at the moment, I won't add it to the original post yet.
{background-color: transparent;}.
Until someone comes up with something better, it is what I have.
Just trying to help out.
I use a left sidebar for handy links. In the reforge, it shrinks them down so one cannot see them. I found some code that worked to make them whole again. Unfortunately, when I utilize the above code (which is awesome, thanks), the links shrink down again. If anyone can help, I would appreciate it.
The code that makes them whole is:
img { max-width:none;
}
I am barely competent at HTML. CSS atm baffles me. Please help.
"PhoenixMark":http://www.obsidianportal.com/profile/PhoenixMark
"CRIMSON SKIES":http://www.obsidianportal.com/campaigns/crimson-skies
"COTM June 2012":http://blog.obsidianportal.com/crimson-skies-junes-campaign-of-the-month/
Also "Sactown Blues":http://www.obsidianportal.com/campaigns/sactown-blues and "Shimmering Kingdoms":http://www.obsidianportal.com/campaigns/shimmering-kingdoms
a img { max-width:none; }
into your CSS.
Langy - I will try that.
Also, it seems that Safari viewer (that I use exclusively), is not displaying everything properly.
"PhoenixMark":http://www.obsidianportal.com/profile/PhoenixMark
"CRIMSON SKIES":http://www.obsidianportal.com/campaigns/crimson-skies
"COTM June 2012":http://blog.obsidianportal.com/crimson-skies-junes-campaign-of-the-month/
Also "Sactown Blues":http://www.obsidianportal.com/campaigns/sactown-blues and "Shimmering Kingdoms":http://www.obsidianportal.com/campaigns/shimmering-kingdoms
Also, the edit button is buried and adding /edit to the end of the url does not work anymore, to open up the edit box. What do I do to edit the main wiki page if I cannot find the edit button?
Thanks
"PhoenixMark":http://www.obsidianportal.com/profile/PhoenixMark
"CRIMSON SKIES":http://www.obsidianportal.com/campaigns/crimson-skies
"COTM June 2012":http://blog.obsidianportal.com/crimson-skies-junes-campaign-of-the-month/
Also "Sactown Blues":http://www.obsidianportal.com/campaigns/sactown-blues and "Shimmering Kingdoms":http://www.obsidianportal.com/campaigns/shimmering-kingdoms
https://crimson-skies.obsidianportal.com/wiki_pages/home-page/edit
Try sticking the following in your CSS to somewhat-fix the stuff being pushed to the side:
[class*="column"]+[class*="column"]:last-child {
float:none;
}
I'm not certain how well that'll work, though, and there are a few other issues with your site at the moment. I doubt it'd be needed if you fixed the thing that's really messing you up, though - and that's that you have a misplaced close-div somewhere in your wiki page's content area (your home page looks fine, though). An example of this is the "setting":https://crimson-skies.obsidianportal.com/wikis/setting page. In it, it looks like you have one extra close-div right after the FancyMenuBarUpTop div; this is screwing up the rest of your site, as it breaks just about everything after it. There look to be two more after the BORDERBOX divs.
If you got rid of those extra close-divs, it should look much nicer, I think. I'm not sure if this is something that's troublesome throughout your site or limited to just a few pages, though if you are reusing that code throughout then it'll be a problem in almost any page - and note that while this may not have been as obvious pre-reforging, it was definitely still a problem.
@/* RESTORES PREFORGE TABLE FUNCTIONALITY */
#content table {background-color: transparent; border-style: none;}
#content tr:nth-child(even) {background-color: transparent}@
To get a page width of 730 pixels (Preforge width), the Max Content Width should be set to 1368.
bc. #content a:link {color:darkgreen;text-decoration:none;}
#content a:visited {color:darkgreen;text-decoration:none;}
#content a:hover {color:forestgreen;text-decoration:underline;}
#content a:active {color:darkgreen;text-decoration:none;}
bc. #content a:link.create-wiki-page-link {color:dimgray;text-decoration:none;}
#content a:visited.create-wiki-page-link {color:dimgray;text-decoration:none;}
#content a:hover.create-wiki-page-link {color:lightslategray;text-decoration:underline;}
#content a:active.create-wiki-page-link {color:dimgray;text-decoration:underline;}
The above code makes all of a campaigns links green, and all links to empty wiki pages that haven't been filled in yet gray. Obviously, feel free to choose your own colors. I just happen to like green!
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
First off, here is the custom CSS code currently being utilized across the site.
img { max-width:none;}
/* RESTORES PREFORGE BANNER ASPECT RATIO */
.campaign-public-layout #banner-container .campaign-banner-image {height: 300px;}
/* REMOVES "HIGHLIGHTS" AND SPACE ABOVE BANNER */
.campaign-public-layout .highlight-container {display:none;}
.campaign-public-layout #campaign-summary-row .row {opacity: 0.0; height: 20px}
/* RESTORES PREFORGE PAGE WIDTH AND BALANCES NAVBAR/SIDEBAR */
.campaign-public-layout #content {max-width:1170px}
.campaign-public-layout .main-content-container {width:900px; padding: 0px;}
.campaign-public-layout .campaign-landing-page-container {width:900px; padding: 0px;}
.campaign-public-layout .section {width:900px;}
.campaign-public-layout .post-main {width:900px;}
.campaign-public-layout .front-nav-container {position:relative; z-index:5; width: 185px}
.campaign-public-layout .sidebar {position:relative; z-index:5; width: 185px}
/* ADJUSTS CHARACTER, ITEM, AND MAP PAGES TO NEW LAYOUT */
.collapsable-nav-row .full-width.main-content-container {width: 800px; padding: 65px;}
/* RESTORES PREFORGE TABLE FUNCTIONALITY */
#content table {background-color: transparent; border-style: none;}
#content tr:nth-child(even) {background-color: transparent;}
/* REMOVES CHARACTER AVATAR FROM SIDEBAR */
.campaign-public-layout .sidebar .character-avatar .frame {display: none;}
Now, the problems I have.
As you can see I am running my site with the collapsed nav bar layout, and prefer that to the full one that Basileus has built his code around. Unfortunately, this is causing some issues with the Adventure Log/Characters/Items pages. I modified the code some to try to correct issues but it has left me some problems with spacing as illustrated on these pages.
https://dark-horizon-26501.obsidianportal.com/adventure-log
https://dark-horizon-26501.obsidianportal.com/adventure-log/test-post
https://dark-horizon-26501.obsidianportal.com/characters
https://dark-horizon-26501.obsidianportal.com/characters/test-man
https://dark-horizon-26501.obsidianportal.com/items
https://dark-horizon-26501.obsidianportal.com/items/test-item-4
Also, I am using a custom nav bar to help my players navigate the wiki pages more smoothly. Right now, the code for that is on each wiki page as well as the front page. Is there a fairly easy way that I can get that to show on even the Adventure Log/Character/Item pages as well? I can't add it the way I normally do since I usually embed the code directly into the the page edit.
This is what the custom nav layout looks like on my front page which is mirrored pretty much with my wiki pages: https://dark-horizon-26501.obsidianportal.com/
Here is the chunk of code I am using for that format:
"!http://cdn.obsidianportal.com/assets/243153/Rules_Nav.png(Rules nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/rules
"!http://cdn.obsidianportal.com/assets/243154/People_Nav.png(People nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/people
"!http://cdn.obsidianportal.com/assets/243155/Magic_Nav.png(Magic nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/magic
"!http://cdn.obsidianportal.com/assets/243158/Religion_Nav.png(Religion nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/religion
"!http://cdn.obsidianportal.com/assets/243162/Places_Nav.png(Places nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/places-of-interest
"!http://cdn.obsidianportal.com/assets/243159/History_Nav.png(History nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/history
"!http://cdn.obsidianportal.com/assets/243161/Tools_Nav.png(Tools nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/tools-and-resources
I'm pretty clueless to CSS and most of the stuff I have has been cobbled together or borrowed from those with more knowledge. Any further help would be appreciated.
Now that OP has added the ability to set custom content width, I would recommend using that feature instead of setting it in CSS - should resolve the first issue with the collapsed nav bar as well. Just remove this section of code from your custom CSS:
@/* RESTORES PREFORGE PAGE WIDTH AND BALANCES NAVBAR/SIDEBAR */
.campaign-public-layout #content {max-width:1100px}
.campaign-public-layout .main-content-container {width:730px; padding: 0px;}
.campaign-public-layout .campaign-landing-page-container {width:730px; padding: 0px;}
.campaign-public-layout .section {width:730px;}
.campaign-public-layout .post-main {width:730px;}
.campaign-public-layout .front-nav-container {position:relative; z-index:5; width: 185px}
.campaign-public-layout .sidebar {position:relative; z-index:5; width: 185px}
/* ADJUSTS CHARACTER, ITEM, AND MAP PAGES TO NEW LAYOUT */
.collapsable-nav-row .full-width.main-content-container {width: 900px; padding: 0px;}@
Then go to the next tab over in your campaign settings ("Advanced" right next to "Style") and set the "Content Max Width (px)" value to 1368 (should result in the main content area being the expected 730 pixels wide). Should not only work better with the collapsed navbar, but is more likely to be compatible with any future updates/changes to the site.
-
As for the second point (the sidebar) I'll see what I can come up with but I'm hoping Langy can share some wisdom on that - he has an excellent sidebar working in Edgerunners. I've been poking at his CSS but I haven't quite figured out how he is doing it! :D
I admittedly don't have the greatest grasp on CSS coding, I mostly function by scouring for code examples and lots of trial and error.
Thanks again! :)
I've added that to the opening post - though I did use the default red and blue scheme like Preforge did.
Nope. There's no way to make the sidebar appear on the map, item, or character list pages. You could make it appear in the individual character pages and adventure logs by pasting the sidebar code into every single one of them, but otherwise - nope.
You should be able to get it to appear on the adventure log index by pasting the sidebar code into an adventure log that'll be loaded; not all of them are loaded when you open the adventure log, though, so it's probably best to paste it into an adventure log that'll always be at the top. A likely candidate would be an 'index' or something similar; just make its post date something high like in the 2030s or something so it's always the latest adventure log date.
As far as my Edgerunners sidebars, here's the CSS code for them:
.sidebar-top{
position:fixed;
width:0px;
top:50px;
}
.sidebar-bottom{
position:fixed;
width:0px;
bottom:20px;
}
.sidebar-left{
position:relative;
right:220px;
}
.sidebar-right{
position:relative;
width:150px;
left:940px;
}
.sidebar-right2{
position:relative;
width:150px;
left:1000px;
}
@media screen and (max-width: 1275px){
.sidebar-left, .sidebar-right, .sidebar-right2{
display:none;
}
}
@media screen and (min-width: 1375px){
.sidebar-right, .sidebar-right2{
width:200px;
}
}
@media screen and (min-width: 1475px){
.sidebar-right, .sidebar-right2{
width:250px;
}
}
@media screen and (max-height: 600px){
.sidebar-bottom{
display:none;
}
}
@media screen and (max-height: 425px){
.sidebar-top{
display:none;
}
}
.sidebar-left img{
margin-bottom:14px;
}
The @media screen ones are to make the sidebars disappear when the page is too narrow or short to display them, and the rest are used for positioning. All sidebars have two classes - .sidebar-top or .sidebar-bottom and .sidebar-left or .sidebar-right. (.sidebar-right2 is used for the logo in the bottom right sidebar to make it be in the right location, but it's generally not needed unless you're doing something like what I did).
And that's about it. Just paste the sidebar into every wiki page you can.
Suddenly out of nowhere the nav buttons, even though set to be collapsed, are now displaying their writing across all of my pages, and when you put the mouse over them it highlights a strip across the entire page making in impossible to see the page or even click on the edit button for that page. was functioning perfectly until now and i made no CSS or any other notable changes in that time
Does anybody have CSS code that can just get rid of that side bar of links entirely? I put in a bug report but i cannot edit anything right now. Here is a link with a picture of what i am seeing, also check and see if you guys see the same thing. This happened out of the blue for the whole campaign wiki
http://i1233.photobucket.com/albums/ff386/danbadour/Bug_zps3775222d.png
"Avatar: Conquest of the Imperial Order":https://avatar_adventures.obsidianportal.com/
"Duskreign’s Favorite CotM January 2012":http://www.obsidianportal.com/campaign/wyrmshadow/wikis/012012
"CotM November 2011":http://blog.obsidianportal.com/november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order/?utm_source=rss&utm_medium=rss&utm_campaign=november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011