If "this":https://chainsawxiv-test-campaign.obsidianportal.com/wikis/main-page is the basic kind of look you're going for, then there's an even easier way. You can use CSS to put more than one background image in the same element, so you can put them right into the space you want to have that look. Like so:
bc. /* Puts in a three part background with some padding and corner rounding */
.campaign-public-layout .main-content {
background:
url(http://omnichron.net/external/op/src/fc_parchment_top.png) top center no-repeat,
url(http://omnichron.net/external/op/src/fc_parchment_bottom.png) bottom center no-repeat,
url(http://omnichron.net/external/op/src/fc_parchment_main.png) top center repeat-y;
border-radius: 19px 11px 5px 12px;
padding: 20px;
}
bc. /* Turns off the default white background that would cover it up */
body.campaign-public-layout .post-section.post-main {
background: none;
}
bc. /* Removes the campaign color bar at the top of a wiki page */
.campaign-public-layout .main-content .highlight-container {
display:none;
}
With the particular images in this example, a width of 1305 is ideal, but this will vary depending on the images you use.
The only real limitation of this approach is that the tiling center section will tile behind the top and bottom, so if you need edge and corner cut-outs using an alpha channel then this isn't a great approach. But you can still do alpha along the vertical edges and a little corner rounding for a snazzy look with no fuss and no muss.
Oh - one thing I noticed now that I can see what you are doing. In order to get the text to move away from colliding with the right hand edge I had to set the padding-right >= 40px on your current layout.
So I'm using a modified version of Thorvaldr's code to change the size of the main content container, it also contains a code to essentially create a 'pop-out' side bar menu, which is really cool.
The problem I'm having is that this code affects the sidebar on an individual character's page, and that happens to be where the character's portrait is. Is there any way that I can have the code affect everything except the individual character pages?
Thanks so much, Dawnhawk! That did the trick. I've fiddled with the padding some more and got it to where I believe it needs to be. More importantly, perhaps, I think I've got enough of a handle on it (at least for now) that I can adjust further as needed. In gratitude, I award you 10,000 internets!
Chainsaw, I tried a solution like that earlier, but unfortunately with the specific images I'm using, I couldn't get the body background not to show behind the header and footer images. Your code would work great if the image I were using was more regularly shaped, but it's got little tears in spots along the top, and a notched corner, and a loose scroll of paper along the bottom. So they need to be loaded into separate containers, apparently. Still, Dawnhawk steered me right! Thanks for trying, regardless.
Now to see if I can't work out some of these color issues...
That makes the sidebar stay open, but unfortunately it moves it down to the bottom of the screen instead of up at the top where it should be. I set the sidebar width to 250px to match up with what I had in the code and tried adjusting both the 58.33333% and 75% attributes to get it back where it goes to no avail.
Huh. Can you link your campaign? I think you may have something else going on there that's screwing that up, since I tested that on my campaign and it worked fine.
"It's just to tell the page that no you really mean it":http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
Anyway, on my individual character pages the list of tags are down in the middle of the character page. Essentially I just want to move them up to where they are even with the 'Description" header. I used inspect element and tried to move it with this code:
I'm trying to write a class that will change the text colour of blockqutes - right now they are a very light grey and not that readable.
Is that even possible? So far my code does nothing: .bq {color:black;} or .blockquote {color:black;}
Disclaimer, I haven't had the chance to try that yet, so no idea if that's truly the issue or not. I've encountered a number of changes that wouldn't stick until I added the !important, though.
Although seriously, to whomever figured out that "!important" tag... that's the only way I've gotten _anything_ done. I don't know how I ever would have figured that out on my own.
Thank you both, but neither versions work for me. I also tried .bq {color:black !important;} And I really don't get why it won't work (with two campaigns)
Trying to fix a problem I'm having with... the search page. Basically, when I go to the character tab and click on a tag for one of my many characters it
goes to a search page which check boxes up top: All/Adventure Logs/Characters/Items/Wiki .... and when those boxes are check it shows anything with
the same tag on it.
So my problem is when it shows Wiki previews they are absolutely HUGE, way too big for the search.
I've been trying to style it so I can make them smaller and more manageable but so far I can't seem to track down the correct elements
without messing up other stuff on my wiki.
"The is an example":https://the-hero-academy.obsidianportal.com/search?tag=Faculty
I hope the link works correctly - otherwise just goto the character tab if you could find an NPC with the tag of Faculty (since its a pretty large group) click
on it and it should open up the search.
Any help would be greatly appreciated,
Sorceress
"The Hero Academy":https://the-hero-academy.obsidianportal.com/
Still nothing, this is driving me nuts. "Here's an example":https://ratsnest.obsidianportal.com/characters/diego-de-los-dolores where we used blockquotes / bq). for the character quotes.
Sorceress, I think the pictures may be the problem? I tried with my own campaign and the list is much more manageable. I host photos for the WIki offsite on Flickr, so they're not shown in the search preview, only as code.
Hello, I have been doctoring my campaign and I have been trying to update the color of the quick description in the character profiles to some more legible with my backgrounds and I have had no luck so far. Any suggestions from the CSS Black-Belts?
Comments
Try putting it in here:
body.campaign-public-layout .post-section { }
bc. /* Puts in a three part background with some padding and corner rounding */
.campaign-public-layout .main-content {
background:
url(http://omnichron.net/external/op/src/fc_parchment_top.png) top center no-repeat,
url(http://omnichron.net/external/op/src/fc_parchment_bottom.png) bottom center no-repeat,
url(http://omnichron.net/external/op/src/fc_parchment_main.png) top center repeat-y;
border-radius: 19px 11px 5px 12px;
padding: 20px;
}
bc. /* Turns off the default white background that would cover it up */
body.campaign-public-layout .post-section.post-main {
background: none;
}
bc. /* Removes the campaign color bar at the top of a wiki page */
.campaign-public-layout .main-content .highlight-container {
display:none;
}
With the particular images in this example, a width of 1305 is ideal, but this will vary depending on the images you use.
The only real limitation of this approach is that the tiling center section will tile behind the top and bottom, so if you need edge and corner cut-outs using an alpha channel then this isn't a great approach. But you can still do alpha along the vertical edges and a little corner rounding for a snazzy look with no fuss and no muss.
The problem I'm having is that this code affects the sidebar on an individual character's page, and that happens to be where the character's portrait is. Is there any way that I can have the code affect everything except the individual character pages?
If it helps, here's the code:
/* MAIN PAGE LAYOUT*/
.main-content-container { width:940px !important; font-size:14px;}
.character-avatar { overflow:hidden;}
.sidebar-adventure-log-neighbors { overflow:hidden;}
img { max-width:100%;}
#sidebar { width:20px; z-index:2; position:absolute; left:930px;background-color:white;border:1px solid Black;border-radius:2px;}
#sidebar:hover { width:250px; z-index:2; position:absolute; left:930px;background-color:white;border:1px solid Black;border-radius:2px;}
.module { overflow:hidden;}
.sidebar-last-updated { overflow:hidden;}
.highlight-container {height: 0px !important;}
@
.character-show .collapsable-nav-row.collapsed .main-content-container {
width: 58.33333%;
}
.character-show .collapsable-nav-row.collapsed .main-content-container {
width: 75%;
}
.character-show #sidebar, .character-show #sidebar:hover {
width: 25%;
z-index: 0;
position: relative;
left: 0px;
height: auto;
}
@
Chainsaw, I tried a solution like that earlier, but unfortunately with the specific images I'm using, I couldn't get the body background not to show behind the header and footer images. Your code would work great if the image I were using was more regularly shaped, but it's got little tears in spots along the top, and a notched corner, and a loose scroll of paper along the bottom. So they need to be loaded into separate containers, apparently. Still, Dawnhawk steered me right! Thanks for trying, regardless.
Now to see if I can't work out some of these color issues...
I reset it to your original code.
@
.character-show .collapsable-nav-row.collapsed .main-content-container {
width: 58.33333% !important;
}
.character-show .collapsable-nav-row.collapsed .main-content-container {
width: 75% !important;
}
@
This is needed to cancel out the !important in the base .main-content-container class.
Unconquered Kingdoms, July 2016 CotM
Anyway, on my individual character pages the list of tags are down in the middle of the character page. Essentially I just want to move them up to where they are even with the 'Description" header. I used inspect element and tried to move it with this code:
.tags-list {width:250px; z-index:2; position:absolute; left:930px; top:200px !important;}
but I got nothing... my CSS newb-ery is really shining tonight. lol
@.character-show .tags-list.inline-list.small-list {
left: 16px;
}@
Is that even possible? So far my code does nothing: .bq {color:black;} or .blockquote {color:black;}
Shadowrun: The Rat's Nest - COTM November 2014
@.blockquote {color:black !important;}@
Disclaimer, I haven't had the chance to try that yet, so no idea if that's truly the issue or not. I've encountered a number of changes that wouldn't stick until I added the !important, though.
bc. #content code {color:black;}
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Although seriously, to whomever figured out that "!important" tag... that's the only way I've gotten _anything_ done. I don't know how I ever would have figured that out on my own.
Shadowrun: The Rat's Nest - COTM November 2014
If you're adding this as CSS, there shouldn't be a . there. It should just be
@blockquote {color:black !important;}@
The !important probably may not be required, either.
Trying to fix a problem I'm having with... the search page. Basically, when I go to the character tab and click on a tag for one of my many characters it
goes to a search page which check boxes up top: All/Adventure Logs/Characters/Items/Wiki .... and when those boxes are check it shows anything with
the same tag on it.
So my problem is when it shows Wiki previews they are absolutely HUGE, way too big for the search.
I've been trying to style it so I can make them smaller and more manageable but so far I can't seem to track down the correct elements
without messing up other stuff on my wiki.
"The is an example":https://the-hero-academy.obsidianportal.com/search?tag=Faculty
I hope the link works correctly - otherwise just goto the character tab if you could find an NPC with the tag of Faculty (since its a pretty large group) click
on it and it should open up the search.
Any help would be greatly appreciated,
Sorceress
"The Hero Academy":https://the-hero-academy.obsidianportal.com/
Sorceress, I think the pictures may be the problem? I tried with my own campaign and the list is much more manageable. I host photos for the WIki offsite on Flickr, so they're not shown in the search preview, only as code.
Shadowrun: The Rat's Nest - COTM November 2014
bq. .blockquote p {color:black !important;} or whatever it is you're looking to change colors to?
I dont think you need the !important - but that's me but better safe than sorry I suppose.
Here is the campaign page in question.
"Realm Campaign":https://blackroom-games-realm.obsidianportal.com/characters
Shadowrun: The Rat's Nest - COTM November 2014