Hmmm... Dawnhawk figured out how to make them full size, but this should work:
@.adventure-log-index .post-content{height:300px;}
.adventure-log-teasers .row .post-column {height:300px;}
.adventure-log-teasers .adventure-log-post {height: 300px;}
.adventure-log-index .adventure-log-post .columns {height:300px;}
@
The last line is to make sure that the gray date column on the right side of the preview is the same height.
I am wracking my brain on these and not finding a way around them yet, so I thought I'd fish for a second opinion and a small amount of assistance.
The element for the quick description on a campaign's character page uses "script" within it (.character-index.campaign-public-layout .character-list-item .quick-description .description-text, .item-index.campaign-public-layout .character-list-item .quick-description .description-text), so I can't change it to black from gray.
Also, I'd like to do away with the right side fade out on that same page on the character's description line, but it uses the same sort of setup (.character-index.campaign-public-layout .character-list-item .quick-description .right-side-fade-out, .item-index.campaign-public-layout .character-list-item .quick-description .right-side-fade-out), thus preventing its removal with everything I've tried so far.
Here's a link to what I am referring to: https://strange-ways.obsidianportal.com/characters
"CRIMSON SKIES":http://www.obsidianportal.com/campaigns/crimson-skies
"COTM June 2012":http://blog.obsidianportal.com/crimson-skies-junes-campaign-of-the-month/
SkidAce, the selector for the dashboard side stuff (like the forums) is different. You'll want to change .campaign-public-layout to .campaign-dashboard-layout. If you'd like to get it to be the same on both the public side and the dashboard side try:
@.campaign-public-layout #content .main-content a, .campaign-dashboard-layout #content .main-content a {color:darkblue;text-decoration:none;}
.campaign-public-layout #content .main-content a:visited, .campaign-dashboard-layout #content .main-content a:visited {color:darkblue;text-decoration:none;}
.campaign-public-layout #content .main-content a:hover, .campaign-dashboard-layout #content .main-content a:hover {color:blue;text-decoration:underline;}
.campaign-public-layout #content .main-content a:active, .campaign-dashboard-layout #content .main-content a:active {color:darkblue;text-decoration:none;}
.campaign-public-layout #content .main-content a.create-wiki-page-link, .campaign-dashboard-layout #content .main-content a.create-wiki-page-link {color:red;text-decoration:none;}
.campaign-public-layout #content .main-content a:visited.create-wiki-page-link, .campaign-dashboard-layout #content .main-content a:visited.create-wiki-page-link {color:red;text-decoration:none;}
.campaign-public-layout #content .main-content a:hover.create-wiki-page-link, .campaign-dashboard-layout #content .main-content a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
.campaign-public-layout #content .main-content a:active.create-wiki-page-link, .campaign-dashboard-layout #content .main-content a:active.create-wiki-page-link {color:red;text-decoration:underline;}@
Do you mean the dashboard navigation menu on the left side? Yeah, it should do pretty much the exact same thing as the code for the main part of the site. And, now that I think of it, if you want to change the link colors all over your site except on the navigation bar...
@#content .main-content a {color:darkblue;text-decoration:none;}
#content .main-content a:visited {color:darkblue;text-decoration:none;}
#content .main-content a:hover {color:blue;text-decoration:underline;}
#content .main-content a:active {color:darkblue;text-decoration:none;}
#content .main-content a.create-wiki-page-link {color:red;text-decoration:none;}
#content .main-content a:visited.create-wiki-page-link {color:red;text-decoration:none;}
#content .main-content a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
#content .main-content a:active.create-wiki-page-link {color:red;text-decoration:underline;}@
I think that should do it. Using .campaign-public-layout as a selector restricts it to just the front facing part of the site, where as .campaign-dashboard-layout covers all things "behind the scenes" that only members of the campaign can access.
Thanks both of you. I tested both examples you gave me and they seem to produce identical results.
I.e. limiting the mods to the forums section.
The person's name posting the post still changes color (its a link after all) and the "insert image" etc button's pictures turned blue, but it did not affect the Forum Headers to the left, which was the most glaring inconsistency.
I am very happy with this solution, and appreciate the reminder about inspect element. I had looked at it somewhat but wasn't sure how to format the code.
My names and time posted didn't change, just the inner links.
@madartiste: But you know how fancy separating/combining classes with commas works... which I don't really know... >.> Although I guess I do now? I need to try that either way!
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Thorvaldr, the commas are great to save on space. Lets you style two (or as many as you like) elements with the same code: "http://webdesign.about.com/od/cssselectors/qt/tipcssgroupsele.htm":http://webdesign.about.com/od/cssselectors/qt/tipcssgroupsele.htm
@madartiste- Thank you for that! All I know of CSS is explicitly things I've looked up on how to do for Tyellador, so I'm lacking a lot of basic knowledge, like commas! Fantastic, thank you for linking me to that resource. My code is currently an epic kludge forged in the fires of "getting-the-site-back-looking-right-as-quickly-as-possible-after-the-Reforge"... so one of these days I have to go through it and organize it. Commas shall help!
@Skidace- A fair question. Does Obsidian Portal ever have meetups? Or are we too small of a site, and sometimes meet up at some comic-con convention thing? I know there's a few people on here I owe a drink to, and a few more I would love to have a drink with!
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Its probably set to "background-size: cover". You might try either or both of:
1) Change the height to a percentage value so that it scales with the width rather than hard setting both.
2) Add the "background-size: contain;" property.
Haven't actually tested either of those, just off the top of my head, so not 100% confident. The banner sizing may work differently than I remember. I do notice you are sizing the image itself rather than the container, and I remember one of them is locked to a 5:1 ratio, so it may be that the image is scaling properly but it is the container that needs to be addressed.
What I want is to be able to create any banner size I want and have it fit where it should; for example, if I want a long narrow (but maybe not all the way across) I create a 1000 x 100 banner.
Previously I could get it 1000px wide but it was cropped on the sides due to the actual image being stretched all the way across my active area. And no matter what height I made it, it always expanded to fill the entire container. I.e. if I made it 100px high it would expand to about 280 or so (not sure exact dimensions).
If I set the padding to the height of my image it matches my actual height, if I set the width to the image width, it is only that wide now.
Why PADDING would set the HEIGHT of an image I dont know, but now that I have tested this, I will make my actual 275x1000 image and upload it to confirm.
Comments
@.adventure-log-index .post-content{height:300px;}
.adventure-log-teasers .row .post-column {height:300px;}
.adventure-log-teasers .adventure-log-post {height: 300px;}
.adventure-log-index .adventure-log-post .columns {height:300px;}
@
The last line is to make sure that the gray date column on the right side of the preview is the same height.
The element for the quick description on a campaign's character page uses "script" within it (.character-index.campaign-public-layout .character-list-item .quick-description .description-text, .item-index.campaign-public-layout .character-list-item .quick-description .description-text), so I can't change it to black from gray.
Also, I'd like to do away with the right side fade out on that same page on the character's description line, but it uses the same sort of setup (.character-index.campaign-public-layout .character-list-item .quick-description .right-side-fade-out, .item-index.campaign-public-layout .character-list-item .quick-description .right-side-fade-out), thus preventing its removal with everything I've tried so far.
Here's a link to what I am referring to: https://strange-ways.obsidianportal.com/characters
Any thoughts?
@.character-list-item .character-info .right-side-fade-out {display:none;}
.character-info div:first-of-type div:first-of-type {color:gray !important;}@
"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/
I use madartiste's code for the wiki pages, which gladly keeps it off the sidebar. But I think that also forces it not to show in the forums?
@
.campaign-public-layout #content .main-content a {color:darkblue;text-decoration:none;}
.campaign-public-layout #content .main-content a:visited {color:darkblue;text-decoration:none;}
.campaign-public-layout #content .main-content a:hover {color:blue;text-decoration:underline;}
.campaign-public-layout #content .main-content a:active {color:darkblue;text-decoration:none;}
.campaign-public-layout #content .main-content a.create-wiki-page-link {color:red;text-decoration:none;}
.campaign-public-layout #content .main-content a:visited.create-wiki-page-link {color:red;text-decoration:none;}
.campaign-public-layout #content .main-content a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
.campaign-public-layout #content .main-content a:active.create-wiki-page-link {color:red;text-decoration:underline;}@
Unconquered Kingdoms, July 2016 CotM
@.campaign-public-layout #content .main-content a, .campaign-dashboard-layout #content .main-content a {color:darkblue;text-decoration:none;}
.campaign-public-layout #content .main-content a:visited, .campaign-dashboard-layout #content .main-content a:visited {color:darkblue;text-decoration:none;}
.campaign-public-layout #content .main-content a:hover, .campaign-dashboard-layout #content .main-content a:hover {color:blue;text-decoration:underline;}
.campaign-public-layout #content .main-content a:active, .campaign-dashboard-layout #content .main-content a:active {color:darkblue;text-decoration:none;}
.campaign-public-layout #content .main-content a.create-wiki-page-link, .campaign-dashboard-layout #content .main-content a.create-wiki-page-link {color:red;text-decoration:none;}
.campaign-public-layout #content .main-content a:visited.create-wiki-page-link, .campaign-dashboard-layout #content .main-content a:visited.create-wiki-page-link {color:red;text-decoration:none;}
.campaign-public-layout #content .main-content a:hover.create-wiki-page-link, .campaign-dashboard-layout #content .main-content a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
.campaign-public-layout #content .main-content a:active.create-wiki-page-link, .campaign-dashboard-layout #content .main-content a:active.create-wiki-page-link {color:red;text-decoration:underline;}@
Unconquered Kingdoms, July 2016 CotM
@#content .main-content a {color:darkblue;text-decoration:none;}
#content .main-content a:visited {color:darkblue;text-decoration:none;}
#content .main-content a:hover {color:blue;text-decoration:underline;}
#content .main-content a:active {color:darkblue;text-decoration:none;}
#content .main-content a.create-wiki-page-link {color:red;text-decoration:none;}
#content .main-content a:visited.create-wiki-page-link {color:red;text-decoration:none;}
#content .main-content a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
#content .main-content a:active.create-wiki-page-link {color:red;text-decoration:underline;}@
I think that should do it. Using .campaign-public-layout as a selector restricts it to just the front facing part of the site, where as .campaign-dashboard-layout covers all things "behind the scenes" that only members of the campaign can access.
Thanks.
Unconquered Kingdoms, July 2016 CotM
No way to just target just links in forum posts I suppose?
Unconquered Kingdoms, July 2016 CotM
bc. #content .forum-page-content .posts-section a {color:darkblue;text-decoration:none;}
#content .forum-page-content .posts-section a:visited {color:darkblue;text-decoration:none;}
#content .forum-page-content .posts-section a:hover {color:blue;text-decoration:underline;}
#content .forum-page-content .posts-section a:active {color:darkblue;text-decoration:none;}
#content .forum-page-content .posts-section a.create-wiki-page-link {color:red;text-decoration:none;}
#content .forum-page-content .posts-section a:visited.create-wiki-page-link {color:red;text-decoration:none;}
#content .forum-page-content .posts-section a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
#content .forum-page-content .posts-section a:active.create-wiki-page-link {color:red;text-decoration:underline;}
Here we're targeting the forum page post-area directly.
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
I.e. limiting the mods to the forums section.
The person's name posting the post still changes color (its a link after all) and the "insert image" etc button's pictures turned blue, but it did not affect the Forum Headers to the left, which was the most glaring inconsistency.
I am very happy with this solution, and appreciate the reminder about inspect element. I had looked at it somewhat but wasn't sure how to format the code.
THANKS!
Unconquered Kingdoms, July 2016 CotM
bc. #content .forum-page-content .post-content a {color:darkblue;text-decoration:none;}
#content .forum-page-content .post-content a:visited {color:darkblue;text-decoration:none;}
#content .forum-page-content .post-content a:hover {color:blue;text-decoration:underline;}
#content .forum-page-content .post-content a:active {color:darkblue;text-decoration:none;}
#content .forum-page-content .post-content a:create-wiki-page-link {color:red;text-decoration:none;}
#content .forum-page-content .post-content a:visited.create-wiki-page-link {color:red;text-decoration:none;}
#content .forum-page-content .post-content a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
#content .forum-page-content .post-content a:active.create-wiki-page-link {color:red;text-decoration:underline;}
My names and time posted didn't change, just the inner links.
@madartiste: But you know how fancy separating/combining classes with commas works... which I don't really know... >.> Although I guess I do now? I need to try that either way!
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
Unconquered Kingdoms, July 2016 CotM
Unconquered Kingdoms, July 2016 CotM
@Skidace- A fair question. Does Obsidian Portal ever have meetups? Or are we too small of a site, and sometimes meet up at some comic-con convention thing? I know there's a few people on here I owe a drink to, and a few more I would love to have a drink with!
-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/
@/* CUSTOM BANNER */
.campaign-public-layout #banner-container .campaign-banner-image {fixed; height: 275px; width: 1378px; margin-right: auto; margin-left: auto;}
@
Unconquered Kingdoms, July 2016 CotM
1) Change the height to a percentage value so that it scales with the width rather than hard setting both.
2) Add the "background-size: contain;" property.
Haven't actually tested either of those, just off the top of my head, so not 100% confident. The banner sizing may work differently than I remember. I do notice you are sizing the image itself rather than the container, and I remember one of them is locked to a 5:1 ratio, so it may be that the image is scaling properly but it is the container that needs to be addressed.
No matter what size I make the picture, it stretches all the way across the screen OR its cropped in from the sides.
I'll research the container.
Unconquered Kingdoms, July 2016 CotM
Unconquered Kingdoms, July 2016 CotM
Just want to make sure I understand the end result you are trying to achieve.
Previously I could get it 1000px wide but it was cropped on the sides due to the actual image being stretched all the way across my active area. And no matter what height I made it, it always expanded to fill the entire container. I.e. if I made it 100px high it would expand to about 280 or so (not sure exact dimensions).
However, I may have found something that works.
@/* CUSTOM BANNER */
.campaign-public-layout #banner-container .campaign-banner-image {padding-bottom: 100px; fixed; width: 1000px; margin-right: auto; margin-left: auto;}
@
If I set the padding to the height of my image it matches my actual height, if I set the width to the image width, it is only that wide now.
Why PADDING would set the HEIGHT of an image I dont know, but now that I have tested this, I will make my actual 275x1000 image and upload it to confirm.
Unconquered Kingdoms, July 2016 CotM
Properly sized picture and no cropping!
"Unconqured Kingdoms":https://unconquered-kingdoms.obsidianportal.com/
Thanks to Basileus and Langy...whose discussion and code helped me see the light.
Unconquered Kingdoms, July 2016 CotM
Unconquered Kingdoms, July 2016 CotM