Jump to content
IMPORTANT ANNOUNCEMENT ABOUT LOGGING IN ×
  • WELCOME GUEST

    It looks as if you are viewing PalmTalk as an unregistered Guest.

    Please consider registering so as to take better advantage of our vast knowledge base and friendly community.  By registering you will gain access to many features - among them are our powerful Search feature, the ability to Private Message other Users, and be able to post and/or answer questions from all over the world. It is completely free, no “catches,” and you will have complete control over how you wish to use this site.

    PalmTalk is sponsored by the International Palm Society. - an organization dedicated to learning everything about and enjoying palm trees (and their companion plants) while conserving endangered palm species and habitat worldwide. Please take the time to know us all better and register.

    guest Renda04.jpg

PalmTalk Dark Theme


floridaPalmMan

Recommended Posts

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 7
  • Upvote 2
Link to comment
Share on other sites

  • 2 weeks later...

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. 

  • Like 1
  • Upvote 1

Westchase | 9b 10a  ◆  Nokomis | 10a  ◆  St. Petersburg | 10a 10b 

Link to comment
Share on other sites

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 3
Link to comment
Share on other sites

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

Westchase | 9b 10a  ◆  Nokomis | 10a  ◆  St. Petersburg | 10a 10b 

Link to comment
Share on other sites

Stunning! Great work!

  • Like 1

Palms - 4 S. romanzoffiana, 1 W. bifurcata, 2 W. robusta, 1 R. rivularis, 1 B. odorata, 1 B. nobilis, 2 S. palmetto, 1 A. merillii, 1 P. canariensis, 1 BxJ, 1 BxJxBxS, 1 BxS, 3 P. roebelenii, 1 H. lagenicaulis, 1 H. verschaffeltii, 9 T. fortunei, 1 C. humilis, 2 C. macrocarpa, 1 L. chinensis, 1 R. excelsa

Link to comment
Share on other sites

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
Link to comment
Share on other sites

I wonder if you can photoshop the ips logo now.

Nothing to say here. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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

Palms - 4 S. romanzoffiana, 1 W. bifurcata, 2 W. robusta, 1 R. rivularis, 1 B. odorata, 1 B. nobilis, 2 S. palmetto, 1 A. merillii, 1 P. canariensis, 1 BxJ, 1 BxJxBxS, 1 BxS, 3 P. roebelenii, 1 H. lagenicaulis, 1 H. verschaffeltii, 9 T. fortunei, 1 C. humilis, 2 C. macrocarpa, 1 L. chinensis, 1 R. excelsa

Link to comment
Share on other sites

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
  • Like 2
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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

  • Like 1

Palms - 4 S. romanzoffiana, 1 W. bifurcata, 2 W. robusta, 1 R. rivularis, 1 B. odorata, 1 B. nobilis, 2 S. palmetto, 1 A. merillii, 1 P. canariensis, 1 BxJ, 1 BxJxBxS, 1 BxS, 3 P. roebelenii, 1 H. lagenicaulis, 1 H. verschaffeltii, 9 T. fortunei, 1 C. humilis, 2 C. macrocarpa, 1 L. chinensis, 1 R. excelsa

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Nothing to say here. 

Link to comment
Share on other sites

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

palmtalk forums prototype.png

  • Like 1

Nothing to say here. 

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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. 

Nothing to say here. 

Link to comment
Share on other sites

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?

Nothing to say here. 

Link to comment
Share on other sites

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

Nothing to say here. 

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

  • Like 1

Nothing to say here. 

Link to comment
Share on other sites

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.  

Nothing to say here. 

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Nothing to say here. 

Link to comment
Share on other sites

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.

Nothing to say here. 

Link to comment
Share on other sites

  • 2 months later...

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). :lol2:

  • Like 1

Cheers Steve

It is not dead, it is just senescence.

   

 

 

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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. :)

Thanks to those of you who help make this a fun and friendly forum.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

👍

Thanks to those of you who help make this a fun and friendly forum.

Link to comment
Share on other sites

  • 11 months later...

The new palmtalk update has changed a few things in the dark theme.

I will have the updated code shortly.

  • Upvote 1
Link to comment
Share on other sites

  • 3 months later...

Had to find it, but this was a shot i took after trying one of the dark theme options from the web at the time..   Admittedly, i should have taken more shots of the overall look, as it was applied to PT.

DSC00101.thumb.JPG.151d3f4ffc307f5fb155a5b8115f6106.JPG

Only thing  i didn't like about it was when i went back to " regular / daylight " screen. my posts would be blacked out / letters hard to see against the standard white background..

  If i were putting together my own site, i'd use a similar background ..but trouble shoot / have someone trouble shoot, sine i'm not much of a tech guru, lol  the part of it i did not like ( ..and wasn't aware of until someone pointed it out, lol )
 

Link to comment
Share on other sites

  • 3 months later...

Ok this theme was added to the "Stylish" online library so you no longer have to maintain your own css code.

It should be available when you install the extension in the "Gallery" section.

It should look something like this. You can still override my styling in the "My Styles" section and customize the site to your own liking.

All updates I make from here on out will be through the online "Gallery" version so no more pasting code into this thread. So as long as you keep the Gallery version active, you will receive the updates automatically.

image.png.8792721b43ac2b2c2c9d15434e43ea9c.png

Link to comment
Share on other sites

Also, the right side menu dropdowns now work with the new site.

If you're still maintaining the code yourself, I've pasted the code block that was causing the issue. The specific line was the "width: 100%". If you replace the 100% with 433px, it fixes the issue.

Or just replace the entire block for simplicity.

#elLogo::before{
    height:60px;
    width:433px;
    content:'';
    position:absolute;
    background:url(https://palms.org/wp-content/themes/palms/images/logo.png);
    background-repeat:no-repeat;
}

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now



  • Recently Browsing

    • No registered users viewing this page.
×
×
  • Create New...