Custom CSS Beta Discussion

11921232425

Comments

  • madartiste
    madartiste
    Posts: 328 edited February 2014
    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.
    Post edited by madartiste on
  • Dropbeartots
    Dropbeartots
    Posts: 75
    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

    Any thoughts?

  • madartiste
    madartiste
    Posts: 328
    Try:
    @.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
    PhoenixMark
    Posts: 90
    Thank you madartise (and Dawnhawk), it worked brilliantly.

    "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/
  • Dropbeartots
    Dropbeartots
    Posts: 75
    @madartiste Perfect! Thanks very much :)

  • madartiste
    madartiste
    Posts: 328
    Glad I could help. :)
  • SkidAce
    SkidAce
    Posts: 830
    How do I target the colors of links that I create in the forums?

    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;}@
  • madartiste
    madartiste
    Posts: 328
    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;}@
  • SkidAce
    SkidAce
    Posts: 830 edited February 2014
    Thank you, but just to clarify...can you change the color of the forum links and NOT change the sidebar? Or are they both the same thing?
    Post edited by SkidAce on
  • madartiste
    madartiste
    Posts: 328 edited February 2014
    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.
    Post edited by madartiste on
  • SkidAce
    SkidAce
    Posts: 830
    That last bit of code did it. Forum links are now easier to read, but it didn't affect the sidebar of the dashboard like what I had before.

    Thanks.
  • SkidAce
    SkidAce
    Posts: 830
    Bummer, it did affect a lot of other things, like the buttons, forum post headers, names of the poster etc.

    No way to just target just links in forum posts I suppose?
  • madartiste
    madartiste
    Posts: 328 edited February 2014
    Edit: Thorvaldr has better code than I came up with. :)
    Post edited by madartiste on
  • Thorvaldr
    Thorvaldr
    Posts: 141
    @SkidAce: Try the following:

    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/
  • madartiste
    madartiste
    Posts: 328 edited February 2014
    Oh, good call, Thorvaldr! Much better than what I had.
    Post edited by madartiste on
  • SkidAce
    SkidAce
    Posts: 830
    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.

    THANKS!
  • Thorvaldr
    Thorvaldr
    Posts: 141 edited February 2014
    @SkidAce: Always a pleasure to help! But, we can go for 100%, one more block of code!

    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/
    Post edited by Thorvaldr on
  • SkidAce
    SkidAce
    Posts: 830
    SWEET! Where are the two of you...want one of my beers?
  • Thorvaldr
    Thorvaldr
    Posts: 141
    ...yes. Yes I would like that. I'm sure Connecticut isn't too far away for a beer, right? :P
  • SkidAce
    SkidAce
    Posts: 830
    Virgina. Maybe a convention in between?
  • madartiste
    madartiste
    Posts: 328 edited February 2014
    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
    Post edited by madartiste on
  • Thorvaldr
    Thorvaldr
    Posts: 141
    @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/
  • SkidAce
    SkidAce
    Posts: 830
    Anyone know why this code will crop the banner instead of re-sizing it if I type in a different width?

    @/* CUSTOM BANNER */
    .campaign-public-layout #banner-container .campaign-banner-image {fixed; height: 275px; width: 1378px; margin-right: auto; margin-left: auto;}
    @
  • Basileus
    Basileus
    Posts: 589 edited February 2014
    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.
    Post edited by Basileus on
  • SkidAce
    SkidAce
    Posts: 830
    Yeah thanks, I don't get it.

    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.
  • SkidAce
    SkidAce
    Posts: 830
    That was a serious thank you in case you thought otherwise. Text can be misinterpreted.
  • Basileus
    Basileus
    Posts: 589
    So you are looking to increase the height of the image so that it shows the whole thing, but still go all the way across?

    Just want to make sure I understand the end result you are trying to achieve.
  • SkidAce
    SkidAce
    Posts: 830
    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).

    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.
  • SkidAce
    SkidAce
    Posts: 830
    HURRAH!

    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.
  • SkidAce
    SkidAce
    Posts: 830
    Shame I don't know why it works.
Sign In or Register to comment.

January 2023
Fake News, Real Adventure

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions