This snippet placed in CSS in dashboard/settings/style makes the text in the input boxes black, and the background a lighter shade of grey.
The second entry is background color when the text input is activated.
For folks who would like a horizontal set of nav links, I've got a start on some CSS for it. It's not perfect or super clean just yet, but it might give some folks a few ideas:
/*Horizontal Navigation Bar*/
.nav-links li a {margin-right:15px;}
If you pair this with the above, you can stretch out the main content column as well:
@/*Change main content width*/
#content .main-content-container {width:730px;}@
My pleasure madartiste! Feel free to ask, if there is anything you need help with.
I have worked a bit with css beforehand. Actually this is quite similar to customising wordpress themes :)
May as well throw my 2 cents in here. My campaign was very big on transparent backgrounds... and everything was laid out for a very specific size. The following CSS code almost has my campaign looking like old (...at least in regards to layout. :P):
***********
/* MAIN PAGE LAYOUT*/
.main-content-container { width:710px !important; background-color:transparent;}
Quick question: Anyone know how to make the white main content box disappear? I've tried setting it to "background-color:transparent" but I get nothing.
Also, just realized, in my main campaign I have a vertical navigation bar on the left hand side of the screen. Before, when the edit button was at the very bottom of the page this didn't present a problem. Now however, I can't click on the edit button beside the page's title. Any thoughts on how I might be able to circumvent this so i can fix the sidebar and be able to edit my pages?
Tommy19, take a look at my code above. You may need to use the !important tag thingy... I'm sure it has a technical name. I had to make a few different things transparent until it worked.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Thanks Thorvaldr, I saw that just after I posted and it worked great, thank you!
Still having problems with the side nav bar preventing me from editing my pages though. Help on that would be GREATLY appreciated if anyone has any ideas.
You can use that inspect element feature to disable the offending sidebar so you can edit the page, if you'd like. Right-click the sidebar, go to inspect element, then in the window there's a bit on the right that's the CSS code for the currently-selected element. Select the primary element of your side nav bar that's messing things up and in the CSS section type 'display:none' to remove it. This'll let you then click the edit button normally.
If you have CSS on the campaign, I recommend just moving it with CSS, though.
So I figured out how to change the text of the navbar links. I have to warn you that it's not a pretty sight but it DOES work. You need to keep in mind that the nth-child number changes depending on whether you are a campaign member or not (since non-members don't get the dashboard). This particular one replaces "Front Page" with "Home Page." Feel free to let me know if it doesn't work in some cases since I haven't had a chance to extensively test it.:
@#campaign-nav ul li:nth-child(1) a:after {content:"Home Page";}
.campaign-member #campaign-nav ul li:nth-child(1) a:after {content:none;}
#campaign-nav span.icon-home + span {font-size:0;}
.campaign-member #campaign-nav ul li:nth-child(2) a:after {content:"Home Page";}
}@
Hah, I should have known someone would have got in with the darker text in edit boxes, good to know im not the only one who hated that low contrast.
I'm working on some other tweaks to make the edit page a bit more friendly, essentially bringing the CSS box closer to the top of the page, making it more readable and bigger for anyone like me who does a lot of trial and error and gets sick of scrolling down every time you make a minor change.
Also, monospace. Bloody necessary.
Another tiny one:
/* MAKE BROKEN LINKS STAND OUT */
.create-wiki-page-link { color: green !important; background-color: yellow; }
I suspect this will be unnecessary once the associated bug is fixed; but for now it's making my life easier, so I thought I'd share.
---
ketherian
["Signs & Portends":http://www.obsidianportal.com/campaigns/swtwc]
@KillerVP: Great! I think that brings us down to I only owe you a half dozen drinks now! :P
@Basileus: Thanks! A lot of these fixes are dirty... hope they aren't breaking things elsewhere in the campaign... I'm sure we'll find out soon enough. :P
And one more fix for the road: Meagoinc made it very clear that the navigation icons had no place in a medieval setting. So, they are gone!
And of course, we have to also resize that navigation bar to make it smaller for the removal of said icons. And, we are not fans of sans-serif at Tyellador, so I've also changed the menu fonts:
Comments
The second entry is background color when the text input is activated.
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea {
color: black;
background-color: rgb(245, 245, 245);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, textarea:focus {
background-color: rgb(250, 250, 250);
}
/*Horizontal Navigation Bar*/
.nav-links li a {margin-right:15px;}
#campaign-nav {width:100%;
height:38px;
position:relative;
}
.campaign-public-layout #campaign-nav {
background-color:transparent;
}
.collapsable-nav-row .front-nav-container {
width:100%;
top:-30px;
background-repeat:no-repeat;}
#campaign-nav ul li {display:inline;float:left;}
If you pair this with the above, you can stretch out the main content column as well:
@/*Change main content width*/
#content .main-content-container {width:730px;}@
.campaign-settings #style-settings #custom-css-field { color:black; background-color: rgb(245, 245, 245); }
I have worked a bit with css beforehand. Actually this is quite similar to customising wordpress themes :)
Script: https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:5
***********
/* MAIN PAGE LAYOUT*/
.main-content-container { width:710px !important; background-color:transparent;}
.campaign-landing-page-container{ width:710px !important; background-color:transparent !important;}
.sidebar{position:relative; z-index:5; width:18%;}
#content {max-width:1100px !important;}
.post-main{background-color:transparent !important;}
********
And to whomever figured out the "!important" tag... THANK YOU! That makes everything work magically.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Also, just realized, in my main campaign I have a vertical navigation bar on the left hand side of the screen. Before, when the edit button was at the very bottom of the page this didn't present a problem. Now however, I can't click on the edit button beside the page's title. Any thoughts on how I might be able to circumvent this so i can fix the sidebar and be able to edit my pages?
Thanks in advance!
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Still having problems with the side nav bar preventing me from editing my pages though. Help on that would be GREATLY appreciated if anyone has any ideas.
Forgive me if I have not used the proper technical terms.
Unconquered Kingdoms, July 2016 CotM
If you have CSS on the campaign, I recommend just moving it with CSS, though.
My work here is done...carry the torch forward @Langy...../grin
Unconquered Kingdoms, July 2016 CotM
I really like your Black Text in CSS Edit, but I was wondering, is there a way to do this so it's ALL edit fields, not just css?
textarea, input {
color:black !important;
border:solid 1px black !important;
}
This should return pre-Reforge banners to their normal proportions/ratio (albeit blown up slightly in size).
************
.campaign-public-layout #banner-container .campaign-banner-image {height: 400px;}
************
(you weren't kidding about blown up "slightly" wow)
Unconquered Kingdoms, July 2016 CotM
@#campaign-nav ul li:nth-child(1) a:after {content:"Home Page";}
.campaign-member #campaign-nav ul li:nth-child(1) a:after {content:none;}
#campaign-nav span.icon-home + span {font-size:0;}
.campaign-member #campaign-nav ul li:nth-child(2) a:after {content:"Home Page";}
}@
I'm working on some other tweaks to make the edit page a bit more friendly, essentially bringing the CSS box closer to the top of the page, making it more readable and bigger for anyone like me who does a lot of trial and error and gets sick of scrolling down every time you make a minor change.
Also, monospace. Bloody necessary.
bc. /* Styles Page */
textarea, input {color:#444 !important; }
.campaign-settings #style-settings #custom-css-field {font-family: "Courier New", Courier, monospace; height: 500px}
#background-selection {float: left; width: 35%;}
#background-selection li {border: 3px; padding: 0 3px 3px 6px; max-height: 60px; width: 90px;}
#banner-upload .preview-area {margin:0px !important;}
#upload-background {float:right; width:65%;}
#no-background label {padding: 0 0 0 20px;}
P.S. Does anyone have any idea how to make the background previews display more than 4 per row?
P.P.S Doesn't look like that's possible: the number of columns is linked to the class of the list (class= "large-block-grid-4")
/* REDUCES OBSIDIAN-PORTAL LOGO TO A REASONABLE SIZE */
.flame-dragon svg { height: 20% !important; }
---
ketherian
["Signs & Portends":http://www.obsidianportal.com/campaigns/swtwc]
Signs & Portends, Dwarves of Lost Koldukar, In a certain realm
/* MAKE BROKEN LINKS STAND OUT */
.create-wiki-page-link { color: green !important; background-color: yellow; }
I suspect this will be unnecessary once the associated bug is fixed; but for now it's making my life easier, so I thought I'd share.
---
ketherian
["Signs & Portends":http://www.obsidianportal.com/campaigns/swtwc]
Signs & Portends, Dwarves of Lost Koldukar, In a certain realm
.highlight-container {height: 0px !important;}
.user-container {
display: none;
}
Flash
"Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _Where Slaves Become Legends_
Heroes Unchained: CotM 2013
#content table{background-color:transparent; border-style:none;}
#content tr:nth-child(even) {background-color:transparent}
The second line will change all of the even lines.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Just trying to help out.
Definitely adding that to my Quick'n'Dirty CSS Fix.
@Basileus: Thanks! A lot of these fixes are dirty... hope they aren't breaking things elsewhere in the campaign... I'm sure we'll find out soon enough. :P
And one more fix for the road: Meagoinc made it very clear that the navigation icons had no place in a medieval setting. So, they are gone!
.op-icon {display:none !important;}
.icon{display:none !important;}
And of course, we have to also resize that navigation bar to make it smaller for the removal of said icons. And, we are not fans of sans-serif at Tyellador, so I've also changed the menu fonts:
.menu-text{font-family:Georgia,serif;}
.collapsable-nav-row .front-nav-container{width:12%;}
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/