Night Mode Theme

[Day_]

Need any help? Fire away, I’ll do my best.

[Dean_]

Deleted old theme from other topic, and market place. Cleared cache, reuploaded the one uploaded 2 hours ago. Dark mode editor now works for me, but some of the text, highlighting and links are currently washed out or not seen.

White box as highlight and date in events was there but isn't on this new version v1.0.0

[Day_]

11 minutes ago, Dean_ said:

Deleted old theme from other topic, and market place. Cleared cache, reuploaded the one uploaded 2 hours ago. Dark mode editor now works for me, but some of the text, highlighting and links are currently washed out or not seen.

White box as highlight and date in events was there but isn't on this new version v1.0.0

Can you PM me a link to the page please and I will take a look

[Subdreamer]

Interesting. Thank you for contributing to the community! I'll check it out and report back later. Adios!

[Day_]

@Guru84 I'm guessing you are using Internet Explorer? Apologies I forgot to package the new editor theme files for the outdated browser. 

If you redownload the theme, you only need to reupload the editor theme files. This should fix it for you. 🙂 

[Guru84]

Thank you sir! It sure did. Greatly appreciated! Thank you for making this. My members greatly appreciate it.

[403 - Forbiddeen]

How can i install the CKEditor Theme?

 

Edit: I figure out.

Edited May 23, 2019 by 403 - Forbideen

[Bluto]

Any updates for 4.4.5?

[Day_]

Just now, Bluto said:

Any updates for 4.4.5?

As the theme contains no template edits, they should all automatically be updated unless you have customised them yourself.

If there is anything that looks wonky let me know and I'll take a look, running the same theme on my site not seen anything come up yet myself.

[Bluto]

Sounds good.

[Bluto]

In clubs -> members the background is white for each member.  The mods I made are below, but you might want to change to match your theme better.

/* Clubs */
#elClubControls .ipsTabs {background: #0a0b0d;}

.ipsMemberCard {background: #121418; border: 1px solid #0a0b0d;}

.cClubMemberStatus {background: #0a0b0d;}

 

[Bluto]

This one will adjust the background of the member list but not the leaders and moderators box (can't figure how to change that background because they are using generic classes).

/* Clubs */
#elClubControls .ipsTabs {background: #0a0b0d;}
.ipsMemberCard {background: #0a0b0d; border: 1px solid #121418;}
.cClubMemberStatus {background: #0a0b0d;}
[data-controller="core.front.clubs.requests"] > .ipsAreaBackground {background: none;}

 

Edited August 31, 2019 by Bluto

[Day_]

Thanks @Bluto, appreciate it, will update the theme with this

[Bluto]

For some reason IPS is putting the style outside of a class for ipsRichEmbed which is using a black stroke around the embed which you can hardly see.

<div class="ipsRichEmbed" style="max-width:500px;border:1px solid rgba(0,0,0,.1);">

I wasn't sure which color to use to stroke, maybe there is a better color to use than #333?

/* Embed */
.ipsRichEmbed {border:1px solid #333 !important};

 

Edited September 3, 2019 by Bluto

[Bluto]

Reddit embeds looked horrible (nasty white border and heading text was black).

The CSS for the embed isn't available, so the only thing I could do was make the iframe background white.  Once I did that it looked normal.

/* Embed Reddit Specific */
iframe[data-embedid] { background-color: #fcfcfc !important;}

EDIT

PLEASE NOTE:  This didn't really work too well.  You might want to play around with this before production use.

Edited September 11, 2019 by Bluto

[Bluto]

Clubs icon has a white border which doesn't look too good.

/* Club Icon Border */
.cClubIcon {border: 2px solid #191b21 !important;}

or if you like it darker:

/* Club Icon Border */
.cClubIcon {border: 2px solid #0a0b0d !important;}

 

[Bluto]

Gallery pop-up selection box.  Box that pops-up when you want to add an image.

/* Gallery Popup Selection Box */
.cGalleryChooseAlbum_listItem {
	background: #191b21;
	border: 1px solid #0e0f12;
}
.cGalleryChooseAlbum_listItem:not([data-disabled]):hover {
	border-color: (add you own color here this is the border when you hover a selection);
}

 

Edited September 13, 2019 by Bluto

[Bluto]

Add to buttons.  Buttons in Gallery have basically a white outline.

/* Buttons */
.elGalleryImage .ipsButton.ipsButton_link {border: 1px solid #191b21 !important;}

 

[Bluto]

Thumbnails in my video section had a horrible white line around them.  I'm assuming this is site-wide since the class is ipsThumb.

/* Thumbnail */
.ipsThumb {border: 1px solid #191b21 !important;}

 

[AlexJ]

How did you fix the editor issue? My editor is all white and fonts are white as well.. 

[Bluto]

Look in the theme zip file you downloaded, you'll see the theme and an editor zip file.  Go into themes -> night mode -> editors tab and upload the zip file.  That will provide the skins for the editor.

[Bluto]

If you want to change the badge colors.

/* IPS Badge Color */
.ipsBadge_positive {background: your color here};

 

[AlexJ]

@Bluto @day_ - how to fix this button? Any corresponding option for it? 

[Bluto]

I don't have the download app running currently, so I can't look at the page.

[Day_]

On 9/16/2019 at 9:46 PM, AlexJ said:

@Bluto @day_ - how to fix this button? Any corresponding option for it? 

You can change the button colours in the theme > edit > button colours