I'm assuming this was put in for something else, but now with the "section" class also applied to tabs, it's making them that wide as well. You'll need to narrow in on selectors for whatever that 730 width is you are setting.
@Kallak: I'm not positive this is correct, but I downloaded some of my pages before the reforge (thank god I kept that reference...), and found this somewhere in the code:
Well, if you want, I cut and paste everything I found from the Style Editor in Firefox "here.":https://tyellador.obsidianportal.com/wikis/old-style-editor (I'd cut and paste all that code into an editor of some sort... it looks like crap on my site. :P) I'm not actually sure what the old font looked like... font-changing was the first thing I learned to do in CSS, so of course it was the first thing I had to do! :P Any chance that those are the fonts though, and some later, more important class overrid the size?
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Too much work. I appreciate all the work you guys are doing, but really? I have no clue what this CSS means. I have no idea when I copy and paste it into my site, what it does, or even IF it does. My tables are not transparent, yet I pasted that code in. It is not worth it. I don't have the time now. Maybe in December after NaNoWriMo. But I will know as little about CSS then as I do now.
Langy, I appreciate the help. When I get back in December, maybe I can get someone to take my hand and walk me through each of my hundreds of pages with broken code and let me know exactly what I did wrong, that seemed to be fine in the old system, that is broken now, like those extra, or missing, close divs. PM me if any of you have suggestions. Thanks.
"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
Believe me dude, I understand precisely where you are coming from. Please do the OP a favor and return in December, the Vanguards will hopefully be a lot less busy and hopefully the developers will have a few of the major bugs worked through.
Don't let all of this rob the rest of us of your excellent campaign, come back with fresh eyes and renewed purpose.
"Leonidas300":http://www.obsidianportal.com/campaign/metzger/wikis/leonidas300
"A Manifestation of Chaos":http://www.obsidianportal.com/campaign/metzger/wikis/main-page
COTM - Sept. 2012
I wonder if it would be beneficial for the Vanguard program to have access to something like Join.me or GoToMeeting so they could do remote walkthroughs. Teaching a man to fish rather than giving him a fish and all that...
Okay, using the advice you guys gave me, plus another piece of CSS I found from someone else in another post, I got the pages looking pretty much like I want them. My concern now is that instead of using img { max-width:none; } in the CSS I would like to restrict this only to the personal side bar that I use here: https://dark-horizon-26501.obsidianportal.com/
I had the same problem that PhoenixMark did in regards to the images for the side bar being shrunken down until I added the img { max-width:none; } to the CSS. However, I don't really want that to carry over to all of the images within the actual wiki text windows etc, it can make things look weird, and if people are using very small screens can cause pictures to break the frame so to speak. It's my understanding that img { max-width:none; } can be used more restrictively on just the images for my side bar using !important in there, but I really am not sure how the syntax of all of it is supposed to go.
This is what I currently paste into every wiki page to get the side bar format:
Hey, krymorin, just so you know, that sidebar is almost completely off screen for me. If it weren't for the fact that the rightmost edges of a couple of letters showed, I wouldn't even know you had it.
I'd like to say I am surprised but I am not, that's what my most recent post is about, formatting for smaller sized screens. If you don't mind me asking, what browser and screen resolution are you using to view it in?
On the adventure log tab is there a way to make those preview boxes bigger? I did custom banners with a summary and link to an expanded log which the way the logs are set up now actually complement that style but I cannot get everything sized correctly so that it can be seen.
Thanks,
"Leonidas300":http://www.obsidianportal.com/campaign/metzger/wikis/leonidas300
"A Manifestation of Chaos":http://www.obsidianportal.com/campaign/metzger/wikis/main-page
COTM - Sept. 2012
Leonidas, there should be a way...
Maybe:
.adventure-log-teasers .adventure-log-post {width:1000px;margin-left:-100px;}
Those pixel dimensions are totally random, by the way. You'd need to use the margin-left to shift the teasers over enough so that they're not running over the sidebar stuff.
I'm using Firefox (whatever the latest is) and a 1366 x 768 screen resolution. For what it's worth, every side navigation bar I've ever seen prior to the reforge ranged from slightly to three quarters of the way off screen for me, so it's not unique to you (yours was just particularly bad).
Thanks for the information Savannah. I would imagine it mostly has to do with your screen width. I know the settings on my site are set to stretch the entire body to 1100, and my nav bar is offset from that by another 290, which is why you are just barely catching a piece of it. Based on a number of the threads and posts I have read, probably many others have done similar things in terms of stretching the width from the default. Hopefully, I will eventually figure out how to use Langy's CSS advice to implement on the bar so it simply doesn't show when there isn't enough room. My main concern right now though is figuring out how to keep the nav images sized correctly, without losing the size scaling for all my images located in the wiki content container.
The [style*="position:fixed"] img { max-width:100%; } worked extremely well to fix my problem with the size on the nav bar images, though I had to change the 100% to none instead for it to work. That solves the biggest concern I had as the nav bar is good and my wiki images format correctly. You rock sir.
I also added the @media information in but I don't think that had any effect, at least I couldn't see any even after resizing my window down. The images were still partly visible even though it couldn't fit in the window frame. I was supposed to be adding that line in the Custom CSS code window right?
Oh, woops, yeah. That should have been 'none', not '100%'.
The issue with the other one is the curly-quotes; rewrite the "position:fixed" part using normal quotes. It should look like this:
@[style*=“position:fixed”] { display:none;
}
}@
(I couldn't put that whole thing in a code box (which preserves the correct quotes) because the media query requires the @ symbol, which is what is used to create the code box:/)
Thanks, with a little tweaking that fixed both my banner and adventure log preview.
"Leonidas300":http://www.obsidianportal.com/campaign/metzger/wikis/leonidas300
"A Manifestation of Chaos":http://www.obsidianportal.com/campaign/metzger/wikis/main-page
COTM - Sept. 2012
I'm fairly new to CSS and I wasn't able to find this anywhere. Does anyone know how to change the GM Only section a solid color (preferably black background with white text)?
bc. .post-gm-only {background-color: black !important; color:white;}
#gm-secrets {background-color: black !important; color:white;}
.player-secret {background-color: black !important; color:white;}
the .post-gm-only takes care of the wiki, the #gm-secrets takes care of GM secrets in chracter pages, and .player-secrets should take care of all the player secrets.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Comments
@.campaign-public-layout .section {
width: 730px;
}@
I'm assuming this was put in for something else, but now with the "section" class also applied to tabs, it's making them that wide as well. You'll need to narrow in on selectors for whatever that 730 width is you are setting.
- Kallak
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
- Kallak
/* --------------------------------------------------------------
typography.css
* Sets up some sensible default typography.
-------------------------------------------------------------- */
/* Default font settings.
The font-size percentage is of 16px. (0.75 * 16px = 12px) */
/* line 11, ../../app/assets/stylesheets/typography.css.scss */
body {
font-size: 75%;
color: #222;
background: #fff;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
I _think_ that should help!
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
- Kallak
- Kallak
Well, if you want, I cut and paste everything I found from the Style Editor in Firefox "here.":https://tyellador.obsidianportal.com/wikis/old-style-editor (I'd cut and paste all that code into an editor of some sort... it looks like crap on my site. :P) I'm not actually sure what the old font looked like... font-changing was the first thing I learned to do in CSS, so of course it was the first thing I had to do! :P Any chance that those are the fonts though, and some later, more important class overrid the size?
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Langy, I appreciate the help. When I get back in December, maybe I can get someone to take my hand and walk me through each of my hundreds of pages with broken code and let me know exactly what I did wrong, that seemed to be fine in the old system, that is broken now, like those extra, or missing, close divs. PM me if any of you have suggestions. 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
Believe me dude, I understand precisely where you are coming from. Please do the OP a favor and return in December, the Vanguards will hopefully be a lot less busy and hopefully the developers will have a few of the major bugs worked through.
Don't let all of this rob the rest of us of your excellent campaign, come back with fresh eyes and renewed purpose.
"Leonidas300":http://www.obsidianportal.com/campaign/metzger/wikis/leonidas300
"A Manifestation of Chaos":http://www.obsidianportal.com/campaign/metzger/wikis/main-page
COTM - Sept. 2012
I had the same problem that PhoenixMark did in regards to the images for the side bar being shrunken down until I added the img { max-width:none; } to the CSS. However, I don't really want that to carry over to all of the images within the actual wiki text windows etc, it can make things look weird, and if people are using very small screens can cause pictures to break the frame so to speak. It's my understanding that img { max-width:none; } can be used more restrictively on just the images for my side bar using !important in there, but I really am not sure how the syntax of all of it is supposed to go.
This is what I currently paste into every wiki page to get the side bar 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
Can anyone show me the format of what needs to be added in where?
Btw, I saw your side bar format Langy, but I am not really sure how to implement it.
I'd like to say I am surprised but I am not, that's what my most recent post is about, formatting for smaller sized screens. If you don't mind me asking, what browser and screen resolution are you using to view it in?
Thanks,
"Leonidas300":http://www.obsidianportal.com/campaign/metzger/wikis/leonidas300
"A Manifestation of Chaos":http://www.obsidianportal.com/campaign/metzger/wikis/main-page
COTM - Sept. 2012
Maybe:
.adventure-log-teasers .adventure-log-post {width:1000px;margin-left:-100px;}
Those pixel dimensions are totally random, by the way. You'd need to use the margin-left to shift the teasers over enough so that they're not running over the sidebar stuff.
Try using the following:
@[style*="position:fixed"] img { max-width:100%; }@
And remove the previous max-width:100% tag. That should make it so only the images in your sidebar use it.
If you don't want your sidebar to display at all if the screen is smaller than, say, 1400 pixels wide, then use:
@media screen and (max-width: 1400px){
[style*="position:fixed"] {
display:none;
}
}
The [style*="position:fixed"] img { max-width:100%; } worked extremely well to fix my problem with the size on the nav bar images, though I had to change the 100% to none instead for it to work. That solves the biggest concern I had as the nav bar is good and my wiki images format correctly. You rock sir.
I also added the @media information in but I don't think that had any effect, at least I couldn't see any even after resizing my window down. The images were still partly visible even though it couldn't fit in the window frame. I was supposed to be adding that line in the Custom CSS code window right?
Thanks again for the help.
The issue with the other one is the curly-quotes; rewrite the "position:fixed" part using normal quotes. It should look like this:
@[style*=“position:fixed”] { display:none;
}
}@
(I couldn't put that whole thing in a code box (which preserves the correct quotes) because the media query requires the @ symbol, which is what is used to create the code box:/)
Thanks, with a little tweaking that fixed both my banner and adventure log preview.
"Leonidas300":http://www.obsidianportal.com/campaign/metzger/wikis/leonidas300
"A Manifestation of Chaos":http://www.obsidianportal.com/campaign/metzger/wikis/main-page
COTM - Sept. 2012
Unconquered Kingdoms, July 2016 CotM
bc. I have code here.
You just need to do this:
bc. bc. I have code here
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Neat, thanks.
Unconquered Kingdoms, July 2016 CotM
Just trying to help out.
Learning is the first goal....
Unconquered Kingdoms, July 2016 CotM
Yup, that fixed it, it's disappearing as it should on the resize. Thanks so much sir.
I'm fairly new to CSS and I wasn't able to find this anywhere. Does anyone know how to change the GM Only section a solid color (preferably black background with white text)?
Put this in your CSS section:
bc. .post-gm-only {background-color: black !important; color:white;}
#gm-secrets {background-color: black !important; color:white;}
.player-secret {background-color: black !important; color:white;}
the .post-gm-only takes care of the wiki, the #gm-secrets takes care of GM secrets in chracter pages, and .player-secrets should take care of all the player secrets.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/