Custom CSS Beta Discussion

18911131425

Comments

  • Baard
    Baard
    Posts: 16
    This snippet placed in CSS in dashboard/settings/style makes the text in the input boxes black, and the background a lighter shade of grey.
    The second entry is background color when the text input is activated.

    input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea {
    color: black;
    background-color: rgb(245, 245, 245);
    }

    input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, textarea:focus {
    background-color: rgb(250, 250, 250);
    }
  • MattBowyer
    MattBowyer
    Posts: 2
    Fantastic! Thank you!
  • madartiste
    madartiste
    Posts: 328 edited October 2013
    For folks who would like a horizontal set of nav links, I've got a start on some CSS for it. It's not perfect or super clean just yet, but it might give some folks a few ideas:

    /*Horizontal Navigation Bar*/
    .nav-links li a {margin-right:15px;}

    #campaign-nav {width:100%;
    height:38px;
    position:relative;
    }

    .campaign-public-layout #campaign-nav {
    background-color:transparent;
    }

    .collapsable-nav-row .front-nav-container {
    width:100%;
    top:-30px;
    background-repeat:no-repeat;}

    #campaign-nav ul li {display:inline;float:left;}

    If you pair this with the above, you can stretch out the main content column as well:
    @/*Change main content width*/
    #content .main-content-container {width:730px;}@
    Post edited by madartiste on
  • Baard
    Baard
    Posts: 16 edited October 2013
    /*Black text in CSS edit field*/
    .campaign-settings #style-settings #custom-css-field { color:black; background-color: rgb(245, 245, 245); }
    Post edited by Baard on
  • madartiste
    madartiste
    Posts: 328
    Baard, you are my new favorite person! Thanks!
  • Baard
    Baard
    Posts: 16
    My pleasure madartiste! Feel free to ask, if there is anything you need help with.
    I have worked a bit with css beforehand. Actually this is quite similar to customising wordpress themes :)
  • Keryth987
    Keryth987
    Posts: 1,018
    Not wholly a CSS issue, but, anyone else getting this when trying to embed an image in a page?

    Script: https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:5

  • Thorvaldr
    Thorvaldr
    Posts: 141 edited October 2013
    May as well throw my 2 cents in here. My campaign was very big on transparent backgrounds... and everything was laid out for a very specific size. The following CSS code almost has my campaign looking like old (...at least in regards to layout. :P):

    ***********
    /* MAIN PAGE LAYOUT*/
    .main-content-container { width:710px !important; background-color:transparent;}

    .campaign-landing-page-container{ width:710px !important; background-color:transparent !important;}

    .sidebar{position:relative; z-index:5; width:18%;}

    #content {max-width:1100px !important;}

    .post-main{background-color:transparent !important;}

    ********

    And to whomever figured out the "!important" tag... THANK YOU! That makes everything work magically.

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
    Post edited by Thorvaldr on
  • tommy19
    tommy19
    Posts: 62 edited October 2013
    Quick question: Anyone know how to make the white main content box disappear? I've tried setting it to "background-color:transparent" but I get nothing.

    Also, just realized, in my main campaign I have a vertical navigation bar on the left hand side of the screen. Before, when the edit button was at the very bottom of the page this didn't present a problem. Now however, I can't click on the edit button beside the page's title. Any thoughts on how I might be able to circumvent this so i can fix the sidebar and be able to edit my pages?

    Thanks in advance!
    Post edited by tommy19 on
  • Thorvaldr
    Thorvaldr
    Posts: 141
    Tommy19, take a look at my code above. You may need to use the !important tag thingy... I'm sure it has a technical name. I had to make a few different things transparent until it worked.

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • tommy19
    tommy19
    Posts: 62
    Thanks Thorvaldr, I saw that just after I posted and it worked great, thank you!

    Still having problems with the side nav bar preventing me from editing my pages though. Help on that would be GREATLY appreciated if anyone has any ideas.
  • SkidAce
    SkidAce
    Posts: 830
    tommy - use "inspect element" to get to your underlying code. In chrome that opens a bottom window where all the "page" coding is exposed.

    Forgive me if I have not used the proper technical terms.
  • tommy19
    tommy19
    Posts: 62
    THANK YOU SO VERY MUCH! That worked, I can fix my pages now!
  • Langy
    Langy
    Posts: 364
    You can use that inspect element feature to disable the offending sidebar so you can edit the page, if you'd like. Right-click the sidebar, go to inspect element, then in the window there's a bit on the right that's the CSS code for the currently-selected element. Select the primary element of your side nav bar that's messing things up and in the CSS section type 'display:none' to remove it. This'll let you then click the edit button normally.

    If you have CSS on the campaign, I recommend just moving it with CSS, though.
  • SkidAce
    SkidAce
    Posts: 830
    Wow, with my apprentice wizard skills I actually helped someone...sweet!

    My work here is done...carry the torch forward @Langy...../grin
  • tommy19
    tommy19
    Posts: 62
    @Baard

    I really like your Black Text in CSS Edit, but I was wondering, is there a way to do this so it's ALL edit fields, not just css?
  • Langy
    Langy
    Posts: 364
    This'll do it for every single edit field:

    textarea, input {
    color:black !important;
    border:solid 1px black !important;
    }
  • tommy19
    tommy19
    Posts: 62
    thanks Langy
  • Basileus
    Basileus
    Posts: 589 edited October 2013
    Quick 'n Dirty Banner Fix

    This should return pre-Reforge banners to their normal proportions/ratio (albeit blown up slightly in size).

    ************

    .campaign-public-layout #banner-container .campaign-banner-image {height: 400px;}

    ************
    Post edited by Basileus on
  • SkidAce
    SkidAce
    Posts: 830
    Hey thanks @Basileus...that one was great!

    (you weren't kidding about blown up "slightly" wow)
  • madartiste
    madartiste
    Posts: 328 edited October 2013
    So I figured out how to change the text of the navbar links. I have to warn you that it's not a pretty sight but it DOES work. You need to keep in mind that the nth-child number changes depending on whether you are a campaign member or not (since non-members don't get the dashboard). This particular one replaces "Front Page" with "Home Page." Feel free to let me know if it doesn't work in some cases since I haven't had a chance to extensively test it.:

    @#campaign-nav ul li:nth-child(1) a:after {content:"Home Page";}
    .campaign-member #campaign-nav ul li:nth-child(1) a:after {content:none;}
    #campaign-nav span.icon-home + span {font-size:0;}
    .campaign-member #campaign-nav ul li:nth-child(2) a:after {content:"Home Page";}
    }@
    Post edited by madartiste on
  • PurpleSteve
    PurpleSteve
    Posts: 12 edited October 2013
    Hah, I should have known someone would have got in with the darker text in edit boxes, good to know im not the only one who hated that low contrast.
    I'm working on some other tweaks to make the edit page a bit more friendly, essentially bringing the CSS box closer to the top of the page, making it more readable and bigger for anyone like me who does a lot of trial and error and gets sick of scrolling down every time you make a minor change.
    Also, monospace. Bloody necessary.

    bc. /* Styles Page */
    textarea, input {color:#444 !important; }
    .campaign-settings #style-settings #custom-css-field {font-family: "Courier New", Courier, monospace; height: 500px}
    #background-selection {float: left; width: 35%;}
    #background-selection li {border: 3px; padding: 0 3px 3px 6px; max-height: 60px; width: 90px;}
    #banner-upload .preview-area {margin:0px !important;}
    #upload-background {float:right; width:65%;}
    #no-background label {padding: 0 0 0 20px;}


    P.S. Does anyone have any idea how to make the background previews display more than 4 per row?

    P.P.S Doesn't look like that's possible: the number of columns is linked to the class of the list (class= "large-block-grid-4")
    Post edited by PurpleSteve on
  • ketherian
    ketherian
    Posts: 203 edited October 2013
    A quick-fix to reduce the obsidian portal logo at the top of every page of your site.

    /* REDUCES OBSIDIAN-PORTAL LOGO TO A REASONABLE SIZE */
    .flame-dragon svg { height: 20% !important; }
    ---
    ketherian
    ["Signs & Portends":http://www.obsidianportal.com/campaigns/swtwc]
    Post edited by ketherian on
  • ketherian
    ketherian
    Posts: 203
    Another tiny one:
    /* MAKE BROKEN LINKS STAND OUT */
    .create-wiki-page-link { color: green !important; background-color: yellow; }

    I suspect this will be unnecessary once the associated bug is fixed; but for now it's making my life easier, so I thought I'd share.
    ---
    ketherian
    ["Signs & Portends":http://www.obsidianportal.com/campaigns/swtwc]
  • PurpleSteve
    PurpleSteve
    Posts: 12
    To get rid of the coloured bars above the banner etc:

    .highlight-container {height: 0px !important;}
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    I personally don't like the player pic attached to the PC pic on the front page. Just my opinion.

    .user-container {
    display: none;
    }

    Flash
    "Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _Where Slaves Become Legends_

    Heroes Unchained: CotM 2013

  • Thorvaldr
    Thorvaldr
    Posts: 141
    I like having all of my tables with no backgrounds and no border... or custom backgrounds:

    #content table{background-color:transparent; border-style:none;}

    #content tr:nth-child(even) {background-color:transparent}

    The second line will change all of the even lines.

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,978
    You, Thorvaldr, deserve a drink on me! Thank you!!!

    Just trying to help out.

  • Basileus
    Basileus
    Posts: 589
    OMG! That is exactly what I was looking for Thorvaldr!

    Definitely adding that to my Quick'n'Dirty CSS Fix.
  • Thorvaldr
    Thorvaldr
    Posts: 141 edited October 2013
    @KillerVP: Great! I think that brings us down to I only owe you a half dozen drinks now! :P

    @Basileus: Thanks! A lot of these fixes are dirty... hope they aren't breaking things elsewhere in the campaign... I'm sure we'll find out soon enough. :P

    And one more fix for the road: Meagoinc made it very clear that the navigation icons had no place in a medieval setting. So, they are gone!

    .op-icon {display:none !important;}
    .icon{display:none !important;}


    And of course, we have to also resize that navigation bar to make it smaller for the removal of said icons. And, we are not fans of sans-serif at Tyellador, so I've also changed the menu fonts:

    .menu-text{font-family:Georgia,serif;}
    .collapsable-nav-row .front-nav-container{width:12%;}

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
    Post edited by Thorvaldr 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