Jump to content
floridaPalmMan

PalmTalk Dark Theme

Recommended Posts

floridaPalmMan

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.

pt-dark-desktop1.thumb.png.3717398170c90e22a230d1cbf2dcd2a0.png

pt-topic-desktop2.thumb.png.6f336f026fdc6febcf7a7dbd8841996f.png

tp-discussion-quote-desktop3.thumb.png.565dfd4cabcff5536f3038d8550a381e.png

tp-discussion-reply4.thumb.png.b23ca107d9ecaa65efbd55a9e102ee9d.png

profile-desktop5.thumb.png.5ff230783cd183343bf6fdf3f7d6e9ac.png

pt-ipad1.png.d2e3f5aa61ac7567a014389896b580f1.pngpt-ipad2.png.9fc71751655661109c5ba2dd403ea809.pngpt-ipad3.png.d2a4ddb055f6c65b7c1501bf0d994f72.pngpt-menu-ipad4.png.eb9c370602e2a987c1a247af32e3669f.png

_____________________________________________________________________________________________________

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 by floridaPalmMan
  • Like 2
  • Upvote 2

Share this post


Link to post
Share on other sites
RedRabbit

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. 

  • Upvote 1

Share this post


Link to post
Share on other sites
floridaPalmMan
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...

url-limit.thumb.png.827b4efcde579ee90fbd71543db09059.png

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 by floridaPalmMan
  • Like 1

Share this post


Link to post
Share on other sites
RedRabbit
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...

url-limit.thumb.png.827b4efcde579ee90fbd71543db09059.png

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!

  • Upvote 1

Share this post


Link to post
Share on other sites
JLM

Stunning! Great work!

  • Like 1

Share this post


Link to post
Share on other sites
EastCanadaTropicals

Can you remove it too?

Share this post


Link to post
Share on other sites
floridaPalmMan
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.

stylish.png.e5bed8ac68f59d8cc3dea825eb36256f.png

 

  • Like 1

Share this post


Link to post
Share on other sites
EastCanadaTropicals

I wonder if you can photoshop the ips logo now.

Share this post


Link to post
Share on other sites
floridaPalmMan
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.

Share this post


Link to post
Share on other sites
floridaPalmMan
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;
}
 

palmtalk-logo-update.thumb.png.7aa1531d69db90bd1cb6310f617ad6ef.png

 

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 by floridaPalmMan
  • Like 1

Share this post


Link to post
Share on other sites
JLM

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!

  • Like 1

Share this post


Link to post
Share on other sites
floridaPalmMan
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) ?

hot-pink-name.png.8eaf9044caf5e4ccb45aaf5624b08c95.png

or burnt orange (#ff9800) ?

burnt-orange-name.png.16bc1359ff3a1bf83b57f93300f65491.png

or lime green (#8bc34a) ?

green-name.png.e5ce5d913096f3cc5f86c6f788fae801.png

here's a nice diluted white/gray (#ffffffd4) which is the same color as the regular text.

diluted-white-name.png.0264fd12c48726636528580ee4622136.png

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 by floridaPalmMan

Share this post


Link to post
Share on other sites
floridaPalmMan

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

white-name.png.8a26057c602d55750a1c102e3218f458.png

 

alert box update

alert-box.png.87f1eea629a00fd9ef5d7f36799376b7.png

 

Edited by floridaPalmMan

Share this post


Link to post
Share on other sites
JLM

Hot pink looks good! Ill put that in. Thanks!!

  • Like 1

Share this post


Link to post
Share on other sites
EastCanadaTropicals

Can you also make the searchbar green?

Share this post


Link to post
Share on other sites
floridaPalmMan
18 minutes ago, EastCanadaTropicals said:

Can you also make the searchbar green?

like this?

1009999123_2021-03-0223_07_28-PalmTalkDarkTheme-ADMINISTRATION-PalmTalk-Brave.png.b82a6e615fbfabd6efa195a55bd3b8ab.png

 

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.

328316756_2021-03-0223_09_16-Forums-PalmTalk-Brave.png.fef8aec994bfc3abf5c74a3d4d0f5b57.png

 

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 by floridaPalmMan

Share this post


Link to post
Share on other sites
EastCanadaTropicals
1 minute ago, floridaPalmMan said:

like this?

1009999123_2021-03-0223_07_28-PalmTalkDarkTheme-ADMINISTRATION-PalmTalk-Brave.png.b82a6e615fbfabd6efa195a55bd3b8ab.png

 

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.

328316756_2021-03-0223_09_16-Forums-PalmTalk-Brave.png.fef8aec994bfc3abf5c74a3d4d0f5b57.png

 

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.

Share this post


Link to post
Share on other sites
EastCanadaTropicals

I made a prototype of the PalmTalk logo in the Ips logo:

palmtalk forums prototype.png

  • Like 1

Share this post


Link to post
Share on other sites
floridaPalmMan
7 minutes ago, EastCanadaTropicals said:

I made a prototype of the PalmTalk logo in the Ips logo:

palmtalk forums prototype.png

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

  • Like 1

Share this post


Link to post
Share on other sites
EastCanadaTropicals
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. 

Share this post


Link to post
Share on other sites
EastCanadaTropicals
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?

Share this post


Link to post
Share on other sites
EastCanadaTropicals
13 hours ago, floridaPalmMan said:

like this?

1009999123_2021-03-0223_07_28-PalmTalkDarkTheme-ADMINISTRATION-PalmTalk-Brave.png.b82a6e615fbfabd6efa195a55bd3b8ab.png

 

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.

328316756_2021-03-0223_09_16-Forums-PalmTalk-Brave.png.fef8aec994bfc3abf5c74a3d4d0f5b57.png

 

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:

 

palmtalk forums prototype.gif

Edited by EastCanadaTropicals

Share this post


Link to post
Share on other sites
floridaPalmMan
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;
}

palmtalk-logo-update1.thumb.png.b80f6891b757e69d4bd29e21ac8b9d83.png

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.

  • Like 1

Share this post


Link to post
Share on other sites
EastCanadaTropicals
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;
}

palmtalk-logo-update1.thumb.png.b80f6891b757e69d4bd29e21ac8b9d83.png

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.

Share this post


Link to post
Share on other sites
EastCanadaTropicals
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.

pt-dark-desktop1.thumb.png.3717398170c90e22a230d1cbf2dcd2a0.png

pt-topic-desktop2.thumb.png.6f336f026fdc6febcf7a7dbd8841996f.png

tp-discussion-quote-desktop3.thumb.png.565dfd4cabcff5536f3038d8550a381e.png

tp-discussion-reply4.thumb.png.b23ca107d9ecaa65efbd55a9e102ee9d.png

profile-desktop5.thumb.png.5ff230783cd183343bf6fdf3f7d6e9ac.png

pt-ipad1.png.d2e3f5aa61ac7567a014389896b580f1.pngpt-ipad2.png.9fc71751655661109c5ba2dd403ea809.pngpt-ipad3.png.d2a4ddb055f6c65b7c1501bf0d994f72.pngpt-menu-ipad4.png.eb9c370602e2a987c1a247af32e3669f.png

_____________________________________________________________________________________________________

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.  

Share this post


Link to post
Share on other sites
floridaPalmMan
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 by floridaPalmMan

Share this post


Link to post
Share on other sites
EastCanadaTropicals
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.

Share this post


Link to post
Share on other sites
EastCanadaTropicals
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...