Anyone With Css Knowledge? Let's Paint Warframe Dark Again.

[gear]

Exemplary work.

[RossRam]

Friend showed me how it works on firefox, nothing looked broken. Guess it's just a matter of personal preference.

 

Either way, there's a disclaimer that it's not fully tested on firefox, plus people can edit their own styles if they please. All I know it works perfectly on my chrome, and that's my main focus.

 

Well, as I've said, I'm not pro. In my Firefox when I just use 'a' without ':link', some things refuse to be highlighted. For example, that small black stuff on top, that says "Warframe Forums -> Warframe Community ->..."

 

So I've added some more lines and it works fine on my FF.

 

Anyway, here's what I've done to my code. This is the last thing, at least for today.

 

Before:

Prev/Next tabs

 

Polls

 

Quotation

 

And as a side effect...

 

Now:

Prev/Next tabs

 

Polls

 

Quotation

 

Side effect

 

Code:

  .pagination .back a:hover, .pagination .forward a:hover{

    background: #00ADD5;

  }

  .poll_question h4{

    color: #f5f5f5;

  }

  .progress_bar span{

    background: #00CFFF;

  }

  .poll_question{

    background: #333333;

  }

  blockquote.ipsBlockquote{

    background: #222222;

    border-color: #111111;

  }

  cite.ipb{

    background: -moz-linear-gradient(center top , #222222 0%, #111111 100%) repeat scroll 0% 0% transparent;

    border-color: -moz-use-text-color #222222 #222222 #000000;

  }

  p.citation {

    background: #222222;

    border: 1px solid #111111;

  }

 

Most of it should work on Chrome like a charm, except cite.ipb section.

Edited November 22, 2014 by RossRam

[Spiritofpower]

Well, as I've said, I'm not pro. In my Firefox when I just use 'a' without ':link', some things refuse to be highlighted. For example, that small black stuff on top, that says "Warframe Forums -> Warframe Community ->..."

 

So I've added some more lines and it works fine on my FF.

 

Anyway, here's what I've done to my code. This is the last thing, at least for today.

 

Before:

Prev/Next tabs

 

Polls

 

Quotation

 

And as a side effect...

 

Now:

Prev/Next tabs

 

Polls

 

Quotation

 

Side effect

 

Code:

  .pagination .back a:hover, .pagination .forward a:hover{

    background: #00ADD5;

  }

  .poll_question h4{

    color: #f5f5f5;

  }

  .progress_bar span{

    background: #00CFFF;

  }

  .poll_question{

    background: #333333;

  }

  blockquote.ipsBlockquote{

    background: #222222;

    border-color: #111111;

  }

  cite.ipb{

    background: -moz-linear-gradient(center top , #222222 0%, #111111 100%) repeat scroll 0% 0% transparent;

    border-color: -moz-use-text-color #222222 #222222 #000000;

  }

  p.citation {

    background: #222222;

    border: 1px solid #111111;

  }

 

Most of it should work on Chrome like a charm, except cite.ipb section.

Awesome. Works like a charm now. Thanks, man.

[RossRam]

Awesome. Works like a charm now. Thanks, man.

 

Cool, I'm glad to hear it. Be sure to post if there are any glitches or something else in it.

 

I've already found some in the search panel, but I have to sleep for now.

Edited November 22, 2014 by RossRam

[Shifted]

Cool, I'm glad to hear it. Be sure to post if there are any glitches or something else in it.

Might wanna do that over PM to not confuse it with the main version.

 

With you digging in the code there's no guarantee that it wasn't you who messed things up, especially considering every image you posted in the "before" spoilers works fine for me.

 

PS.

"Warframe Forums -> Warframe Community ->" doesn't get highlighted even in the original DE version, so yeah it's just your personal preference and not something that I "missed" or "broke".

 

The code gets updated constantly so before anyone makes any "hey, that's missing" post, make sure you got the latest version.

Edited November 22, 2014 by Shifted

[RossRam]

Might wanna do that over PM to not confuse it with the main version.

 

With you digging in the code there's no guarantee that it wasn't you who messed things up, especially considering every image you posted in the "before" spoilers works fine for me.

 

PS.

"Warframe Forums -> Warframe Community ->" doesn't get highlighted even in the original DE version, so yeah it's just your personal preference and not something that I "missed" or "broke".

 

First of all, I've never implied that you've missed something or broke. You've done amazing job, while all I did is adapted your code for FF.

 

Alright now, I've just copied your CSS from https://userstyles.org/styles/107529/warframe-forums-grey-cyan and...

 

Polls are actually grey and stuff.

Quotations though, they don't. They have white background with white text.

The search bar is good and nicely looking.

 

So... Overall, as I've took the code from under the spoiler, as it was before you removed it from there, I guess I just worked on the outdated version. The quotations still doesn't work in Firefox on your version for some reason, so... I guess my work have not been in vain and i didn't mess it up after all.

 

And you are right, they are indeed doesn't get highlighted even in the original DE version, my bad there. Let me do some more stuff...

 

Uhm, well. With your code, a lot of links on Firefox does not react to the cursor hovering above them: they does not change their colour for some reason... Profile links, build version links...

 

Well, I can't test in on Chrome, but that's what I get on FF using your code, copied straight from CSS, unchanged.

 

If you think this feedback can be confusing, I guess you should either upload FF code separately or create another thread for FF. I won't do it because everything I've done is based on your code anyway.

 

So, my Firefox is 33.1, and that's the results, while with my additions the only troubles in Firefox I've seen so far are in the search bar, but I'll fix that later.

Edited November 22, 2014 by RossRam

[RossRam]

Alright, I've decided I will do it now, so I've just copied some more lines from your CSS into Firefox code. Search bar fixed now, I also tweaked some colors once again, so...

 

Can't see no bugs on my Firefox, so, probably fully working FF code is in this post:

 

https://forums.warframe.com/index.php?/topic/349205-anyone-with-css-knowledge-lets-paint-warframe-dark-again/?p=3905483

[Shifted]

 

Can't see no bugs on my Firefox, so, probably fully working FF code is in this post:

 

https://forums.warframe.com/index.php?/topic/349205-anyone-with-css-knowledge-lets-paint-warframe-dark-again/?p=3905483

 

Alright.

 

Yes, I noticed the links, but they're not a big deal for me, I don't really know how to fix it quickly and I actually like them that way, so they're staying.

I guess the quotes is a firefox thing because I'm not having issues with it on chrome.

 

Maybe I'll try to do something that fixes it for the firefox folk without messing it up for chrome later.

For now I'll point people to the post you linked, keep it updated if you wish.

 

Thanks

Edited November 22, 2014 by Shifted

[GhostSwordsman]

Do not underestimate yourself, there was only one mistake.

 

Was. Here's the working code for us, Firefox comrades:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forums.warframe.com") {

.ipsBox_container {

background: #333333 !important;

  }

 

 .ipsSideBlock {

background: #333333 !important;

    }

    

.post_wrap {

        background: #333333 !important;

  color: #FFFFFF;

      }

 

.post_body .post {

color: #FFFFFF !important;

    }

    

    .ipsType_pagetitle{

color: #000000 !important;

}

 

  .ipsVerticalTabbed_tabs li.active a{

     background-color: #006882;

    color: #FFFFFF !important;

  }

  .ipsVerticalTabbed_tabs li a:hover{

    background: #00ADD5;

    color: #FFFFFF !important;

  }

a:link {

color:#00CFFF !important;

text-decoration:none !important;

cursor: auto !important;

}

a:visited {

color:#00CFFF !important;

text-decoration:none !important;

cursor: auto !important;

}

a:link:hover {

color:#0065ff !important;

text-decoration:none !important;

cursor: auto !important;

}

a:visited:hover {

color:#0065ff !important;

text-decoration:none !important;

cursor: auto !important;

}

 

body {

background-color: #666666 !important;

color: #FFFFFF !important;

}

 

 

#top-links {

background: #333333 !important;

}

 

.ipsHeaderMenu {

background: #333333 !important;

  }

 

.post_block h3 {

background:#222222;

  }

 

  #site_header {

background: rgba(0, 0, 0, 0);

border-bottom: 0px solid white;

  }

 

  .ipsBox {

background: #222222;

}

 

  #search .submit_input {

background: #222222 url(https://n3g6i3c6.ssl...search_icon.png) no-repeat 50%;

  }

   

  #board_stats .value {

 

 

color: #fff;

background: #222222;

  }

 

.reputation.zero {

color: #FFFFFF;

}

 

.ipsType_subtitle {

color: #00CFFF !important;

  }

 

pre.prettyprint {

background: #222222;

  }

 

    .ipsForm {

background: #333333;

      }

 

.post_block {

background: #222222;

  }

 

  .ipsButton_secondary {

opacity: 0.9;

  }

 

  .topic_buttons li.non_button a {

background-color: #1B2E3C !important;

    opacity: 0.9;

  }

 

  .row1, .post_block.row1, .row2, .post_block.row2 {

background: #333333;

    }

 

.navmenu li a {

color: #000000 !important;

text-decoration: none;

}

 

#top-links {

border: 0px solid #d0d5d8 !important;

}

 

.popupWrapper {

background: #333333;

  }

   

  .popupInner h3 {

background: #000000 repeat-x top;

    }

    

    .ipsUserPhotoLink:hover .ipsUserPhoto {

border-color: #00CFFF;

}

      

      .desc.lighter, .desc.lighter.blend_links a {

color: #a4a4a4 !important;

}

 

.ipsButton_secondary:hover {

color: #fff !important;

background: #00ADD5 !important;

}

 

.breadcrumb a {

color: #000000 !important;

}

 

.alertContent li:hover {

background-color: #00ADD5 !important;

}

 

.alertTab.active {

background-color: #1B2E3C !important;

}

 

#social {

background: #1B2E3C;

}

 

#social a.social-link#facebook:hover, #social a.social-link#twitter:hover, #social a.social-link#youtube:hover {

background-color:  #00ADD5;

}

  .pagination .back a:hover, .pagination .forward a:hover{

    background: #00ADD5;

  }

  .poll_question h4{

    color: #f5f5f5;

  }

  .progress_bar span{

    background: #00CFFF;

  }

  .poll_question{

    background: #333333;

  }

  .poll fieldset {

color:#000000 !important;

}

  blockquote.ipsBlockquote{

    background: #222222;

    border-color: #111111;

  }

  cite.ipb{

    background: -moz-linear-gradient(center top , #222222 0%, #111111 100%) repeat scroll 0% 0% transparent;

    border-color: -moz-use-text-color #222222 #222222 #000000;

  }

  p.citation {

    background: #222222;

    border: 1px solid #111111;

  }

  #search_options {

color: #000000;

}

.ipsSideMenu h4 {

color: #FFFFFF;

}

  .ipsSideMenu ul li.active a {

background:  #1B2E3C;

}

.ipbmenu_content, .ipb_autocomplete {

background: #333333;

}

    #search .submit_input {

background: #222222 url(https://n3g6i3c6.ssl.hwcdn.net/public/style_images/Light_and_Dark/search_icon.png) no-repeat 50%;

  }

}

As someone who knows nothing about coding, I thank you for your effort on solving the issue with Firefox. I can now use my preferred browser and the new forum look without getting any eyestrain. 

Edited November 22, 2014 by GhostSwordsman

[RossRam]

 

 

 

Alright.

 

Yes, I noticed the links, but they're not a big deal for me, I don't really know how to fix it quickly and I actually like them that way, so they're staying.

I guess the quotes is a firefox thing because I'm not having issues with it on chrome.

 

Maybe I'll try to do something that fixes it for the firefox folk without messing it up for chrome later.

For now I'll point people to the post you linked, keep it updated if you wish.

 

Thanks

 

 

i sure will, if I'll find any mistakes.

 

 

As someone who knows nothing about coding, I thank you for your effort on solving the issue with Firefox. I can now use my preferred browser and the new forum look without getting any eyestrain. 

 

I'm glad to know that my small work is useful.

[RossRam]

Achtung! I've suddenly found what probably caused a whole set of errors. The code under the spoiler on forums is missing several chunks for some reason. Even though I copy it exactly like it should be, after I post it, some parts are missing for some reason. Since I've copied original Chrome code from under the spoiler, not from the userstyles.org, this may be the reason why some parts of code didn't work on FF from the start.

 

So I've created a userstyles link:

https://userstyles.org/styles/107538/warframe-forums-grey-cyan-for-firefox

 

Follow the OP for instructions.

Edited November 22, 2014 by RossRam

[noveltyhero]

Here is the background I use in my red theme: http://i.imgur.com/fZHOIJy.jpg

 

Feel free to put it in yours, it will certainly make it more eye pleasing whilst keeping the fresh look ;)

 

Here is the specific code:

#ipboard_body {

    background: url('http://i.imgur.com/fZHOIJy.jpg') no-repeat fixed center top ;

    background-color: #1c1c1c ;

}

[Mainabi]

is there something for opera?

[(PSN)IIIDevoidIII]

Hey Shifted, been using this for quite a bit, and can say that it is an amazing compromise between the light and dark themes.

I noticed that when looking at user profiles, the names are black, making them hard to read. It would benefit for them to be white.

[-FV-Wsocks]

I don't feel that I should have to enter a staring contest with the sun every time I want to check the warframe home page or forums. 

[Shifted]

is there something for opera?

Stylish for Opera 12: https://addons.opera.com/extensions/details/stylish-for-opera/?display=en

Stylish for latest Opera: https://addons.opera.com/extensions/details/stylish/?display=en

 

I only tested on Opera 12 because the new Opera is basically a Chrome wannabe. Should work though.

 

Hey Shifted, been using this for quite a bit, and can say that it is an amazing compromise between the light and dark themes.

I noticed that when looking at user profiles, the names are black, making them hard to read. It would benefit for them to be white.

Took me a while, had figure out how to change it without also affecting thread title (which it was linked to).

Made it cyan though, felt like it fit a bit better. Hope it doesn't make a difference to you.

Update through here: https://userstyles.org/styles/107529/warframe-forums-grey-cyan

 

PS, some alternative backgrounds were added, although some of them may interfere with text visibility. Fixing them isn't a priority, so use at own risk.

 

Enjoy!

[JCBeastie]

Good job on that; white is for books!

[RossRam]

Took me a while, had figure out how to change it without also affecting thread title (which it was linked to).

Made it cyan though, felt like it fit a bit better. Hope it doesn't make a difference to you.

Update through here: https://userstyles.org/styles/107529/warframe-forums-grey-cyan

 

Added this to Firefox code, thanks.

[Evanescent]

Can I marry you?

 

 

Seriously, thanks. Awesome job.

[VoidPunch]

So I couldn't download stylish to my laptop for some reason and decided to change the colors manually in the website's code. The only problem is idk how to apply those changes. I had the page looking like I wanted but when I reloaded the page it reverted back to the original red and white scheme. Can anyone tell me what to do?

[Shifted]

So I couldn't download stylish to my laptop for some reason and decided to change the colors manually in the website's code. The only problem is idk how to apply those changes. I had the page looking like I wanted but when I reloaded the page it reverted back to the original red and white scheme. Can anyone tell me what to do?

I'm not 100% sure but I don't think there's a way your browser will remember the changes without an addon.

 

What browser are you using and why can't you download it?

[VoidPunch]

I'm not 100% sure but I don't think there's a way your browser will remember the changes without an addon.

 

What browser are you using and why can't you download it?

Oh ok. And I am using Chrome. I don't know why I can't download it, it gives me a server error when trying to download it from the google store.

[Shifted]

Oh ok. And I am using Chrome. I don't know why I can't download it, it gives me a server error when trying to download it from the google store.

Well if it's really impossible to download it, try some alternatives:

 

https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha

https://chrome.google.com/webstore/detail/stylist/pabfempgigicdjjlccdgnbmeggkbjdhd

 

I've never used them so I can't give you step by step how to make it work though

You'll most likely have to input the code manually.

Refer to the first post on how to obtain the code.

 

Good luck.

[GhostSwordsman]

Hey Shifted, thought that I should point out that your CSS doesn't have the advance search button next to the search bar visible. Granted, the default site doesn't show the button either, but it's still there. When you move your cursor next to the search button it changes and you can select advanced search and use it, but it's not visible.

 

Thought you'd like to know so you could look into it if you feel like it.

[RossRam]

Hey Shifted, thought that I should point out that your CSS doesn't have the advance search button next to the search bar visible. Granted, the default site doesn't show the button either, but it's still there. When you move your cursor next to the search button it changes and you can select advanced search and use it, but it's not visible.

 

Thought you'd like to know so you could look into it if you feel like it.

 

Thanks for pointing it out. Nailed it for Firefox code this way:

 

#adv_search{

    background: url('http://i58.tinypic.com/2v0degm.png');

 }