floridaPalmMan 49 Report post Posted February 12 (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 by floridaPalmMan 2 2 Quote Share this post Link to post Share on other sites
RedRabbit 1,622 Report post Posted February 25 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 Quote Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted February 26 (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 by floridaPalmMan 1 Quote Share this post Link to post Share on other sites
RedRabbit 1,622 Report post Posted February 27 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 Share this post Link to post Share on other sites
JLM 534 Report post Posted March 1 Stunning! Great work! 1 Quote Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted March 1 Can you remove it too? Quote Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted Tuesday at 02:54 PM 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 Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Tuesday at 04:37 PM I wonder if you can photoshop the ips logo now. Quote Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted Tuesday at 05:08 PM 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. Quote Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted Tuesday at 08:45 PM (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 Tuesday at 08:58 PM by floridaPalmMan 1 Quote Share this post Link to post Share on other sites
JLM 534 Report post Posted Tuesday at 09:02 PM 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 Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted Tuesday at 09:26 PM (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 Tuesday at 09:33 PM by floridaPalmMan Quote Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted Tuesday at 09:31 PM (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 Tuesday at 09:36 PM by floridaPalmMan Quote Share this post Link to post Share on other sites
JLM 534 Report post Posted Tuesday at 09:40 PM Hot pink looks good! Ill put that in. Thanks!! 1 Quote Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 03:58 AM Can you also make the searchbar green? Quote Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted Wednesday at 04:15 AM (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 Wednesday at 04:17 AM by floridaPalmMan Quote Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 04:16 AM 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 Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 04:17 AM I made a prototype of the PalmTalk logo in the Ips logo: 1 Quote Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted Wednesday at 04:25 AM 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 Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 03:58 PM 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 Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 05:37 PM 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 Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 05:40 PM (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 Wednesday at 05:44 PM by EastCanadaTropicals Quote Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted Wednesday at 08:26 PM 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 Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 08:35 PM 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. Quote Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 08:38 PM 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 Share this post Link to post Share on other sites
floridaPalmMan 49 Report post Posted Wednesday at 08:44 PM (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 Wednesday at 08:45 PM by floridaPalmMan Quote Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 08:45 PM 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 Share this post Link to post Share on other sites
EastCanadaTropicals 96 Report post Posted Wednesday at 08:57 PM 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 Share this post Link to post Share on other sites