floridaPalmMan Posted February 12, 2021 Report Share Posted February 12, 2021 (edited) So instead of working today I spent the morning creating a dark theme for the site. Why a dark theme? Well for those of you who spend all day at a computer (like me), or like browsing the site in the evening (also me), dark themes are great for reducing strain on your eyes and won't keep your wife up all night while you browse palmtalk in bed. To use the theme, you have to install a browser plugin on your preferred web browser which can edit the sites styling (CSS) Stylish - Chromium based browsers (Chrome, Brave, Dissenter) Stylish - Firefox SuperStyles - Microsoft Edge Stylus - Opera Once the plugin is installed, copy and paste my code at the bottom of this post and the site should turn dark. Here are some screenshots of what it looks like on my desktop, and what it should look like on mobile devices when either these browser extensions can be installed on mobile devices or if the mods are able to take the code and make a new dark theme out of it. (still haven't had time to photoshop the logo) I'd love it if someone wanted to help test/refine the theme so it can be used by everyone. _____________________________________________________________________________________________________ To the mods, I noticed that the forum currently has the ability to change themes. Feel free to take the code and create a dark theme for the site. The CSS is simply a modified extension of the default theme PalmTreeLover. So to create the new dark theme you can literally just copy the PalmTreeLover theme, scroll down to the bottom of the CSS page and paste the code. _____________________________________________________________________________________________________ /* main forum */ body { background-color:#333; color:#fff; } .ipsAreaBackground_reset { background-color:#333; color:#fff; } #ipsLayout_header header, .ipsUserPhoto { background-color:#333; } .ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half { background-color:#333; } .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(even) { background:#5c5c5c; } .ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) { color:rgb(255 255 255 / 61%); } .ipsMenu { background:#757575; } .ipsMenu_title { background:#3b3b3b; } .ipsTabs_activeItem { background:#9b9b9b; color:#303030; } .ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link { color:#ffffffd4; } .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a { color:#ffffffd4; background:#555; } .ipsQuote { background:#4c4c4c; } .ipsAreaBackground { background:#747474; } .ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) { background-color:#333; } .ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) { color:#dccf38; } .ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a { background:#a3a3a3; } .ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote { background:#818181; } .ipsTabs_panel { background:#333; } .ipsMenu_headerBar, .ipsMenu_footerBar { background:#757575; } .ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) { background:#545454; } .ipsDataItem.ipsClearfix.cMessage { background:#757575; } .ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] { background:#333; } .ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover { background:#6d6d6d; } .ipsSelectTree { background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%) } .ipsSelectTree_nodes [data-role="nodeList"]{ background:#333; } .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{ background:#6d6d6d; } /* gallery lightbox */ .cGalleryLightbox_info { background:#333; } .ipsType_light { color:#dedede; } .cGalleryChooseAlbum_listItem { background:#6d6d6d; } /* messaging */ .ipsDialog > div, .ipsAutocompleteMenu { background:#333; } .ipsAutocompleteMenu_item[data-selected] { background:#6d6d6d; } .ipsDialog_title { color:#ffffffd4; } /* profile page */ #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img { max-width:160px; } .ipsPad_half.cProfileRepScore{ background:#598f5b; } /* reply box */ .ipsComposeArea_dummy { background:#9a9a9a; color:#222; } .cke_top { background:#c1c1c1; } .ipsAreaBackground_light { background:#686868; } .cke_wysiwyg_frame, .cke_wysiwyg_div { background-color:#555; } Edited February 12, 2021 by floridaPalmMan 4 2 Quote Link to comment Share on other sites More sharing options...
RedRabbit Posted February 25, 2021 Report Share Posted February 25, 2021 Wow, great work! I'm using it now and I like it a lot. However, I noticed one problem. The body tag isn't domain specific so the body section of other websites will change colors too and not just PalmTalk.org. I'm not a CSS expert, but I'm guessing there's no workaround for this. 1 1 Quote Westchase | 9b, St. Petersburg | 9b, & Laurel | 10a Link to comment Share on other sites More sharing options...
floridaPalmMan Posted February 26, 2021 Author Report Share Posted February 26, 2021 (edited) 20 hours ago, RedRabbit said: Wow, great work! I'm using it now and I like it a lot. However, I noticed one problem. The body tag isn't domain specific so the body section of other websites will change colors too and not just PalmTalk.org. I'm not a CSS expert, but I'm guessing there's no workaround for this. Ahh yes sorry I forgot to specify how to limit this theme to palmtalk.org, but it's an easy fix. Edit the theme in Sylish or whatever CSS plugin you used. There should be an option to limit the theme to a specific url or domain. Here are my settings... Save the theme again and it should be limited to palmtalk.org rather than all websites. Let me know if that fixes the issue. Edited February 26, 2021 by floridaPalmMan 2 Quote Link to comment Share on other sites More sharing options...
RedRabbit Posted February 27, 2021 Report Share Posted February 27, 2021 On 2/25/2021 at 8:33 PM, floridaPalmMan said: Ahh yes sorry I forgot to specify how to limit this theme to palmtalk.org, but it's an easy fix. Edit the theme in Sylish or whatever CSS plugin you used. There should be an option to limit the theme to a specific url or domain. Here are my settings... Save the theme again and it should be limited to palmtalk.org rather than all websites. Let me know if that fixes the issue. That fixed it, thanks @floridaPalmMan! 1 Quote Westchase | 9b, St. Petersburg | 9b, & Laurel | 10a Link to comment Share on other sites More sharing options...
JLM Posted March 1, 2021 Report Share Posted March 1, 2021 Stunning! Great work! 1 Quote Palms - 4 S. romanzoffiana, 2 W. bifurcata, 6 W. robusta, 1 R. rivularis, 1 B. odorata, 1 B. nobilis, 2 S. palmetto, 1 A. merillii, 2 P. sylvestris, 1 Butia x Jubaea, 1 Butia x Jubaea x Butia x Syagrus, 1 X Butiagrus nabonnandii, 2 L. chinensis, 1 Cocos nucifera Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 1, 2021 Report Share Posted March 1, 2021 Can you remove it too? Quote Nothing to say here. Link to comment Share on other sites More sharing options...
floridaPalmMan Posted March 2, 2021 Author Report Share Posted March 2, 2021 23 hours ago, EastCanadaTropicals said: Can you remove it too? Yea of course. Click on the stylish icon in your browser. Then click the "Active" button on the theme in stylish and it will disable the changes. 1 Quote Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 2, 2021 Report Share Posted March 2, 2021 I wonder if you can photoshop the ips logo now. Quote Nothing to say here. Link to comment Share on other sites More sharing options...
floridaPalmMan Posted March 2, 2021 Author Report Share Posted March 2, 2021 30 minutes ago, EastCanadaTropicals said: I wonder if you can photoshop the ips logo now. Sure, I'll try to get a nice design soon and will update the thread when it's done. 1 Quote Link to comment Share on other sites More sharing options...
floridaPalmMan Posted March 2, 2021 Author Report Share Posted March 2, 2021 (edited) 4 hours ago, EastCanadaTropicals said: I wonder if you can photoshop the ips logo now. @EastCanadaTropicals & @RedRabbit Here is the updated code for the dark theme logo. Luckily I found one with a transparent background on palms.org and was able to use it. I may add the little diagonal "Palm Talk" text to the logo afterward but for now this will do. This is a text fix as well as the logo fix. Just add this code to the bottom of the theme below all the other CSS. .ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half{ color:#fff; } a[data-mentionid]{background:#e91e63} #elLogo img{display:none;} #elLogo::after{ height:60px; width:100%; content:''; position:absolute; background:url(https://palms.org/wp-content/themes/palms/images/logo.png); background-repeat:no-repeat; } Also if you notice any other bugs/display issues please let me know and I'll fix them asap. Thanks for the feedback and help testing the theme. Edited March 2, 2021 by floridaPalmMan 1 Quote Link to comment Share on other sites More sharing options...
JLM Posted March 2, 2021 Report Share Posted March 2, 2021 Personally i would find it better if everyone's names were in white on a dark background instead of black on a dark background, if you get what i mean. Otherwise, everything seems just fine! 1 Quote Palms - 4 S. romanzoffiana, 2 W. bifurcata, 6 W. robusta, 1 R. rivularis, 1 B. odorata, 1 B. nobilis, 2 S. palmetto, 1 A. merillii, 2 P. sylvestris, 1 Butia x Jubaea, 1 Butia x Jubaea x Butia x Syagrus, 1 X Butiagrus nabonnandii, 2 L. chinensis, 1 Cocos nucifera Link to comment Share on other sites More sharing options...
floridaPalmMan Posted March 2, 2021 Author Report Share Posted March 2, 2021 (edited) 31 minutes ago, JLM said: Personally i would find it better if everyone's names were in white on a dark background instead of black on a dark background, if you get what i mean. Otherwise, everything seems just fine! How about hot pink (#e91e63) ? or burnt orange (#ff9800) ? or lime green (#8bc34a) ? here's a nice diluted white/gray (#ffffffd4) which is the same color as the regular text. Plain bright white is just, #fff Here's the css line so you can pick the hex value you want .ipsType_sectionHead.cAuthorPane_author{ color:#ffffffd4 } Just put whatever hex value you'd like after the hashtag. Edited March 2, 2021 by floridaPalmMan 1 Quote Link to comment Share on other sites More sharing options...
floridaPalmMan Posted March 2, 2021 Author Report Share Posted March 2, 2021 (edited) Another update: (I'll try to get a mod to update the initial post with the consolidated changes. Sorry for the inconvenience.) Alert box & text as well as name color changes. .ipsType_sectionHead.cAuthorPane_author{ color:#ffffffd4 } .ipsAlert{ background:#555; } .ipsAlert i{ color:#f44336; } name color update alert box update Edited March 2, 2021 by floridaPalmMan Quote Link to comment Share on other sites More sharing options...
JLM Posted March 2, 2021 Report Share Posted March 2, 2021 Hot pink looks good! Ill put that in. Thanks!! 1 Quote Palms - 4 S. romanzoffiana, 2 W. bifurcata, 6 W. robusta, 1 R. rivularis, 1 B. odorata, 1 B. nobilis, 2 S. palmetto, 1 A. merillii, 2 P. sylvestris, 1 Butia x Jubaea, 1 Butia x Jubaea x Butia x Syagrus, 1 X Butiagrus nabonnandii, 2 L. chinensis, 1 Cocos nucifera Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 Can you also make the searchbar green? Quote Nothing to say here. Link to comment Share on other sites More sharing options...
floridaPalmMan Posted March 3, 2021 Author Report Share Posted March 3, 2021 (edited) 18 minutes ago, EastCanadaTropicals said: Can you also make the searchbar green? like this? Probably looks better with a light gray but I'll give the css line so you can edit/customize it yourself if you'd like. The css line is: (green) #elSearch{ background:#6cab51; } (for gray) #elSearch{ background:#9c9c9c; } Also I fixed the expanded search boxes. Must have missed them before. Add this code for the fixed expanded search. #elSearch{ background:#9c9c9c; } #elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{ background:#555; } #elSearchExpanded .ipsMenu_title{ background:#b9b9b9; } Edited March 3, 2021 by floridaPalmMan Quote Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 1 minute ago, floridaPalmMan said: like this? Probably looks better with a light gray but I'll give the css line so you can edit/customize it yourself if you'd like. The css line is: (green) #elSearch{ background:#9c9c9c; } (for gray) #elSearch{ background:#6cab51; } Also I fixed the expanded search boxes. Must have missed them before. Add this code for the fixed expanded search. #elSearch{ background:#9c9c9c; } #elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{ background:#555; } #elSearchExpanded .ipsMenu_title{ background:#b9b9b9; } Thanks. Quote Nothing to say here. Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 I made a prototype of the PalmTalk logo in the Ips logo: 1 Quote Nothing to say here. Link to comment Share on other sites More sharing options...
floridaPalmMan Posted March 3, 2021 Author Report Share Posted March 3, 2021 7 minutes ago, EastCanadaTropicals said: I made a prototype of the PalmTalk logo in the Ips logo: Nice. Thanks bud. I like the color selection and will add it to the banner and upload a new version soon. Thanks for your input and feeback too. It's much appreciated. Hopefully once we perfect the dark theme, we can get the mods to add it permanently to the site so we can use it on our mobile devices too 1 Quote Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 11 hours ago, floridaPalmMan said: Nice. Thanks bud. I like the color selection and will add it to the banner and upload a new version soon. Thanks for your input and feeback too. It's much appreciated. Hopefully once we perfect the dark theme, we can get the mods to add it permanently to the site so we can use it on our mobile devices too No problem. I hope you can take high resolution screenshots for the default theme, so you can crop out the logo. Quote Nothing to say here. Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 13 hours ago, floridaPalmMan said: Nice. Thanks bud. I like the color selection and will add it to the banner and upload a new version soon. Thanks for your input and feeback too. It's much appreciated. Hopefully once we perfect the dark theme, we can get the mods to add it permanently to the site so we can use it on our mobile devices too How do I add the prototype logo I made? Quote Nothing to say here. Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 (edited) 13 hours ago, floridaPalmMan said: like this? Probably looks better with a light gray but I'll give the css line so you can edit/customize it yourself if you'd like. The css line is: (green) #elSearch{ background:#6cab51; } (for gray) #elSearch{ background:#9c9c9c; } Also I fixed the expanded search boxes. Must have missed them before. Add this code for the fixed expanded search. #elSearch{ background:#9c9c9c; } #elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{ background:#555; } #elSearchExpanded .ipsMenu_title{ background:#b9b9b9; } Here is a dark version of my prototype logo: Edited March 3, 2021 by EastCanadaTropicals 1 Quote Nothing to say here. Link to comment Share on other sites More sharing options...
floridaPalmMan Posted March 3, 2021 Author Report Share Posted March 3, 2021 2 hours ago, EastCanadaTropicals said: How do I add the prototype logo I made? Best we can do with CSS is this but it's not perfect. #elLogo::before{ content:'"Palm Talk"'; height:20px; width:auto; position:absolute; color:#ffc90e; transform:rotate(-29deg); left:367px; font-size:18px; top:20px; } Otherwise we'd have to use an image editor to add the text, then upload the image to the server (which we don't have access to). So the code above is probably the best we can do at the moment. 1 Quote Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 7 minutes ago, floridaPalmMan said: Best we can do with CSS is this but it's not perfect. #elLogo::before{ content:'"Palm Talk"'; height:20px; width:auto; position:absolute; color:#ffc90e; transform:rotate(-29deg); left:367px; font-size:18px; top:20px; } Otherwise we'd have to use an image editor to add the text, then upload the image to the server (which we don't have access to). So the code above is probably the best we can do at the moment. Thanks for using my prototype! I wonder if the mods can get us a better version. 1 Quote Nothing to say here. Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 On 2/12/2021 at 11:37 AM, floridaPalmMan said: So instead of working today I spent the morning creating a dark theme for the site. Why a dark theme? Well for those of you who spend all day at a computer (like me), or like browsing the site in the evening (also me), dark themes are great for reducing strain on your eyes and won't keep your wife up all night while you browse palmtalk in bed. To use the theme, you have to install a browser plugin on your preferred web browser which can edit the sites styling (CSS) Stylish - Chromium based browsers (Chrome, Brave, Dissenter) Stylish - Firefox SuperStyles - Microsoft Edge Stylus - Opera Once the plugin is installed, copy and paste my code at the bottom of this post and the site should turn dark. Here are some screenshots of what it looks like on my desktop, and what it should look like on mobile devices when either these browser extensions can be installed on mobile devices or if the mods are able to take the code and make a new dark theme out of it. (still haven't had time to photoshop the logo) I'd love it if someone wanted to help test/refine the theme so it can be used by everyone. _____________________________________________________________________________________________________ To the mods, I noticed that the forum currently has the ability to change themes. Feel free to take the code and create a dark theme for the site. The CSS is simply a modified extension of the default theme PalmTreeLover. So to create the new dark theme you can literally just copy the PalmTreeLover theme, scroll down to the bottom of the CSS page and paste the code. _____________________________________________________________________________________________________ /* main forum */ body { background-color:#333; color:#fff; } .ipsAreaBackground_reset { background-color:#333; color:#fff; } #ipsLayout_header header, .ipsUserPhoto { background-color:#333; } .ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half { background-color:#333; } .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(even) { background:#5c5c5c; } .ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) { color:rgb(255 255 255 / 61%); } .ipsMenu { background:#757575; } .ipsMenu_title { background:#3b3b3b; } .ipsTabs_activeItem { background:#9b9b9b; color:#303030; } .ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link { color:#ffffffd4; } .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a { color:#ffffffd4; background:#555; } .ipsQuote { background:#4c4c4c; } .ipsAreaBackground { background:#747474; } .ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) { background-color:#333; } .ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) { color:#dccf38; } .ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a { background:#a3a3a3; } .ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote { background:#818181; } .ipsTabs_panel { background:#333; } .ipsMenu_headerBar, .ipsMenu_footerBar { background:#757575; } .ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) { background:#545454; } .ipsDataItem.ipsClearfix.cMessage { background:#757575; } .ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] { background:#333; } .ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover { background:#6d6d6d; } .ipsSelectTree { background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%) } .ipsSelectTree_nodes [data-role="nodeList"]{ background:#333; } .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{ background:#6d6d6d; } /* gallery lightbox */ .cGalleryLightbox_info { background:#333; } .ipsType_light { color:#dedede; } .cGalleryChooseAlbum_listItem { background:#6d6d6d; } /* messaging */ .ipsDialog > div, .ipsAutocompleteMenu { background:#333; } .ipsAutocompleteMenu_item[data-selected] { background:#6d6d6d; } .ipsDialog_title { color:#ffffffd4; } /* profile page */ #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img { max-width:160px; } .ipsPad_half.cProfileRepScore{ background:#598f5b; } /* reply box */ .ipsComposeArea_dummy { background:#9a9a9a; color:#222; } .cke_top { background:#c1c1c1; } .ipsAreaBackground_light { background:#686868; } .cke_wysiwyg_frame, .cke_wysiwyg_div { background-color:#555; } I might try to make a dark theme for mobile, using your code in a mobile app. Quote Nothing to say here. Link to comment Share on other sites More sharing options...
floridaPalmMan Posted March 3, 2021 Author Report Share Posted March 3, 2021 (edited) 6 minutes ago, EastCanadaTropicals said: I might try to make a dark theme for mobile, using your code in a mobile app. There are a few things that probably won't work correctly on mobile since I haven't written the code for it, but let me know which app you use and I'll start the mobile development since it's more detailed and takes a bit more time. Here's an updated codebase. If you customized any code or made any changes to my code, save them and paste them at the very bottom. I added a section at the bottom called "Custom Styles" so you can keep track of your customized code. /* main forum */ body { background-color:#333; color:#fff; } .ipsAreaBackground_reset { background-color:#333; color:#fff; } #ipsLayout_header header, .ipsUserPhoto { background-color:#333; } .ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half { background-color:#333; } .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(even) { background:#5c5c5c; } .ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) { color:rgb(255 255 255 / 61%); } .ipsMenu { background:#757575; } .ipsMenu_title { background:#3b3b3b; } .ipsTabs_activeItem { background:#9b9b9b; color:#303030; } .ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link { color:#ffffffd4; } .ipsBreadcrumb [data-action="defaultStream"], .ipsBreadcrumb [data-action="markSiteRead"]{color:#9e9e9e;} .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a { color:#ffffffd4; background:#555; } .ipsSelectTree_placeholder{color:#ffffffd4;} .ipsQuote { background:#4c4c4c; } .ipsItemStatus.ipsItemStatus_large{ background:#ff98006e; } .cPastLeaders_cell{ background:#555; } .cPastLeaders_cell:after{ opacity:0.4; color:#080808; } .cPastLeaders_title span{ background:#555; } .ipsAreaBackground { background:#747474; } .ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) { background-color:#333; } .ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) { color:#dccf38; } .ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a { background:#a3a3a3; } .ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote { background:#818181; } .ipsTabs_panel { background:#333; } .ipsMenu_headerBar, .ipsMenu_footerBar { background:#757575; } .ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) { background:#545454; } .ipsDataItem.ipsClearfix.cMessage { background:#757575; } .ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] { background:#333; } .ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover { background:#6d6d6d; } .ipsSelectTree { background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%) } .ipsSelectTree_nodes [data-role="nodeList"]{ background:#333; } .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{ background:#6d6d6d; } /* gallery lightbox */ .cGalleryLightbox_info { background:#333; } .ipsType_light { color:#dedede; } .cGalleryChooseAlbum_listItem { background:#6d6d6d; } /* messaging */ .ipsDialog > div, .ipsAutocompleteMenu { background:#333; } .ipsAutocompleteMenu_item[data-selected] { background:#6d6d6d; } .cMessage_active.ipsDataItem_selected{ background:#555!important; } .ipsComment{ background:#333; } .ipsComment:not( .ipsModerated ) .ipsComment_header{ background:#555; } .ipsDialog_title { color:#ffffffd4; } /* profile page */ #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img { max-width:160px; } .ipsPad_half.cProfileRepScore{ background:#598f5b; } /* reply box */ .ipsComposeArea_dummy { background:#9a9a9a; color:#222; } .cke_top { background:#c1c1c1; } .ipsAreaBackground_light { background:#686868; } .cke_wysiwyg_frame, .cke_wysiwyg_div { background-color:#555; } .ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half{ color:#fff; } a[data-mentionid]{background:#e91e63} #elLogo img{display:none;} #elLogo::before{ height:60px; width:100%; content:''; position:absolute; background:url(https://palms.org/wp-content/themes/palms/images/logo.png); background-repeat:no-repeat; } #elLogo::after{ content:'"Palm Talk"'; height:20px; width:auto; position:absolute; color:#ffc90e; transform:rotate(-29deg); left:367px; font-size:18px; top:20px; } .ipsType_sectionHead.cAuthorPane_author{ color:#ffffffd4; } .ipsAlert{ background:#555; } .ipsAlert i{ color:#f44336; } /* widgets */ .ipsWidget .ipsCalendarDate{ background:#9e9e9e; } .ipsSideMenu_item:not( .ipsSideMenu_itemActive ) a:hover, a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover, span.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover{ background-color:#888; } #elSearch{ background:#9c9c9c; } #elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{ background:#555; } #elSearchExpanded .ipsMenu_title{ background:#b9b9b9; } .cSearchSubmit .fa.fa-search{ color:#333; } /* Custom styles. Add custom styles below this line */ Edited March 3, 2021 by floridaPalmMan Quote Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 Just now, floridaPalmMan said: There are a few things that probably won't work correctly on mobile since I haven't written the code specifically for a mobile device but let me know which app you use and I'll start the mobile development since it's more detailed and takes a bit more time. Here's an updated codebase. If you customized any code or made any changes to my code, save them and paste them at the very bottom. I added a section at the bottom called "Custom Styles" so you can keep track of your customized code. /* main forum */ body { background-color:#333; color:#fff; } .ipsAreaBackground_reset { background-color:#333; color:#fff; } #ipsLayout_header header, .ipsUserPhoto { background-color:#333; } .ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half { background-color:#333; } .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(even) { background:#5c5c5c; } .ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) { color:rgb(255 255 255 / 61%); } .ipsMenu { background:#757575; } .ipsMenu_title { background:#3b3b3b; } .ipsTabs_activeItem { background:#9b9b9b; color:#303030; } .ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link { color:#ffffffd4; } .ipsBreadcrumb [data-action="defaultStream"], .ipsBreadcrumb [data-action="markSiteRead"]{color:#9e9e9e;} .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a { color:#ffffffd4; background:#555; } .ipsSelectTree_placeholder{color:#ffffffd4;} .ipsQuote { background:#4c4c4c; } .ipsItemStatus.ipsItemStatus_large{ background:#ff98006e; } .cPastLeaders_cell{ background:#555; } .cPastLeaders_cell:after{ opacity:0.4; color:#080808; } .cPastLeaders_title span{ background:#555; } .ipsAreaBackground { background:#747474; } .ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) { background-color:#333; } .ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) { color:#dccf38; } .ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a { background:#a3a3a3; } .ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote { background:#818181; } .ipsTabs_panel { background:#333; } .ipsMenu_headerBar, .ipsMenu_footerBar { background:#757575; } .ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) { background:#545454; } .ipsDataItem.ipsClearfix.cMessage { background:#757575; } .ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] { background:#333; } .ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover { background:#6d6d6d; } .ipsSelectTree { background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%) } .ipsSelectTree_nodes [data-role="nodeList"]{ background:#333; } .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{ background:#6d6d6d; } /* gallery lightbox */ .cGalleryLightbox_info { background:#333; } .ipsType_light { color:#dedede; } .cGalleryChooseAlbum_listItem { background:#6d6d6d; } /* messaging */ .ipsDialog > div, .ipsAutocompleteMenu { background:#333; } .ipsAutocompleteMenu_item[data-selected] { background:#6d6d6d; } .cMessage_active.ipsDataItem_selected{ background:#555!important; } .ipsComment{ background:#333; } .ipsComment:not( .ipsModerated ) .ipsComment_header{ background:#555; } .ipsDialog_title { color:#ffffffd4; } /* profile page */ #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img { max-width:160px; } .ipsPad_half.cProfileRepScore{ background:#598f5b; } /* reply box */ .ipsComposeArea_dummy { background:#9a9a9a; color:#222; } .cke_top { background:#c1c1c1; } .ipsAreaBackground_light { background:#686868; } .cke_wysiwyg_frame, .cke_wysiwyg_div { background-color:#555; } .ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half{ color:#fff; } a[data-mentionid]{background:#e91e63} #elLogo img{display:none;} #elLogo::before{ height:60px; width:100%; content:''; position:absolute; background:url(https://palms.org/wp-content/themes/palms/images/logo.png); background-repeat:no-repeat; } #elLogo::after{ content:'"Palm Talk"'; height:20px; width:auto; position:absolute; color:#ffc90e; transform:rotate(-29deg); left:367px; font-size:18px; top:20px; } .ipsType_sectionHead.cAuthorPane_author{ color:#ffffffd4; } .ipsAlert{ background:#555; } .ipsAlert i{ color:#f44336; } /* widgets */ .ipsWidget .ipsCalendarDate{ background:#9e9e9e; } .ipsSideMenu_item:not( .ipsSideMenu_itemActive ) a:hover, a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover, span.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover{ background-color:#888; } #elSearch{ background:#9c9c9c; } #elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{ background:#555; } #elSearchExpanded .ipsMenu_title{ background:#b9b9b9; } .cSearchSubmit .fa.fa-search{ color:#333; } /* Custom styles */ I was looking at TrebEdit, but I might search other apps. Quote Nothing to say here. Link to comment Share on other sites More sharing options...
EastCanadaTropicals Posted March 3, 2021 Report Share Posted March 3, 2021 11 minutes ago, floridaPalmMan said: There are a few things that probably won't work correctly on mobile since I haven't written the code for it, but let me know which app you use and I'll start the mobile development since it's more detailed and takes a bit more time. Here's an updated codebase. If you customized any code or made any changes to my code, save them and paste them at the very bottom. I added a section at the bottom called "Custom Styles" so you can keep track of your customized code. /* main forum */ body { background-color:#333; color:#fff; } .ipsAreaBackground_reset { background-color:#333; color:#fff; } #ipsLayout_header header, .ipsUserPhoto { background-color:#333; } .ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half { background-color:#333; } .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(even) { background:#5c5c5c; } .ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) { color:rgb(255 255 255 / 61%); } .ipsMenu { background:#757575; } .ipsMenu_title { background:#3b3b3b; } .ipsTabs_activeItem { background:#9b9b9b; color:#303030; } .ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link { color:#ffffffd4; } .ipsBreadcrumb [data-action="defaultStream"], .ipsBreadcrumb [data-action="markSiteRead"]{color:#9e9e9e;} .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a { color:#ffffffd4; background:#555; } .ipsSelectTree_placeholder{color:#ffffffd4;} .ipsQuote { background:#4c4c4c; } .ipsItemStatus.ipsItemStatus_large{ background:#ff98006e; } .cPastLeaders_cell{ background:#555; } .cPastLeaders_cell:after{ opacity:0.4; color:#080808; } .cPastLeaders_title span{ background:#555; } .ipsAreaBackground { background:#747474; } .ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) { background-color:#333; } .ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) { color:#dccf38; } .ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a { background:#a3a3a3; } .ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote { background:#818181; } .ipsTabs_panel { background:#333; } .ipsMenu_headerBar, .ipsMenu_footerBar { background:#757575; } .ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) { background:#545454; } .ipsDataItem.ipsClearfix.cMessage { background:#757575; } .ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] { background:#333; } .ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover { background:#6d6d6d; } .ipsSelectTree { background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%) } .ipsSelectTree_nodes [data-role="nodeList"]{ background:#333; } .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{ background:#6d6d6d; } /* gallery lightbox */ .cGalleryLightbox_info { background:#333; } .ipsType_light { color:#dedede; } .cGalleryChooseAlbum_listItem { background:#6d6d6d; } /* messaging */ .ipsDialog > div, .ipsAutocompleteMenu { background:#333; } .ipsAutocompleteMenu_item[data-selected] { background:#6d6d6d; } .cMessage_active.ipsDataItem_selected{ background:#555!important; } .ipsComment{ background:#333; } .ipsComment:not( .ipsModerated ) .ipsComment_header{ background:#555; } .ipsDialog_title { color:#ffffffd4; } /* profile page */ #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img { max-width:160px; } .ipsPad_half.cProfileRepScore{ background:#598f5b; } /* reply box */ .ipsComposeArea_dummy { background:#9a9a9a; color:#222; } .cke_top { background:#c1c1c1; } .ipsAreaBackground_light { background:#686868; } .cke_wysiwyg_frame, .cke_wysiwyg_div { background-color:#555; } .ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half{ color:#fff; } a[data-mentionid]{background:#e91e63} #elLogo img{display:none;} #elLogo::before{ height:60px; width:100%; content:''; position:absolute; background:url(https://palms.org/wp-content/themes/palms/images/logo.png); background-repeat:no-repeat; } #elLogo::after{ content:'"Palm Talk"'; height:20px; width:auto; position:absolute; color:#ffc90e; transform:rotate(-29deg); left:367px; font-size:18px; top:20px; } .ipsType_sectionHead.cAuthorPane_author{ color:#ffffffd4; } .ipsAlert{ background:#555; } .ipsAlert i{ color:#f44336; } /* widgets */ .ipsWidget .ipsCalendarDate{ background:#9e9e9e; } .ipsSideMenu_item:not( .ipsSideMenu_itemActive ) a:hover, a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover, span.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover{ background-color:#888; } #elSearch{ background:#9c9c9c; } #elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{ background:#555; } #elSearchExpanded .ipsMenu_title{ background:#b9b9b9; } .cSearchSubmit .fa.fa-search{ color:#333; } /* Custom styles. Add custom styles below this line */ There is a java android port, which might be useful, since the website is programmed in Javascript. Quote Nothing to say here. Link to comment Share on other sites More sharing options...
Steve Mac Posted May 12, 2021 Report Share Posted May 12, 2021 You guys are just so clever and educated, (I envy you), unfortunately although I love Dark Theme , I will need to wait for the button (with that code beneath it). 1 Quote Cheers Steve It is not dead, it is just senescence. Link to comment Share on other sites More sharing options...
floridaPalmMan Posted August 22, 2022 Author Report Share Posted August 22, 2022 Small update after the site upgrade for those interested: Line #12 Was this: #ipsLayout_header header, .ipsUserPhoto { background-color:#333; } Needs to be updated to this: #ipsLayout_header header, #ipsLayout_header nav, .ipsUserPhoto { background-color:#333; } Stylish unfortunately is in the middle of an upgrade and their editor cannot be used temporarily but as soon as its working again I'll post an update. I'm sure I'll notice a few more changes to be made while browsing the site. Again, any suggestions are welcome. Quote Link to comment Share on other sites More sharing options...
PALM MOD Posted August 22, 2022 Report Share Posted August 22, 2022 Just seeing this for the first time - don't know why. Always nice to have some tech people around. I don't know if there would be a way to integrate it into the site theme options, or browser settings - but I don't think the IPS would go for it anyway until and unless its was also available on their Main Site. One of the attempts of the IPS for many years was to get PalmTalk to look the same as their Main Site - so, unless it too had a dark theme (that would switch at the same time), I don't think they would go for it. But it's good to know who the techies are - if I ever need you. Quote Thanks to those of you who help make this a fun and friendly forum. Link to comment Share on other sites More sharing options...
floridaPalmMan Posted August 22, 2022 Author Report Share Posted August 22, 2022 3 hours ago, PALM MOD said: Just seeing this for the first time - don't know why. Always nice to have some tech people around. I don't know if there would be a way to integrate it into the site theme options, or browser settings - but I don't think the IPS would go for it anyway until and unless its was also available on their Main Site. One of the attempts of the IPS for many years was to get PalmTalk to look the same as their Main Site - so, unless it too had a dark theme (that would switch at the same time), I don't think they would go for it. But it's good to know who the techies are - if I ever need you. Yea I understand brand consistency across sites is important. If they decide a dark theme is within brand at some point I can definitely help out and provide the color palette in this theme as well as help implement it. 2 Quote Link to comment Share on other sites More sharing options...
PALM MOD Posted August 22, 2022 Report Share Posted August 22, 2022 59 minutes ago, floridaPalmMan said: If they decide a dark theme is within brand at some point I can definitely help out and provide the color palette in this theme as well as help implement it. 👍 Quote Thanks to those of you who help make this a fun and friendly forum. Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.