Custom CSS Beta Discussion

11920222425

Comments

  • SkidAce
    SkidAce
    Posts: 830
    And I can move it around with the margins.

    "Altered Fate":https://altered-fate.obsidianportal.com/
  • Keryth987
    Keryth987
    Posts: 1,018
    So, if I understand correctly, SkidAce, if you take the code you have above, and set the padding bottom to 250 and the width to 500 it will utilize a 500x250 image without overt stretching?


    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • SkidAce
    SkidAce
    Posts: 830
    Yes, don't know why but it works.

    No stretching no cropping.

    And you can alter the left margin to move it back and forth to center it. (i.e. margin-left: 250px;) (change number to suit)
  • Basileus
    Basileus
    Posts: 589 edited March 2014
    *Why it works that way* (I think): So this is OP's default CSS for the banner image:

    @.campaign-public-layout #banner-container .campaign-banner-image{width:100%;height:0;padding-bottom:20%}
    @

    Note that the "width:100%" property is relative to the parent object, making the banner width equal to the content width. So a "height:100%" would make the banner as tall as the content area (which would be really tall!), rather than as tall as the image it contains.

    Whereas, padding is relative in size to the object it is applied to (rather than the parent), so by setting it to 20%, that is where they are creating the default 5:1 ratio.

    If you just try to use width and height in raw pixels to size your custom banner, you are getting your own dimensions in addition to the default padding, which is why it looks off.

    ---

    As an aside, you can also probably ditch the "fixed" bit. I believe that may be my fault, I think I introduced that in my Quick 'n Dirty CSS thread, but it is trash code and isn't actually doing anything (would have to be something like "position: fixed;" to have any effect).
    Post edited by Basileus on
  • SkidAce
    SkidAce
    Posts: 830
    Thank you. I actually understand that.

    "Basileus", bringing light to the masses...hehe.


    - SkidAce

    "Alfaysia - campaign hub":https://alfaysia.obsidianportal.com/
    "Unconquered Kingdoms - current campaign":https://unconquered-kingdoms.obsidianportal.com/
  • SkidAce
    SkidAce
    Posts: 830
    Using what ya'll taught me...

    @/* CUSTOM LINKS */
    .campaign-public-layout #content .wiki-page-container a {color:blue;text-decoration:none;}
    .campaign-public-layout #content .wiki-page-container a:visited {color:blue;text-decoration:none;}
    .campaign-public-layout #content .wiki-page-container a:hover {color:blue;text-decoration:underline;}
    .campaign-public-layout #content .wiki-page-container a:active {color:blue;text-decoration:none;}
    .campaign-public-layout #content .wiki-page-container a.create-wiki-page-link {color:red;text-decoration:none;}
    .campaign-public-layout #content .wiki-page-container a:visited.create-wiki-page-link {color:red;text-decoration:none;}
    .campaign-public-layout #content .wiki-page-container a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
    .campaign-public-layout #content .wiki-page-container a:active.create-wiki-page-link {color:red;text-decoration:underline;}
    .campaign-public-layout #content .campaign-landing-page-container a {color:blue;text-decoration:none;}
    .campaign-public-layout #content .campaign-landing-page-container a:visited {color:blue;text-decoration:none;}
    .campaign-public-layout #content .campaign-landing-page-container a:hover {color:blue;text-decoration:underline;}
    .campaign-public-layout #content .campaign-landing-page-container a:active {color:blue;text-decoration:none;}
    .campaign-public-layout #content .campaign-landing-page-container a.create-wiki-page-link {color:red;text-decoration:none;}
    .campaign-public-layout #content .campaign-landing-page-container a:visited.create-wiki-page-link {color:red;text-decoration:none;}
    .campaign-public-layout #content .campaign-landing-page-container a:hover.create-wiki-page-link {color:lightred;text-decoration:underline;}
    .campaign-public-layout #content .campaign-landing-page-container a:active.create-wiki-page-link {color:red;text-decoration:underline;}
    #content .forum-page-content .post-content a {color:blue;text-decoration:none;}
    #content .forum-page-content .post-content a:visited {color:blue;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:blue;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;}
    #content .icon-edit {color:darkgray !important;}@

    I know have custom color links on my front page, wiki pages, and forums. But it does not mess with any other links that I can discover.

    Thanks all...
  • SkidAce
    SkidAce
    Posts: 830
    Dang it, it changes the tag colors on wiki pages....grumble grumble...
  • NikMak
    NikMak
    Posts: 379
    White 'heading' text and font selection

    hi all, I am trying to get my heading text to display as white using the following (but needless to say its not working!)

    #campaign-content h1, h2, h3 {color:white !important; font-family:Almendra SC}

    what am I doing wrong please?

    if you take a look at the campaign ( https://the-great-pendragon.obsidianportal.com/ ) you will see the bulk of the text displays as white, as required, but not any text preceded with a 'h1' etc. command

    cheers

    Nick
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,978
    Recently the text color change went wonky. I have a "help":http://help.obsidianportal.com/discussions/problems/12881-white-text-no-longer-working ticket open- feel free to add on.
    killervp
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    Just trying to help out.

  • NikMak
    NikMak
    Posts: 379
    @ killverp - done :)
  • Keryth987
    Keryth987
    Posts: 1,018
    Ok, playing around with Thorvaldr's code for Custom Navigation Box for my newest site, and can;t get the font to change

    Here's the code I'm using (and I forget how to do the fancy quote box, so, pardon the mess)


    /*Navigation Bar*/
    .campaign-public-layout #campaign-nav {
    top:31.5px; background-color:transparent;}
    .icon{display:none !important;}
    .collapsable-nav-row .front-nav-container {
    width:100%;
    background-image:url(https://db4sgowjqfwig.cloudfront.net/assets/305548/Stargate_Computer_Screen_3_by_Duratec.jpg?1394638556);
    background-repeat:no-repeat;
    top:28px;
    left:-20px;
    width:191px;
    height:423px;};}
    #campaign-nav .nav-text{font-family:Audiowide;}

    Everything works EXCEPT the font. And I'm using Audiowide throughout the rest fo the site, and it works fine. Any ideas or suggestions?

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • Basileus
    Basileus
    Posts: 589 edited March 2014
    NikMak, try using the .campaign-public-layout and .main-content classes instead of the #campaign-content ID. Also, ditch the "!important" statement (shouldn't be necessary and you don't want to use that when you don't have to).

    To specifically overwrite the default CSS exactly, copy/paste this:

    @.campaign-public-layout .main-content h1, .campaign-public-layout .main-content h2, .campaign-public-layout .main-content h3, .campaign-public-layout .main-content h4, .campaign-public-layout .main-content h5, .campaign-public-layout .main-content h6 {color: white;}@

    EDIT: Oh, you may also want to look at the line above in your CSS that says "campaign heading format". It isn't commented out appropriately (looks like a typo) so is being interpreted as code.

    ---

    ALSO EDIT: Keryth, it looks like you may just need to delete that extra ";}" in the last line and hit return to bump the font setting to a new line. Maybe also use single quotes around the name of the font. In other words, replace the last line with this:

    @height:423px;}
    #campaign-nav .nav-text{font-family:'Audiowide';}@
    Post edited by Basileus on
  • Keryth987
    Keryth987
    Posts: 1,018
    Thanks Basileus, that fixed it.

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • NikMak
    NikMak
    Posts: 379
    @ Basileus

    excellent work, many thanks for fixing this! I repaired the typo, and re-positioned your new code adjacent to my text box command (called '.greenbox'), and once I did that it worked well :)

    just out of curiosity why did I have to re-position the 'Basileus text' (hmmm, that may just have given me a plot seed for the next adventure... ) next to the .greenbox code before it will work correctly? Isnt the whole page scanned and then created? or is the order in which things are scanned by the browser important?
  • Basileus
    Basileus
    Posts: 589
    This is my poor man's explanation. I'm mostly self-taught, so no guarantees of accuracy - I can tell you more about why that way worked than why the first way didn't. Anyway, two things:

    First, CSS is hierarchical. So settings that apply at a broader level (i.e. to all text on a page) are overwritten by settings at a more specific level (i.e. to just the header text). The default OP CSS takes advantage of this in several places.

    Second, the default CSS from OP is applied from a separate stylesheet, which is applied first, and then your custom CSS is in a second stylesheet which is applied afterward.

    The problem arises in that unless you supply a new value for the exact same setting that is in the first stylesheet (which replaces it), you will end up with conflicting settings. And between your conflicting settings, either the .main-content class (which the default setting uses) was more specific than the #campaign-content ID (which you were using), or something along those lines, making the default setting override your custom setting. The trick was just to specifically override the default setting using the exact same selectors and properties that are used in the default CSS, so that the CSS hierarchy didn't come into play.

    In short, by being more precise about what we applied the rule to, we forced it to use your settings instead of letting it decide for itself which should apply.
  • NikMak
    NikMak
    Posts: 379
    well ok then, i have learnt something important... that may explain quite a few issues i have had in the past as well. thanks for taking the time to teach me.

    cheers

    Nick
  • Leonidas300
    Leonidas300
    Posts: 272
    I want to thank Thorvaldr for helping me find fixes for my tables and my spacing issues.

    I have been playing around with reinstating the side bar I had pre-reforge and I've got the size right but I'd like to be able to change the link color on this side bar alone (right now it's blue), I have my CSS link settings as blue to fix the dreadful yellow reforge default but I can't get these to color different.

    below is my code which is rejected in the CSS area but works fine on the main page








    REFERENCES

    * Main Page
    * Main Wiki
    * Core Rules
    * Exp. Points
    * Adv. Logs


    PEOPLE
    * Characters
    * Players
    * PRP Ledger
    * Forums
    * Comments


    PLACES
    * Game Map
    * The Lair
    * Dungeons
    * Graveyard


    ITEMS
    * Magic Items
    * Group Fund





    "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
  • Leonidas300
    Leonidas300
    Posts: 272
    never mind got it to work
  • Keryth987
    Keryth987
    Posts: 1,018
    Cross posting as this topic seems to get more responses than a separate one

    Thanks to ImmortalDM, TolsimirWolfblood, Basileus, and Thorvaldr, I’m customizing the Character Page on my newest campaign site and have MOSTLY what I want. This is all based off of the customization info from Thorvaldr’s tutorial, CSS code shared with me by ImmortalDM and a modification of the Border Styling created by TolsimirWolfblood and Basileus.

    I've ALMOST got what I want.

    Here's the Code:

    /*CHARACTER PAGE CUSTOMIZATION*/
    .character-name.title {position:relative; margin-left:auto; margin-right:auto; width:95%;font-family:'Audiowide';font-weight:normal; text-align:center;}
    .character-show .main-content section{background-color:white !important;}
    .character-show .bio h6, .character-show .tagline + div h6 {display:none;}
    .character-index.campaign-public-layout .character-list-item .character-info div, .item-index.campaign-public-layout .character-list-item .character-info div {font-size:small; font-style: italic; color: white;}
    .character-list-item { position:relative;top:30px; background: linear-gradient(23deg, #2f0be0 0%, #000000 100%); font-family:'Times New Roman'; }
    .item-name.title {font-family:'Audiowide';}
    .right-side-fade-out {display:none;}
    .tags-list {color:transparent;}
    .character-info h4.character-name.title a {color:white;}
    .character-info h4.item-name.title a {color:white;}
    .character-info h4.character-name.title a:hover {color:blue; }
    .character-info h4.item-name.title a:hover {color:red; }
    .character-info ul li a.tag-link {display:none;position:relative;left:-20px; color:blue;}
    .character-list-item-container {position:relative !important; width:33.33% !important;height:125px !important;display:inline; clear:none !important; color:transparent;}
    .character-quick-search {background-color:transparent !important;}
    #quick_search {display:none;opacity:0.5;}
    .postfix {display:none;opacity:0.5;}
    .show-tag-check-list{display:none;}
    .character-quick-search h4 {background-image:url(https://db4sgowjqfwig.cloudfront.net/assets/310662/Sci-Fi-SciFi-Banner.jpg?1395840263);width:885px;height:110px;font-size:xx-large;font-family:'Audiowide';color:royalblue !important;font-weight:bold;text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 0px 0px 4px black;text-align:center;}
    .dynamic_sheet_container {overflow: visible;}
    .character-list {BACKGROUND-IMAGE:url(http://cdn.obsidianportal.com/assets/198888/background1a.jpg); }
    .character-list {border: 15px solid transparent; border-image:url(https://db4sgowjqfwig.cloudfront.net/assets/310038/background.png?1395679981) 12 12 12 12 round;} .collapsed.collapsable-nav-row .main-content-container {width: 35%; left: 5.06em; padding-left: 0em; background-color: white}

    The thing now, is changing the text that is shown. Anyone know how to overwrite "Character Quick Search" with simply "Characters" and also, how to move it down a line in the display so it is centered from the top?

    Thanks

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • bluesguy
    bluesguy
    Posts: 127
    I am looking for help on my Navbar. Here is a "link":https://nyonia-celestial-jewels.obsidianportal.com/ to my campaign.

    Here is my the css code I think is applicable

    /*NAVBAR*/
    .adventure-log {display:none}
    .calendar {display:none}
    .characters {display:none}
    .dashboard {display:none}
    .forum {display:none}

    .collapsable-nav-row .front-nav-container {width:100%; background-image:url(https://db4sgowjqfwig.cloudfront.net/assets/312347/nav-board.jpg); background-repeat:no-repeat; top:-10px; left:15px; width:191px; height:280px;}

    /*Change Link Names*/
    /*remove current text*/
    #campaign-nav .front-page .nav-text {font-size:0;}
    #campaign-nav .adventure-log .nav-text {font-size:0;}
    #campaign-nav .wiki .nav-text {font-size:0;}
    #campaign-nav .characters .nav-text {font-size:0;}
    #campaign-nav .maps .nav-text {font-size:0;}
    #campaign-nav .settings .nav-text {font-size:0;}

    /*add new text*/
    #campaign-nav .front-page a:after {content:"Nyonia - Celestial Jewels";}
    #campaign-nav .wiki a:after {content:"o Cyclopedia";}
    #campaign-nav .maps a:after {content:"o Atlas";}
    #campaign-nav .settings a:after {content:"o GM Tools";}
    #campaign-nav .bullet.nav-links {position:relative; top:30px;left:30px;}

    /* GET RID OF NAV ICONS */
    .op-icon {display:none !important;}
    .icon{display:none !important;}

    /* REFORMATING NAV-BAR */
    .menu-text{font-family:Georgia,serif;}
    .collapsable-nav-row .front-nav-container{width:13%;}

    What I would like to be able to do for my Navbar is the following (showing as a text layout; and I would like to use my nav-board.jpg):

    * Nyonia - Celestial Jewels (goes to front page of this campaign)
    ** Cyclopedia (goes to wiki)
    ** Atlas (goes to a specific place in wiki)
    ** GM Tools (goes to settings)

    * Nyonia - Age of Exploration (goes to a different OP campaign)

    Any assistance would be appreciated.
  • berdman
    berdman
    Posts: 46
    I have tried searching the Fourm and have not been able to find an answer, so I thought I would ask here.

    On a Wiki Page I want to make the background on the tag list at the top transparent.

    I have tried this CSS, but I am missing something because the background is still white. I cannot find an ID that I can style so I am stuck.

    .campaign-public-layout .tags .tags-list.inline-list .tag-link
    {
    background-color:transparent !important;
    }

    Here is a link to one of the wiki pages: https://chrome-in-the-shadows.obsidianportal.com/wikis/the-factions

    Any help would be appreciated.
  • Thorvaldr
    Thorvaldr
    Posts: 141
    @Bluesguy- The problem with CSS is that it can't create, it can only manipulate. What I _think/hope_ we could do is change the links that you've display:none'd, and possibly direct them to the other places you want to go. But until I get some time at home to play with it, I'm not really sure. ...although the more I think of it, the less likely I think it's possible to do that. Possibly, the only solution you'd have is to add HTML to every single page on your site, but I know I hate doing that.

    @Berdman- taking a quick look at things, it's possible you _did_ make your tags background transparent. However, I think it might be transparent against your post-header background. Try changing the background color in the code you posted here (so your tags background) to red, so you'll _really_ see if you change it. If it changes to red, then you really know it's also changing to transparent as well. If not, change your classes around a little bit. (I _think_ you possibly don't need everything to the right of ".tags", but I'm not positive on that.)

    If the tags background is really transparent against your post-header background, maybe you need to move the tags up above the .post-header container, using the top: -XX (Like top: -20px;) or so.

    Hope this helps a bit! Tell me if I need to clarify anything... or if it's still not working at all.

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • berdman
    berdman
    Posts: 46
    @Thorvaldr thanks for the help. It turns out the tags were getting transparent, but the underlying background color was coming through. After messing with a couple different approaches, I just wrapped my content in a div and made the background-color white and then made the .post-hearder container transparent and that worked.

    You were also correct about the classes. Overriding .tags took care of the tags containers, but adding the others lets me mess with the background on the tags individually which is not what I was after, but might come in handy.

    Now I have to figure out what I want to do with the tags because they are getting lost in the background.

    Thanks again for pointing me in the correct direction.
  • Thorvaldr
    Thorvaldr
    Posts: 141
    I recently updated my "Custom Character's Page tutorial":https://tyellador.obsidianportal.com/wikis/custom-characters-page.

    One problem I still seem to be having is that if the code is cut and pasted from my wiki into someone’s CSS box, it won’t work correctly, because of the apostrophe. “ ‘ “. It apparently changes it’s… type from one area to the next. I think I remember reading about that once, but can’t remember if there was a fix for it. Is there a fix for it, or should I just tell people to manually replace all apostrophes?

    How it looks in the wiki:
    background-image: url('http://cdn.obsidianportal.com/assets/211562/Wood-shield.png');

    How it needs to look in CSS:

    bc. background-image: url('http://cdn.obsidianportal.com/assets/211562/Wood-shield.png');

    I would _prefer_ not to use the code box...

    -Thorvaldr
    DM of "Tyellador:":https://tyellador.obsidianportal.com/ "CotM April '14":http://blog.obsidianportal.com/tyellador-april-cotm-14/
  • SkidAce
    SkidAce
    Posts: 830 edited April 2014
    Funny thing Thorvaldr...I removed the quotes completely and it works fine.

    @background-image: url(https://db4sgowjqfwig.cloudfront.net/assets/317621/Character_Plate.jpg?1397575599);@
    Post edited by SkidAce on
  • Thorvaldr
    Thorvaldr
    Posts: 141
    ...huh... well I'll be damned. That does seem to work! ...why does that work? I could have _sworn_ CSS needed some sort of quotes around a link... But that's awesome!

    -Thorvaldr
    DM of "Tyellador:":https://tyellador.obsidianportal.com/ "CotM April '14":http://blog.obsidianportal.com/tyellador-april-cotm-14/
  • Basileus
    Basileus
    Posts: 589
    Quotes are useful if you have special characters in your URL that need to be escaped, but otherwise single, double, or no quotes are all valid.
  • Keryth987
    Keryth987
    Posts: 1,018
    As long as you keep the type of quotes consistent, Starting with single and ending with double is a BAD idea :)

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • bluesguy
    bluesguy
    Posts: 127
    @Thorvaldr thank you for the update. I don't want to have a bunch of html to add all my pages.
  • weasel0
    weasel0
    Posts: 435 edited May 2014
    Okay, so in an effort to darken my campaigns theme, I've gotten the white areas of the public side transparent and a nice black color and I've gotten the text color altered. I'd like to change all the headers site wide, public and dashboard to a more visible color.

    Simple h1 {color:red;} will change the dashboard side. I was hoping that since it wasn't specifically aimed at the dashboard that it would carry into the front and back, but it isn't. I've wandered through the various pages here and tried aiming it using the .public tags but can't seem to get it right. What simple thing that makes me feel dumb am I missing? :p

    "Campaign here":https://learning-the-dst.obsidianportal.com/wikis/main-page/

    This seems to leave out the h1 but does change at least h4 and h5 on the dashboard side.

    /*Headers*/
    h1,
    h2,
    h3,
    h4,
    h5
    {
    color:red;
    }
    Post edited by weasel0 on
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