Custom CSS Beta Discussion

1101113151625

Comments

  • monstro95968
    monstro95968
    Posts: 4
    Hello,

    I do not understand CSS or any programming, and don't have the time to put into working on your product for you. Could you please give me an ETA as to when I can come back to Obsidian and review your finished product under the assumption that I am not your employee but someone who pays you to use your service. As it stands now, I am currently not using your product because it hurts my eyes. Everything else is pretty much rotten icing on what was, at one time, a pretty good cake. But I could honestly care less about half of the problems on OP given that discovering them would make me go blind, what with the shrunken text fields and the bleached out fonts and colors.

    Can all this be fixed with Css? Great. Fix it. I pay you. Email me when you have made the site ready to be looked at again.

    Thanks.
  • Langy
    Langy
    Posts: 364
    The shrunken text fields and bleached out font/colors can already be fixed without CSS. Just go to the settings part of your dashboard and tweak to your liking using the provided options.
  • Keryth987
    Keryth987
    Posts: 1,047 edited October 2013
    OK. Call for help coming out here.

    I've MOSTLY restored how my character sheets look for Shadows Over New York (on one character. Figure, fix it first then copy what I did for the others), just two issues

    Warning, this site was made using the old school Div style.

    Anyhow, the page in question can be found here: "Andromeda Spiridakos Character Sheet":https://shadows-over-new-york.obsidianportal.com/characters/andromeda-spiridakos

    My two problems are this:

    1) How do I get rid of that big white box put there by OP? I need to do this for the whole campaign actuallly
    2) If you scroll ALL THE WAY DOWN, you can see what is obviously OP's default Character stuff that should be in the right margin, yet I cannot fathom how to put it where it should be.

    thanks

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

  • Thorvaldr
    Thorvaldr
    Posts: 141
    @Keryth987:

    1. Try this:

    bc. #character-details{background-color:transparent;}
    .main-content-container { !important; background-color:transparent;}
    .campaign-landing-page-container{background-color:transparent !important;}
    .post-main{background-color:transparent !important;}

    I _think_ that's all I needed to get rid of all of those.

    2. One of your content containers is probably too big, and is pushing your character stuff aside and down. I was having this issue as well. Try decreasing the width in ".main-content-container" or increase the width of "#content". You might like using "#content {max-width:___px !important;}", so that it can squish as your resize your window.

    Hope this helps somewhat!

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • Langy
    Langy
    Posts: 364
    You've got an extra close-div somewhere on that page, which is probably why the stuff in the right margin is in the wrong place. The extra one looks to be in the Description section, at the end of your first BORDERBOX div. Get rid of that close-div and it should help a lot.

    The big white box can be gotten rid of with:

    .character-show .main-content section, .item-show .main-content section, .campaign-landing-show .campaign-landing-page-container, body.campaign-public-layout .post-section.post-main { background:none;}
  • Dropbeartots
    Dropbeartots
    Posts: 96 edited October 2013
    I just wanted to say thanks to everybody here who's helped out with the CSS styling, you've all been very instructional and inspirational to me :)

    If anybody's missed out on changing the inactive links color with CSS, here's a spot of helpful code. I think most of you older hands probably already know about this, but just in case I'm posting it here as I've seen a lot of complaints on that issue.

    /* Inactive Link Appearance */
    #content a:link.create-wiki-page-link {color:red;text-decoration:underline;}
    #content a:visited.create-wiki-page-link {color:red;text-decoration:underline;}
    #content a:hover.create-wiki-page-link {color:purple;text-decoration:underline;}
    #content a:active.create-wiki-page-link {color:red;text-decoration:underline;}

    I've been trying to fiddle around with things to get closer to the look I was aiming for with "Emerald City Blue":http://emerald-city-blue.obsidianportal.com/ before reforging, and having a lot of fun tinkering with things. I don't mind having to recode things at all because I'm enjoying the learning experience :) If anybody has any thoughts about any thing that might improve it, feel free to drop a comment here or a PM, I could always use the help.

    -I don't have Chrome currently and didn't really want to download it again since it seems pretty buggy on Win 8, until the Inspect Element was mentioned. I'm looking at IE11, and wondering why it doesn't have something comparable, or where I am missing it... any pointers there?- Edit: Found it, I feel dumb... I was looking at the *modern app* and not the desktop version...
    Post edited by Dropbeartots on

  • Thorvaldr
    Thorvaldr
    Posts: 141 edited October 2013
    @Langy: I can actually get rid of the backgrounds?! Not just make them invisible? ...that's a bit better of a system than I've been using... Also putting commas between all of the classes instead of individual lines... *Goes to redo some CSS*
    Post edited by Thorvaldr on
  • Basileus
    Basileus
    Posts: 585 edited October 2013
    @MadEd:

    IE10 has an inspect tool by hitting F12, then in the window that pops up either hit the cursor icon (first icon on the bar), or go to "Find > Select Element by click". After selecting an element you can view HTML, CSS, and other stuff.

    I'm assuming IE11 is similar if not identical.


    Edit: NVM, I got ninja'd... :D
    Post edited by Basileus on
  • Savannah
    Savannah
    Posts: 188
    Thorvaldr, nice work on the characters! I may have to come back to steal some of that eventually.... One thing, though -- your green character names/tags are kinda hard to read on that brown background. You might want to consider tweaking the color slightly.
  • madartiste
    madartiste
    Posts: 328
    Thorvaldr, the characters look great! Thanks for sharing that!
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    I may have just missed it but I am trying to recover my sites after the Apocalypse that the Reforge has wrought on them. But I can't even figure out how to do something as simple as change the color of my text and the various Headings. Is there something I am missing? Why won't standard CSS work? GRRRRRR. I am sure I will be ok with this eventually but right now I am just frustrated.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • Savannah
    Savannah
    Posts: 188
    For some changes, it won't accept your CSS instead of the normal CSS unless you add !important to yours. For example, it won't change the text color on the buttons white unless you tell it's important:

    bc. .button {color:white !important;}

    However, I didn't need to do that on my main text and headings, so I'm not sure what's wrong. Can you give an example of what you're trying to change and what you used that didn't work?
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Sure. The campaign is here: https://the-emerald-city.obsidianportal.com/

    Here is the basic code that I was using but it no longer seems to affect the text:

    /* High Level Look and Feel Items */
    #content {border:1px solid royalblue;background-image:url('http://cdn.obsidianportal.com/assets/162428/DFECBodyBGDARK.png');background-color:black;color:white;}
    #wrapper {border:none; background-color:transparent;}
    #campaign-content {border:1px solid royalblue;border-radius:6px;padding:4px;font-family:'Bree Serif',serif;font-size:110%;font-weight:100;}

    and here is the code for the Headings:

    /*page headers*/
    #campaign-content h1 {font-family:'Croissant One';color:royalblue;text-align:center;margin-top:5px;margin-bottom:5px;border-bottom:1px dotted royalblue; !important;}
    #campaign-content h2 {font-family:'Croissant One';color:white;text-align:center;margin-top:5px;margin-bottom:5px;border-bottom:1px dotted royalblue;!important;}
    #campaign-content h3 {font-family:'Fauna One';color:white;text-align:center;margin-top:5px;margin-bottom:5px;border-bottom:1px dotted royalblue;!important;}
    #campaign-content h4 {font-family:'Gorditas';color:white;margin-top:5px;margin-bottom:5px;border-bottom:1px dotted royalblue;!important;}
    #campaign-content h5 {font-family:'Fauna One';color:royalblue;margin-top:5px;margin-bottom:5px;border-bottom:1px dotted royalblue;!important;}

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • Keryth987
    Keryth987
    Posts: 1,047
    @Thorvaldr and Landy

    Thanks guys. The sheet works now.

    Now I just need to apply it to the other 6 characters

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

  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Wow, Keryth987 you recovered your site from the Reforging in record time! Good job!

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • Savannah
    Savannah
    Posts: 188
    Ah, I think they changed the names for a lot of things your code is referring to, HumAnnoyd. Try switching #campaign-content to .main-content (if you want it to only apply to the central column, which is what #campaign-content used to do, I'm pretty sure -- if you want it to apply site-wide, just take #campaign-content out). I think the equivalent to #wrapper is now .main-content-container. (It's been a while since I played with the pre-Reforge code, though, so I may be misremembering what the old names refer to.) Unfortunately you do have to inspect a few elements to find out what the names changed to.
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Thanks Savannah. I will try that out. It has been making me nuts. I am a amateur at CSS and this has been making me crazy!

    Oh and how do you "inspect a few elements"?

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • Thorvaldr
    Thorvaldr
    Posts: 141 edited October 2013
    On most browsers, right click on an element (really, just right click on whatever you want to know about), and select Inspect Element. Personally, I prefer Firefox for inspecting, but all web browsers should basically work the same. An inspection window will appear at the bottom of your screen, which will allow you to see what things are called, and see relationships between pieces of code.

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
    Post edited by Thorvaldr on
  • Savannah
    Savannah
    Posts: 188
    For inspecting elements, since I use Firefox I just right click on something I'm interested in, then click "inspect elements" on the dropdown menu I get. That lets you look at what different things on the page are called and what code is being applied to them. Other browsers should have the same sort of thing, but I don't know if their name for it is the same.
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Ah. Right. I knew that. Heh. Like I said. "Amateur". :D

    Thanks. That did the trick. I am now much closer to where I want for my EC page. Thanks guys!

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • Keryth987
    Keryth987
    Posts: 1,047
    @HumAnoyd

    FAR from done. Cleaned u0p the main pages and the City Page. Working on the Character Sheets now. Still have ALOT of work left, especially my adventure logs.

    Most of it is cut and paste though, once I get something figured out, as it is all old school DIVs and not CSS.

    The newer sites I was working on, the CSS ones, well, I'm probably just gonna trash them and start over

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

  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Ah. Yeah I understand Keryth. I am thinking I am going to have to scrap my Mass Effect, Cyberpunk, LoA Greyhawk, Star Wars EotE, Dragon Age and Marvel Universe sites and start from scratch unless I can figure some fixes out. It is frustrating to say the least because I spent countless hours on the art and coding for all those pages.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    I am trying to figure out a way to modify the Main Adventure Log and Character pages. I want to make the boxes transparent like I have in the rest of the site so the white text stands out. This is what I tried but it didn't work:

    .adventure-log-index{!important;background-color:transparent;}

    Any ideas on what I am doing wrong?

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • Savannah
    Savannah
    Posts: 188 edited October 2013
    From what I can see of your campaigns, HumAnnoyed, all the ones you listed look quite nice right now, with maybe one or two minor formatting issues mostly due to width changes. Maybe I'm not seeing how they looked previously, but they're pretty nifty now! If you need help fixing them up, let me know -- I'm not an expert, but I do like messing around with campaigns and I just finished fixing up my main one.

    Edit:
    Ninjas all over the place for me today!

    Try

    bc. .adventure-log-post {background-color:transparent !important;}

    (super not tested, so if it doesn't work, let me know and I'll go futz around with it in my test campaign until it does)
    Post edited by Savannah on
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    They look nothing like what I want nor like they used to. Every one of them had transparencies and backgrounds and PNG images layered on top of them and looked much better than they do now. Mass Effect in particular. Although I wonder if the LoA Greyhawk and Dragon Age ones might be the hardest to fix. I am learning things as I go here so maybe I can salvage those pages but it will take a ton of work. Which is not very pleasant a reality.

    Thanks though. That seemed to work on the Logs and I was able to extrapolate it to the Characters page.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Bloody hell! So I was trying to see what I could do about my Characters on my Emerald City Site and I turned off the Dynamic Style Sheet for DF and then turned it on and LOST the whole character. Anyone know how I get him back? What happened to the Previous Versions of characters and Pages? For some reason the DSS manifests on character pages where you can't see most of it and have to use nav bars to move around it. Any suggestions for fixing that?

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • LiamGray
    LiamGray
    Posts: 7 edited October 2013
    Am I the only person who (having not edited the size nor shape of the page) has had their dashboard terribly distorted?

    It was working fine yesterday, but I woke up this morning and everything is a mess. The side bar (which was fine) now cannot be selected. The Forum tab which pops up at the top is considerably longer and flows over the bar. I have no idea what exactly you guys changed last night, but I think you should change it back. Its hardly manageable anymore. lol.

    Copy & Paste the link to see what I mean. :)
    https://dl.dropboxusercontent.com/u/57513112/Palladium%20Books%C2%AE/Megaversal%20Highway/ERROR.png
    Post edited by LiamGray on
  • Langy
    Langy
    Posts: 364
    Well, that's problematic. Looks like if you have a DSS for a character, you don't get the sidebar - which is where you can see the previous versions for a character. That's... a problem.
  • Langy
    Langy
    Posts: 364
    Liam: I don't have any problems like that - my dashboard today is exactly the same as my dashboard yesterday. It sounds like something's gumming up the works in your particular site, but I'm not sure how to help.
  • LiamGray
    LiamGray
    Posts: 7
    There have been no changes to my site that could do that (at least nothing I am aware of). I have included a screenshot from above if it helps. I have not even attempted to change the layout of any actual code on the site and it was hunky dory yesterday. So I have no idea what changed or how to fix it?
Sign In or Register to comment.

March 2024
Wrath of the Highborn

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