Jump to content
Dante Unbound: Share Bug Reports and Feedback Here! ×

Warframe Dark Theme My Css Code (Use Injector)-Work In Progress

noveltyhero

By noveltyhero,
in Off Topic

 Share

Recommended Posts

noveltyhero

noveltyhero

Posted
Posted (edited)

Hey guys,

 

So I went out of my way to change the CSS code of the web page, it is not perfect as I literaly took 5 minutes but here it is:

 

NOTE: Works best when using the light theme.

 

 

VERSION 7.7 (11/01/2015-10:50 GMT+0):

#anonymous_element_49 {
    background-color: #080808;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
 
#anonymous_element_50 {
    background-color: #080808;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
 
#anonymous_element_51 {
    background-color: #080808;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
 
#forum_load_more {
    background-color: #080808;
}
 
#ipboard_body {
    background: url('http://i.imgur.com/fZHOIJy.jpg') no-repeat fixed center top ;
    background-color: #1c1c1c ;
}
 
#main_search {
    color: #ffffff;
}
 
#site_header {
    background-color: #080808;
}
 
#top-links {
    background-color: #1f1f1f;
    border-color: #000000;
    border-style: solid;
    color: #ffffff;
}
 
#user_inbox_link_menucontent {
    background-color: #1f1f1f;
}
 
#user_notifications_link_menucontent {
    background-color: #1f1f1f;
}
 
.ipsBox_container {
    background: white;
}
 
.ipsType_sectiontitle {
    color: white;
}
 
.ipsVerticalTabbed_tabs li a {
    background-color: #171717;
    color: white;
}
 
.list_content {
    color: grey;
}
 
.poll_question {
    background: white;
}
 
a.bbc_url {
    color: #c40000;
}
 
a.desc.lighter.blend_links {
    color: #ffffff;
}
 
a.edit_post:hover {
    color: white;
}
 
a.ftoggle.ipsButton_secondary {
    background-color: #000000;
    border-radius: 3px;
    color: #ffffff;
}
 
a.ipsButton_secondary {
    background-color: #080808;
    border-color: #000000;
    color: #ff0000;
}
 
a.social-link {
    background-color: #171717;
}
 
a.url.fn.name.___hover___member._hoversetup span {
    color: #ff0d0d;
}
 
a.url.fn.name.___hover___member._hoversetup span:hover {
    color: white;
}
 
a.url.fn.name.value.___hover___member._hoversetup {
    background-color: #000000;
}
 
a:hover {
    color: white ;
}
 
abbr.published {
    color: #ffffff;
}
 
blockquote.ipsBlockquote.built {
    background-color: #171717;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-color: #000000;
    color: #ffffff;
}
 
blockquote.ipsBlockquote.built div div {
    color: #ffffff;
}
 
blockquote.ipsBlockquote.built div p {
    background-color: #171717;
    color: #ffffff;
}
 
div.alertTab.pc {
    background-color: #0a0a0a;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
 
div.alertTab.pc.active {
    background-color: #0a0a0a;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ff0000;
}
 
div.alertTab.ps4 {
    background-color: #0a0a0a;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
 
div.alertTab.ps4.active {
    background-color: #0a0a0a;
}
 
div.alertTab.xb1 {
    background-color: #0a0a0a;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
 
div.bbc_spoiler {
    padding: 5px;
}
 
div.bbc_spoiler_content div {
    color: #ffffff;
}
 
div.bbc_spoiler_content p {
    background-color: #171717;
}
 
div.bbc_spoiler_wrapper {
    background-color: #171717;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-color: #000000;
    border-style: solid;
    color: #ffffff;
}
 
div.desc.lighter.blend_links {
    color: #d1d1d1;
}
 
div.general_box.alt.poll form h3 {
    background-color: #0f0f0f;
}
 
div.general_box.clearfix h3 {
    background-color: #0f0f0f;
}
 
div.info dl dd {
    color: #e6e6e6;
}
 
div.info dl dt {
    color: #ebebeb;
    margin-left: 20px;
}
 
div.ipsBox {
    background: white;
    background-color: #1f1f1f;
    border-bottom-left-radius: 10px;
    color: #ffffff;
}
 
div.ipsBox.table_wrap {
    background-color: #171717;
}
 
div.ipsBox_container fieldset {
    background-color: #1f1f1f;
}
 
div.ipsBox_container.ipsPad {
    background-color: #1f1f1f;
}
 
div.ipsBox_container.ipsSideMenu {
    background-color: #1f1f1f;
}
 
div.ipsBox_container.ipsSideMenu h4 {
    color: #f2f2f2;
}
 
div.ipsBox_withphoto.clearfix {
    background-color: #262626;
    border-radius: 5px;
    padding: 10px;
}
 
div.ipsFilterbar.maintitle {
    background-color: #080808;
}
 
div.ipsPad {
    background-color: #1f1f1f;
}
 
div.ipsSideBlock {
    background-color: #1f1f1f;
}
 
div.ipsSideBlock h3 {
    background-color: #080808;
}
 
div.ipsSideBlock p {
    color: #ffffff;
}
 
div.ipsSideBlock.__xXtwitter20alerts {
    background-color: #171717;
}
 
div.ipsSideBlock.clearfix.__xXlatest20staff20replies {
    background-color: #1f1f1f;
}
 
div.ipsSideBlock.clearfix.__xXrecent20topics {
    background-color: #1f1f1f;
}
 
div.ipsType_pagedesc {
    color: #ededed;
}
 
div.ipsType_pagedesc.forum_rules {
    color: #ffffff;
}
 
div.ipsVerticalTabbed_content.ipsLayout_content.ipsBox_container {
    background-color: #1f1f1f;
}
 
div.maintitle {
    background-color: #080808;
}
 
div.maintitle.clear.clearfix {
    background-color: #080808;
}
 
div.poll_question {
    background-color: #1f1f1f;
}
 
div.poll_question ol li {
    background-color: #1f1f1f;
    color: #ebebeb;
}
 
div.poll_question.voted {
    background-color: #1f1f1f;
}
 
div.poll_question.voted ol {
    background-color: #1f1f1f;
}
 
div.popupInner h3 {
    background-color: #2e2e2e;
}
 
div.popupWrapper {
    border-color: #080808;
    background-color: #171717;
}
 
div.post p {
    color: #ffffff;
}
 
div.post.entry-content {
    color: #ffffff;
}
 
div.post.entry-content div {
    background-color: #1f1f1f;
    color: #ffffff;
}
 
div.post.entry-content p {
    color: #ffffff;
}
 
div.post.post_block.feature_box {
    background-color: #1f1f1f;
}
 
div.post_block.first.hentry {
    background-color: #1f1f1f;
}
 
div.post_block.hentry.clear.clearfix {
    background-color: #1f1f1f;
}
 
div.post_block.no_sidebar {
    background-color: #1f1f1f;
}
 
div.post_body {
    background-color: #1f1f1f;
    color: #ffffff;
    padding-left: 15px;
    padding-right: 10px;
}
 
div.post_wrap {
    background-color: #1f1f1f;
}
 
div.site_header-inner.limiter.clearfix {
    background-color: #080808;
}
 
div.topic_controls.clear.ipsPad_top_bottom_half {
    background-color: #080808;
}
 
div.vcard.userpopup h3 {
    background-color: #080808;
    color: #ffffff;
    margin-left: 20px;
}
 
fieldset.ipsBox_container.ipsPad {
    background-color: #1f1f1f;
}
 
fieldset.row1 {
    background-color: #1f1f1f;
}
 
fieldset.submit {
    background-color: #1f1f1f;
    color: #ffffff;
}
 
h1.ipsType_pagetitle {
    border-radius: 5px;
    border-top-left-radius: 5px;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    margin-right: 180px;
    padding: 5px;
    padding-left: 10px;
    text-transform: uppercase;
}
 
h1.ipsType_subtitle {
    background-color: #1f1f1f;
    color: #eb3b3b;
    padding: 5px;
}
 
h2.maintitle {
    background-color: #080808;
}
 
h3.bar {
    background-color: #080808;
}
 
h3.ipsSettings_sectiontitle {
    color: #ffffff;
}
 
h3.ipsType_subtitle {
    background-color: #1f1f1f;
}
 
h3.maintitle {
    background-color: #080808;
}
 
h3.maintitle a:hover {
    color: red;
}
 
h3.row2 {
    background-color: #2e2e2e;
    border-radius: 2px;
}
 
h4.rounded {
    background-color: #363636;
    color: #ffffff;
}
 
img.ipsUserPhoto.ipsUserPhoto_large {
    color: #ff0000;
}
 
input.bbc_spoiler_show {
    background-color: #000000;
    border-color: #000000;
    border-style: solid;
    color: #ff0000;
}
 
input.input_submit {
    background-color: #000000;
    color: #ff0000;
}
 
input.input_submit.alt {
    background-color: #080808;
    color: #ff0000;
}
 
input.submit_input.clickable {
    background-color: #000000;
}
 
label.ipsField_title {
    color: #ededed;
}
 
li a span {
    color: #ff0000;
}
 
li a span:hover {
    color: white;
}
 
li.active a {
    background-color: #080808;
    color: #ffffff;
}
 
li.disabled span {
    background-color: #292929;
    color: #d4d4d4;
}
 
li.first a {
    background-color: #050505;
    border-color: #000000;
    color: #ffffff;
}
 
li.group_title {
    color: #ffffff;
}
 
li.ipsField {
    background-color: #1f1f1f;
}
 
li.last a {
    background-color: #050505;
    border-color: #000000;
    color: #ffffff;
}
 
li.next a {
    background-color: #050505;
    border-color: #000000;
    color: #ffffff;
}
 
li.page a {
    background-color: #3b3b3b;
    border-color: #000000;
    color: #c7c7c7;
}
 
li.page.active {
    background-color: #0d0d0d;
    border-color: #000000;
    color: #ffffff;
}
 
li.pagejump.clickable.pj0745145001 a {
    color: #000000;
}
 
li.post_count.desc.lighter {
    color: #ffffff;
}
 
li.prev a {
    background-color: #050505;
    border-color: #000000;
}
 
li.report a {
    background-color: #080808;
    color: #ff1100;
}
 
li.selected a {
    background-color: #292929;
    color: #ffffff;
}
 
li.tab_toggle a {
    background-color: #0d0d0d;
    border-color: #000000;
    color: #ffffff;
}
 
li.tab_toggle.active a {
    border-color: #000000;
}
 
ol.breadcrumb.bottom.ipsList_inline.left.clearfix.clear {
    color: #ffabab;
}
 
ol.breadcrumb.bottom.ipsList_inline.left.clearfix.clear li {
    color: #ffffff;
}
 
ol.breadcrumb.bottom.ipsList_inline.left.clearfix.clear li a {
    color: #dedede;
}
 
ol.breadcrumb.top.ipsList_inline.left li span {
    color: #ffffff;
}
 
p.citation {
    background-color: #000000;
    border-color: #000000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
}
 
p.desc.ipsType_smaller {
    color: #ffffff;
}
 
p.ipsBox_container.ipsPad {
    background-color: #1f1f1f;
}
 
p.ipsPad_top.desc {
    background-color: #1f1f1f;
}
 
p.ipsType_pagedesc {
    color: #cccccc;
}
 
p.posted_info.desc.lighter.ipsType_small {
    background-color: #1f1f1f;
    color: #d1d1d1;
}
 
span.answer {
    color: #e0e0e0;
}
 
span.cke_wrapper.cke_ltr {
    background-color: #1f1f1f;
    border-color: #404040;
    border-style: solid;
}
 
span.desc {
    color: #ffffff;
}
 
span.ipsButton_extra.right._fmore.clickable {
    background-color: #000000;
    border-radius: 3px;
    opacity: .8;
    padding-left: 2px;
    padding-right: 2px;
}
 
span.post_id.right.ipsType_small.desc.blend_links {
    background-color: #2e2e2e;
}
 
span.reputation.zero.rep_show {
    color: #ffffff;
}
 
span.right {
    background-color: #292929;
    color: #ffffff;
}
 
span.spoiler_title {
    color: #ffffff;
}
 
span.total.rounded {
    color: #ffffff;
}
 
span.value {
    background-color: #000000;
}
 
tbody tr td {
    border-color: #262626;
}
 
td.cke_top {
    background-color: #b3b3b3;
}
 
td.col_c_forum {
    background-color: #171717;
}
 
td.col_c_forum h4 a {
    color: #f50000;
}
 
td.col_c_forum h4 a:hover {
    color: white ;
}
 
td.col_c_icon {
    background-color: #171717;
}
 
td.col_c_post {
    background-color: #171717;
}
 
td.col_c_stats.ipsType_small {
    background-color: #171717;
}
 
td.col_f_content {
    background-color: #1f1f1f;
}
 
td.col_f_icon.altrow.short {
    background-color: #1f1f1f;
}
 
td.col_f_post {
    background-color: #1f1f1f;
}
 
td.col_f_preview.__topic_preview {
    background-color: #1f1f1f;
}
 
td.col_f_views {
    background-color: #1f1f1f;
    color: #ebebeb;
}
 
td.col_f_views.desc.blend_links {
    background-color: #1f1f1f;
}
 
td.col_m_mod.short {
    background-color: #1f1f1f;
}
 
td.col_m_photo.altrow.short {
    background-color: #1f1f1f;
}
 
td.col_m_replies.desc.blend_links {
    background-color: #1f1f1f;
}
 
td.col_m_subject {
    background-color: #1f1f1f;
}
 
td.no_messages.row1 {
    background-color: #000000;
}
 
tr._recordRow.__topic.__tid119650.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid310041.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid310046.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid315559.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid316460.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid326160.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid346572.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid347045.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid347704.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid347705.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid347708.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid347709.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid348652.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid348672.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid349126.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid349205.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid349370.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid349852.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid349985.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid350045.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid350377.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid350419.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid350507.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid350510.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid350523.unread.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid350525.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid350537.expandable td {
    background-color: #1f1f1f;
}
 
tr._recordRow.__topic.__tid350886.expandable td {
    background-color: #1f1f1f;
}
 
tr.row1 td {
    background-color: #1a1a1a;
}
 
tr.row2 td {
    background-color: #1f1f1f;
}
 
ul.bbc li {
    color: #ffffff;
}
 
ul.ipsForm.ipsForm_horizontal {
    background-color: #1f1f1f;
}
 
ul.ipsForm.ipsForm_horizontal li {
    background-color: #1f1f1f;
}
 
ul.ipsForm.ipsForm_vertical.ipsPad {
    background-color: #1f1f1f;
}
 
ul.last_post.ipsType_small li a {
    color: #ed0000;
}
 
ul.last_post.ipsType_small li a:hover {
    color: white;
}
 
ul.navmenu li {
    background-color: #080808;
}
 
ul.pc.active li {
    background-color: #141414;
    color: #c2c2c2;
}
 
ul.ps4.active li {
    background-color: #141414;
    color: #cfcfcf;
}
 
ul.xb1.active li {
    background-color: #141414;
    color: #c2c2c2;
}
 
li.clearfix.ipsPad_half {
    background-color: #1f1f1f;
}
 
ul.ipsList_withminiphoto {
    background-color: #1f1f1f;
}
 
div.list_content {
    background-color: #1f1f1f;
}
 
li.clearfix {
    background-color: #1f1f1f;
}
 
div.likepop.fixed_inner {
    background-color: #1f1f1f;
}
 
li.ipsType_small.clearfix {
    background-color: #1f1f1f;
}
 
div.ipsHeaderMenu.boxShadow {
    background-color: #171717 ;
    border-color: #171717;
}
 
h4.ipsType_sectiontitle {
    background-color: #1f1f1f;
}

NOTE: Still experimenting with background image, please report any bugs with it

 

It should modify the old theme back into new one but tell me if something is missing or w/e...

 

Injector I used is https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en

for chrome, but I am sure you can find some others as well as for Firefox and whatnot.

 

 

To those who don't know, download the app above then:

click to open menu

->"Open Stylebot"

at the bottom click "Edit CSS" and copy the code above, then hit save and it should work now, even if you refresh the page it should not be eye hurting.

 

I will keep editing this code if required or requested :/

 

Just thought I should share to those who wanted it

 

 

Preview:

rbz7ls.jpg

 

Just remember, if something looks odd or unfinished feel free to point it out so I can edit it :)

 

 

Blue version (not by me): https://forums.warframe.com/index.php?/topic/349205-anyone-with-css-knowledge-lets-paint-warframe-dark-again/

Edited by noveltyhero
Link to comment
Share on other sites
noveltyhero

noveltyhero

Posted
  • Author
Posted

Background of the questions on the community hot topics page is still a bright whitish color. Also some text (pretty much all of [DE]Drew's post in the hot topic is black)

https://forums.warframe.com/index.php?/topic/341525-november-7th-community-hot-topics/

Tested on Firefox w/ Stylish plugin and V3 of the CSS code

Thanks! Fixed it with Version 4 :)

Link to comment
Share on other sites
noveltyhero

noveltyhero

Posted
  • Author
Posted

Found something else, in the forum profiles white boxes appear under the content of each tab and between posts in the posts tab. The white box only appears on the overview tab if there's no text in it (like in mine)

Tested on V4

rep.PNG?psid=1

posts.PNG?psid=1

 

btw this theme is amazing

Thanks, will fix for V5

 

Also on V5, I made a little test with the overly bright background:

1z565tv.jpg

 

Glad you like it :)

Link to comment
Share on other sites
noveltyhero

noveltyhero

Posted
  • Author
Posted

This one is a little obscure but I thought I'd bring it up, the darker background is slightly smaller than the normal one which leads to a problem when zooming out

Capture.PNG?psid=1

Does this pose as an issue on your resolution? I am more interested to see resolution problems but will surely take a look at this, thanks :)

Link to comment
Share on other sites
LizardsOnCrack

LizardsOnCrack

Posted
Posted

Does this pose as an issue on your resolution? I am more interested to see resolution problems but will surely take a look at this, thanks :)

It's only an issue on my large flat-screen monitor because I usually zoom out so that I don't have giant webpages on it, but on my 2nd regular monitor and laptop it's fine and looks great

Link to comment
Share on other sites
noveltyhero

noveltyhero

Posted
  • Author
Posted

It's only an issue on my large flat-screen monitor because I usually zoom out so that I don't have giant webpages on it, but on my 2nd regular monitor and laptop it's fine and looks great

Alrighty then, there you go buddy! Should look the same now on your larger monitor :)

Link to comment
Share on other sites
noveltyhero

noveltyhero

Posted
  • Author
Posted

Can we custom the font color? still feel a bit weird about red text.

also i have no idea why the code affect to facebook website too lol (firefox)

Yes you can change the font but I didn't mess around with it because for me it's fine. I will take a look at it later if you want though, but any specific font you want?

 

As for the code, it is possible because a lot of websites tend to share IDs and Classes which are used in CSS from the HTML code to identify what to change and how. My suggestion on the fix is make sure the extension is disabled for your browser on that webpage (unless of course you use custom theme there too) and that CSS codes are not mixed around. 

 

 

Any specific feedback on the red text? It is fine for me because I like red but not everyone would agree I guess

Link to comment
Share on other sites
Shafilp

Shafilp

Posted
Posted

Yes you can change the font but I didn't mess around with it because for me it's fine. I will take a look at it later if you want though, but any specific font you want?

 

As for the code, it is possible because a lot of websites tend to share IDs and Classes which are used in CSS from the HTML code to identify what to change and how. My suggestion on the fix is make sure the extension is disabled for your browser on that webpage (unless of course you use custom theme there too) and that CSS codes are not mixed around. 

 

 

Any specific feedback on the red text? It is fine for me because I like red but not everyone would agree I guess

for me im fine with old color i guess that blue or sky.

also i try to mixed you code with Shifted code and now that work fine no more affect to facebook.

 

Love that grey theme on the background <3

Link to comment
Share on other sites
noveltyhero

noveltyhero

Posted
  • Author
Posted

I feel it's noteworthy to mention that if you try to apply this theme to the dark style, it doesn't work properly.

Just tried it.

It is because this theme is added on top of the light theme, changing or adding anything that the light theme did not do right. Which means that when you change to dark theme there will be variables untouched because it was not needed for light theme but would be needed for dark one.

Didn't seem much of an issue to me though as I use light theme with this on top :/

Link to comment
Share on other sites
  • 1 month later...
Seqan

Seqan

Posted
Posted (edited)

Hey found a few bugs. SS attatched.

 

POLLS:

 

darker10.jpg

 

ADVANCED SEARCH:

 

darker11.jpg

 

USER'S CONTENT:

 

darker12.jpg

 

Anyway there you have it.

 

Also worth noting that on any and all pages, the "follow this topic" window popup thingy is white-ish.

Edited by Seqan
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...