Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

AVSIM.com Dark Style Request

edited March 11 in Style Requests Chrome
https://www.avsim.com/

Hi, could someone create a basic dark theme for the website above using Google Chrome? I'd like all the background white to be changed to black and the text to be white retaining the blue color as it is, where needed.

Alternatively, a mirror copy of the theme made here for Facebook (https://userstyles.org/styles/118180/dusky-gray-facebook-dark-theme) would also do for this site.

Thanks!

Comments

  • quick n dirty:

    @-moz-document domain("avsim.com") {
    #ipsLayout_contentWrapper,
    .ipsAreaBackground_reset,
    .ipsType_sectionTitle,
    .ipsWidget {
        background-color: #000 !important;
    }
    .ipsSideMenu_item:not(.ipsSideMenu_itemActive) a:hover,
    a.ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover {
        background-color: #003689 !important;
    }
    body,
    .ipsType_richText {
        color: #4577ca !important;
    }
    }
    
  • quick n dirty:

    @-moz-document domain("avsim.com") {
    #ipsLayout_contentWrapper,
    .ipsAreaBackground_reset,
    .ipsType_sectionTitle,
    .ipsWidget {
    background-color: #000 !important;
    }
    .ipsSideMenu_item:not(.ipsSideMenu_itemActive) a:hover,
    a.ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover {
    background-color: #003689 !important;
    }
    body,
    .ipsType_richText {
    color: #4577ca !important;
    }
    }
    Thanks. I added it using the 'Create new style' option in Stylish. However, it doesn't seem to be working. Even reloading the website or script does not help. It shows that this script is active but there is no visual difference on the site.
  • edited March 12 Firefox

    I use Stylus, it looks like this:
    screenshot

    ~Stylish seems not to convert Mozilla format automatically, so you have to manually fill in the "applies to" field with "URL on the domain": avsim.com and strip the code to just this:~
    /edit: After creating, use the "import" button on the left.

    Of course you can change the colors easily on your own.

  • I use Stylus, it looks like this:

    screenshot

    ~Stylish seems not to convert Mozilla format automatically, so you have to manually fill in the "applies to" field with "URL on the domain": avsim.com and strip the code to just this:~

    /edit: After creating, use the "import" button on the left.

    Of course you can change the colors easily on your own.

    Thanks, it seems to have worked using Stylus. Could I trouble you a little more to modify it slightly?
    I'd like the entire width of the site to be in dark leaving just the banner on top in blue.

    Additionally, this style only seems to work on the home page. Upon clicking a thread (example: https://www.avsim.com/forums/topic/533374-navigraph/), you can see how the white has returned in the body of the thread and the text is blue. Could that be darkened as well with the text made white?

    Thanks again for your help!
  • edited March 14 Firefox

    leaving just the banner on top in blue

    looks awful because header and top headings are not on one line. See if it is also ok with the update.

    Additionally, this style only seems to work on the home page

    No, it also works in the forums. But there they have a different site structure so additional identifiers were necessary.

    Could that be darkened as well with the text made white?

    Pure white on black is not good and "overshines". Just modify it, try different colors like #333 or #ddd

    New code:

    @-moz-document domain("avsim.com") {
    body,
    #ipsLayout_header header,
    #ipsLayout_contentWrapper,
    .ipsAreaBackground_reset,
    .ipsType_sectionTitle,
    .ipsWidget,
    .ipsBox:not(.ipsBox_transparent):not(.ipsModerated),
    .ipsComment,
    .ipsAreaBackground,
    .ipsApp .ipsButton_link.ipsFollow,
    .ipsApp .ipsButton_link.ipsPromote {
        background-color: #000 !important;
    }
    .ipsQuote,
    .ipsDataList.ipsDataList_zebra .ipsDataItem:not(.ipsDataItem_selected):not(.ipsModerated):not(.ipsDataItem_new):not(.ipsDataItem_success):not(.ipsDataItem_warning):not(.ipsDataItem_error):not(.ipsDataItem_info):not(.ipsDataItem_status):nth-child(2n),
    .ipsButtonBar {
        background-color: #333 !important;
    }
    .ipsSideMenu_item:not(.ipsSideMenu_itemActive) a:hover,
    a.ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover {
        background-color: #003689 !important;
    }
    body,
    .ipsType_richText,
    .ipsType_pageTitle,
    .ipsButtonBar .ipsPagination .ipsPagination_pageJump a,
    .ipsBreadcrumb > ul > li {
        color: #4577ca !important;
    }
    
    /* do not display donate box in between */
    div[data-role="commentFeed"] > form > table {
        display: none !important;
    }
    }
    
  • It now looks and works perfectly! Thank you so much for you help and tips on where to modify the colors in the script.

    This will help me understand how to create my own scripts in the future. Many thanks!
Sign In or Register to comment.