FM Dark ( Support Topic )

[TheJackal84]

This is the support topic for FM Dark

 

[TheJackal84]

Updated to 1.0.1

New Features

Colour Picker

• Allow members to pick a main colour to use for the site from a choice of 16 different colours
• Admins can choose what colours to use with a option to revert them to their default values

Members Profile

• Choose to use a advanced about user block on the members profile
• Choose to add a members group box
  • This will show a list of the members usergroups as either images ( If uploaded in the groups settings ) or just the user group names ( if no image is uploaded in the groups settings )

[Gabriel Torres]

@TheJackal84 I bought your theme and I am loving it. There is one biggie here that needs your attention. The editor toolbar is still grey, and I think it should be in a dark color:

Could you fix that for us?

Thanks.

[bosss]

4 hours ago, Gabriel Torres said:

@TheJackal84 I bought your theme and I am loving it. There is one biggie here that needs your attention. The editor toolbar is still grey, and I think it should be in a dark color:

Could you fix that for us?

Thanks.

Add this to your custom.css file

.ipsApp .cke_top {
    background-color: #000 !important;
}

Change color what your want.

[Gabriel Torres]

@bosss I really appreciate your help, however, this only solves part of the problem. See below.

[Gabriel Torres]

@TheJackal84 another issue we have is the color of the flash notification. It is usually white, as below:

However, when there are more than one notification, the color changes to gray. I really can't find the class to change this to white, as our users are saying white is better (and it is also a matter of consistency):

[Gabriel Torres]

@TheJackal84 Another issue here, in the user's activity stream, when we have a topic that was hidden, the layout gets broken.

[Gabriel Torres]

17 hours ago, Gabriel Torres said:

@TheJackal84 Another issue here, in the user's activity stream, when we have a topic that was hidden, the layout gets broken.

To fix this:

core > front > custom > fmdark.css

/* Activity stream overview */
#elProfileActivityOverview .ipsStreamItem, #elUserContent .ipsStreamItem, #elSingleStatusUpdate .ipsStreamItem {

Change:

margin: 0;

To:

margin: 0 13px 0 13px;

 

Edited October 15, 2020 by Gabriel Torres

[Gabriel Torres]

core > custom > fmdark.css

change

.ipsTabs_activeItem {
	color: #fff;
}

to:

.ipsTabs_activeItem {
	color: #fff !important;
}

Add this to custom.css:

/* Logo */
#elLogo {
  z-index: 2001;
}

/* Breadcrumb */
.ipsBreadcrumb {
	color: inherit;
}

/* Mentions */
a[data-mentionid] {
  color: #000;
}
a[data-mentionid]:hover {
 color: rgb(var(--theme-text_color));
}

 

[bosss]

18 minutes ago, Gabriel Torres said:

core > custom > fmdark.css

change

.ipsTabs_activeItem {
	color: #fff;
}

to:

.ipsTabs_activeItem {
	color: #fff !important;
}

Add this to custom.css:

/* Logo */
#elLogo {
  z-index: 2001;
}

/* Breadcrumb */
.ipsBreadcrumb {
	color: inherit;
}

/* Mentions */
a[data-mentionid] {
  color: #000;
}
a[data-mentionid]:hover {
 color: rgb(var(--theme-text_color));
}

 

What made those changes? have you some screenshoot?

 

[Gabriel Torres]

20 hours ago, bosss said:

What made those changes? have you some screenshoot?

/* Logo */ = without this, only the upper half of your logo will be clickable

/* Breadcrumb */ = without this, the breadcrumb is hard to read

/* Mentions */ = without this, mentions are hard to read

[Gabriel Torres]

More fixes:

Templates:

core > front > global > fmDarkCustomCSS

Add:

.ipsTabs_activeItem {
    background: {$colour} !important;
}

core > global > global > fmDarkJSBG

Add to the logic:

.ipsTabs_activeItem { background:' + colour + ' !important; }

CSS:

core > front > custom > fmdark.css

REMOVE one intance of the code below because it is duplicated:

.ipsTabs_activeItem {
	color: #fff !important;
}

 

[bosss]

4 hours ago, Gabriel Torres said:

core > global > global > fmDarkJSBG

Add to the logic:

.ipsTabs_activeItem { background:' + colour + ' !important; }

Can you explain more - what is "logic"? you mean "var styles"?

 

i just made

.ipsTabs_activeItem { background:' + colour + ' !important; }';     put only ! important
       

Edited October 23, 2020 by bosss

[Gabriel Torres]

@bosss that is correct.

Another two bugs that I've just fixed.

Without this, the notifications layout breaks on mobile devices.

CSS

core > front > custom > fmdark.css

Remove the width.

Before:

.ipsMenu_innerContent {
    max-height: 350px;
    overflow: auto;
    width: 450px;
}

After:

.ipsMenu_innerContent {
    max-height: 350px;
    overflow: auto;
}

And without the !important applied to #elFlashMessage, flashmessages ("inline notifications") for reports are always with the default blue background instead of using the color the user selected in the color picker.

Templates

core > front > global > fmDarkCustomCSS

#elFlashMessage {
	background: {$colour} !important;
}

core > global > global > fmDarkJSBG

#elFlashMessage { background:' + colour + ' !important; } 

 

Edited October 23, 2020 by Gabriel Torres