Flexile Dark 1.1.5.1

[eng]

Updated for XenForo 1.1.3

I just updated (using the child of Flexile .xml file) and the following templates show as outdated:

Flexile Dark
    xenforo_sections.css Custom Version: , Master Version: 1.1.2
    form.css Custom Version: , Master Version: 1.1.3
    discussion_list.css Custom Version: , Master Version: 1.1.2
    attached_files.css Custom Version: , Master Version: 1.1.3

Is this expected?

 

[wdb]

Does anyone know how to overcome black/grey text being used on a black background. I think it's mainly when people copy and paste from another source

We've been having the same problem, it's a bit of a hack but we fixed it with a bit of JavaScript inserted in the footer template of the dark stlye, this is the code we use:

<script type="text/javascript">
    // Lighten dark text (wdb)
    $('.messageContent span').each(function(j) {
        var textcol = this.style.color;
        var rgb = textcol.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        var lum = 0.3*parseInt(rgb[1]) + 0.59*parseInt(rgb[2]) + 0.11*parseInt(rgb[3]);
        if (lum<155){
            var r=Math.round(parseInt(rgb[1])/2.55+155);
            var g=Math.round(parseInt(rgb[2])/2.55+155);
            var b=Math.round(parseInt(rgb[3])/2.55+155);
            var newcol = 'rgb(' + r + ',' + g + ',' + b + ')';
            this.style.color = newcol;
        }
    });
</script>

 

[Erik]

I just updated (using the child of Flexile .xml file) and the following templates show as outdated:

Flexile Dark
    xenforo_sections.css Custom Version: , Master Version: 1.1.2
    form.css Custom Version: , Master Version: 1.1.3
    discussion_list.css Custom Version: , Master Version: 1.1.2
    attached_files.css Custom Version: , Master Version: 1.1.3

Is this expected?

I've noticed this on my installation as well and have been trying to confirm the source of the problem. I believe it's a bug that occurs when editing with WebDAV (this was the first time I had done so).

All of the templates are definitely updated. If the message bugs you, you can click on each template once and add a space at the end of the file or something, and then save. It should then no longer be marked as outdated.

 

[Lone Wolf]

We've been having the same problem, it's a bit of a hack but we fixed it with a bit of JavaScript inserted in the footer template of the dark stlye, this is the code we use:

<script type="text/javascript">
    // Lighten dark text (wdb)
    $('.messageContent span').each(function(j) {
        var textcol = this.style.color;
        var rgb = textcol.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        var lum = 0.3*parseInt(rgb[1]) + 0.59*parseInt(rgb[2]) + 0.11*parseInt(rgb[3]);
        if (lum<155){
            var r=Math.round(parseInt(rgb[1])/2.55+155);
            var g=Math.round(parseInt(rgb[2])/2.55+155);
            var b=Math.round(parseInt(rgb[3])/2.55+155);
            var newcol = 'rgb(' + r + ',' + g + ',' + b + ')';
            this.style.color = newcol;
        }
    });
</script>

Thanks for this

 

[Lone Wolf]

@erik

Have you seen this by wdb, is it something that could be added to flexile dark as default? If it works as advertised then it will be a relief for all users of flexile dark.

We've been having the same problem, it's a bit of a hack but we fixed it with a bit of JavaScript inserted in the footer template of the dark stlye, this is the code we use:

<script type="text/javascript">
    // Lighten dark text (wdb)
    $('.messageContent span').each(function(j) {
        var textcol = this.style.color;
        var rgb = textcol.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        var lum = 0.3*parseInt(rgb[1]) + 0.59*parseInt(rgb[2]) + 0.11*parseInt(rgb[3]);
        if (lum<155){
            var r=Math.round(parseInt(rgb[1])/2.55+155);
            var g=Math.round(parseInt(rgb[2])/2.55+155);
            var b=Math.round(parseInt(rgb[3])/2.55+155);
            var newcol = 'rgb(' + r + ',' + g + ',' + b + ')';
            this.style.color = newcol;
        }
    });
</script>

 

[trilogy33]

We've been having the same problem, it's a bit of a hack but we fixed it with a bit of JavaScript inserted in the footer template of the dark stlye, this is the code we use:

I've quickly tested this on a localhost installation, adding the code to the bottom of the footer template of Flexile Dark.
Copying and pasting a chunk of text from a webpage - this page actually: http://www.computerhope.com/jargon/l/lol.htm
Using Chrome here for best effect - it's probably me but, I can't seem to see the fix in the darker style as opposed to the lighter style.

 

[wdb]

I've quickly tested this on a localhost installation, adding the code to the bottom of the footer template of Flexile Dark.
Copying and pasting a chunk of text from a webpage - this page actually: http://www.computerhope.com/jargon/l/lol.htm
Using Chrome here for best effect - it's probably me but, I can't seem to see the fix in the darker style as opposed to the lighter style.

View attachment 30958

try this code, it works for me with text copied from that website, you might need to refresh the page after first posing the text.

<script type="text/javascript">
    // Lighten dark text (wdb)
    $('.messageContent span').each(function(j) {
        var textcol = this.style.color;
        if (textcol) {
            var rgb = textcol.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
            var lum = 0.3*parseInt(rgb[1]) + 0.59*parseInt(rgb[2]) + 0.11*parseInt(rgb[3]);
            if (lum<170){
                var r=Math.round(parseInt(rgb[1])/2+127.5);
                var g=Math.round(parseInt(rgb[2])/2+127.5);
                var b=Math.round(parseInt(rgb[3])/2+127.5);
                this.style.color = 'rgb(' + r + ',' + g + ',' + b + ')';
            }
        }
    });
</script>

 

[trilogy33]

try this code, it works for me with text copied from that website, you might need to refresh the page after first posing the text.

Confirmed working.
When using the quick reply box, a page refresh is needed to allow the template to show the changes, but...wow! That's solved that one.
Great job Sir.

EDIT:
Screenshot added.

 

[Erik]

I am reluctant to include such a "hack" because the root cause of the problem is the fact that the WYSIWYG editor is keeping the color formatting for pasted text... it's inelegant and need to be fixed at the core XenForo level.

If I am interpreting it correctly, what the code above does is lighten the text on each page load if it's within a tolerance of the dark background color of the page.

If I was going to implement a solution like this I would rather put it into the editor JS such that the same check is performed but at the point that the text is pasted into the editor. If it passes, the editor would then strip the color formatting from the text rather than simply re-coloring it. This seems like the most elegant solution that still retains the ability to paste in colored text (red text, for example).

I'll look into it.

 

[maxwolfie]

How exactly do we upgrade from the previous version of Flexile Dark to the new one? I've never updated a style before.

 

[Erik]

How exactly do we upgrade from the previous version of Flexile Dark to the new one? I've never updated a style before.

Import the new style XML file and choose to overwrite the existing Flexile (Dark) style. Be aware the this will reset any custom modifications you have made to the style. You will need to re-do the modifications, unless they were made in a child style, in which case you can simply overwrite the "base" Flexile.

 

[maxwolfie]

I've just installed 1.1.3 and I'm having an issue where the red gradient is not showing under the navigation items, it seems to be set up correctly in the options though?

I also have a weird problem where the top <user> , Inbox, Alerts, Logout strip is replicated near the content area?

See the attached screenshot for an idea of both.

http://www.hackslashrepeat.com/

 

[maxwolfie]

Update: Ok, I loaded my OLD 1.1.2 Navigation template and just added the following line:

<li><a href="{xen:link help/cookies}">{xen:phrase cookie_usage}</a></li>

Seems to be working fine now..

P.S. - Is the above code the only difference between the old navigation template and the new one? If not, will I cause any issues to have the old one with just the above code? It seems to be working okay.

 

[SoManyPosts]

How can I make the editor have a dark theme?
http://puu.sh/G7JW

 

[Erik]

How can I make the editor have a dark theme?
http://puu.sh/G7JW

It's possible, but difficult, as the editor's stylesheets are handled separately from the rest of XenForo's CSS. You would have to make the required CSS changes and then also replace all of the editor icons, as black icons on a dark background aren't going to work so well.

 

[Erik]

Update: Ok, I loaded my OLD 1.1.2 Navigation template and just added the following line:

<li><a href="{xen:link help/cookies}">{xen:phrase cookie_usage}</a></li>

Seems to be working fine now..

P.S. - Is the above code the only difference between the old navigation template and the new one? If not, will I cause any issues to have the old one with just the above code? It seems to be working okay.

Yes, this is the only change made between the 1.1.2 version and 1.1.3.

 

[SoManyPosts]

It's possible, but difficult, as the editor's stylesheets are handled separately from the rest of XenForo's CSS. You would have to make the required CSS changes and then also replace all of the editor icons, as black icons on a dark background aren't going to work so well.

Yeah I see, hmm. It would be cool if you could add that to an update one of these days

 

[SoManyPosts]

What colors do you use for these buttons, the outline and background etc?

Trying to make the reply edit buttons like those.

http://puu.sh/G9eK

 

[Erik]

Get Google Chrome or Firefox with the Firebug extension, then right-click on them and pick "Inspect Element." You will then be able to see the CSS that applies to the element you have selected.

 

[SoManyPosts]

Get Google Chrome or Firefox with the Firebug extension, then right-click on them and pick "Inspect Element." You will then be able to see the CSS that applies to the element you have selected.

Oh alright thanks!