[AP] Style Suite

[AP] Style Suite [Paid] 2.16.8

No permission to buy (€15.00)
Overview Updates (111) Reviews (12) History Discussion
Guys updating Standard Library from 1.21.10 to 1.21.11 solved the issue.
XF Didn't notify me it was outdated so I didn't know.

That script now looks like this:
Code: 
<script>
XF.ready(() =>
{

        XF.extendObject(true, XF.config,
        {
            
                apSsAvatarFrameStyle: 'square',
            
            
            
        });
    
})
</script>

What I don't understand is why I get:
Code: 
XF.ready(() =>
but apathy gets:
Code: 
window.addEventListener('DOMContentLoaded', () =&gt;
 
@apathy I don't know if this a known issue but in "custom title style" icons like font awesome don't not seem to work.

Steps to reproduce:

  • Go here /account/style-settings#custom_title_style
  • Have or add a custom title.
  • Click icon type > Font Awesome
  • Select any icon from the pop up
  • save

problem: Icon is now shown.

Also...

  • Selecting "After username"
  • save

problem: it resets to "Before username" by itself.

I'm using default theme, I don't see the icon inspecting html, I don't see a "before" or "after" css
 
unproperlypropagated said:
@apathy I don't know if this a known issue but in "custom title style" icons like font awesome don't not seem to work.

Steps to reproduce:

  • Go here /account/style-settings#custom_title_style
  • Have or add a custom title.
  • Click icon type > Font Awesome
  • Select any icon from the pop up
  • save

problem: Icon is now shown.

Also...

  • Selecting "After username"
  • save

problem: it resets to "Before username" by itself.
Click to expand...
The custom title icons should be working in the beta and I know I fixed an issue regarding the before/after previews javascript but I'm not certain I caught the issue with it not actually reflecting across the board.
I'll take a look tomorrow. Hopefully I'll have a stable version out within the next few days.
 
Sorry apathy.
There's this issue where the font awesome icon picker shows up for the titles but not for usernames where the icons actually do work (if you manually paste an icon id).
It would be nice to have the picker working for usernames. People aren't good at following instructions.
 
unproperlypropagated said:
Sorry apathy.
There's this issue where the font awesome icon picker shows up for the titles but not for usernames where the icons actually do work (if you manually paste an icon id).
It would be nice to have the picker working for usernames. People aren't good at following instructions.
Click to expand...
You should be able to fix this yourself now instead of waiting for the beta to go stable by editing js/apathy/StyleSuite/core/TextStyle.js

Find:
Code: 
const iconPicker = new IconPicker('.iconpicker',

Replace:
Code: 
// Specify the user style type to avoid opening 2 pickers on the custom title page
const styleTypeClass = '.styleSettings--' + options['styleType'];
               
const iconPicker = new IconPicker(styleTypeClass + ' .iconpicker',

But I'll have this included in 2.14.0 either way.
 
I only have a minified version and there's no "const iconPicker" definition, I'm not good at JavaScript to adapt that replace to what I have.


JavaScript: 
(function(k,h){XF.TextStylePreview=XF.extend(XF.StylePreview,{getPreview:function(a,b){var c={};return c[b]=a,c.inner_text_animation=a.querySelector(".previewInnerTextAnimation"),c.sparkle=a.querySelector(".previewSparkle"),c},getExtraPreview:function(a){return{icon_fa:a.querySelector("#previewIcon--fa"),icon_img:a.querySelector("#previewIcon--image")}},createColor:function(a){var b=a.element,c=a.preview;1==b[0].querySelector(":checked").value?(c[a.styleType].style.color="unset",this.createGradient(c.inner_text_animation,
b)):(this.createTextFromClip(c),c[a.styleType].style.color=b[2].value)},createGradient:function(a,b){Object.assign(a.style,{background:"linear-gradient(to right, "+b[4].value+", "+b[5].value+")","-webkit-background-clip":"text","background-clip":"text","-webkit-text-fill-color":"transparent","text-fill-color":"transparent"})},createTextFromClip:function(a){Object.assign(a.inner_text_animation.style,{background:"unset","-webkit-background-clip":"unset","background-clip":"unset","-webkit-text-fill-color":"unset",
"text-fill-color":"unset","background-size":"",animation:""});a.text&&Object.assign(a[options.styleType].style,{"-webkit-text-fill-color":"unset","text-fill-color":"unset",background:"unset"})},createClipFromText:function(a,b){a.style.backgroundImage="url("+b+")";a.id="ap-ss-innerTextAnimation"},setColorType:function(a){var b=this,c=a.element,d=a.preview;["change","input"].forEach(function(f){c.forEach(function(g){XF.on(g,f,function(e){"inputChoices"!==g.className&&((e=g.getAttribute("name"))&&e.includes("selectable_color")?
d[a.styleType].style.color=g.dataset.color:b.createColor(a))})})})},setGlowStrength:function(a){var b=this,c=a.element,d=a.preview[a.styleType];["change","input"].forEach(function(f){c.forEach(function(g){XF.on(g,f,function(e){Object.assign(d.style,{animation:"none"});e=c[0].value;switch(parseInt(c[1].querySelector(":checked").value)){case 0:return Object.assign(d.style,{"text-shadow":"0px 0px"});case 1:return Object.assign(d.style,{"text-shadow":"0px 0px 8px "+e});case 2:return Object.assign(d.style,
{"text-shadow":"0 0 2px "+e+", 0 0 2px "+e+", 0 0 4px "+e+", 0 0 6px "+e});case 3:return Object.assign(d.style,{"text-shadow":"0 0 2px "+e+", 0 0 4px "+e+", 0 0 6px "+e+", 0 0 8px "+e+", 0 0 10px "+e});case 4:return b.setAnimatedGlow(a);case 5:return b.waitForCodeEditor(c[9],function(){c[9].nextSibling.CodeMirror.on("change",function(){Object.assign(d.style,{"text-shadow":c[9].nextSibling.CodeMirror.getValue()})})})}})})})},setAnimatedGlow:function(a){h.getElementById("animatedGlow")&&h.getElementById("animatedGlow").remove();
var b=a.element;b=[b[0].value,b[7].value];var c=h.createElement("style");c.id="animatedGlow";c.type="text/css";c.innerHTML="                    @keyframes animatedGlow {                        from {                            text-shadow: 0 0 2px "+b[0]+", 0 0 4px "+b[0]+", 0 0 6px "+b[0]+", 0 0 8px "+b[0]+", 0 0 10px "+b[0]+";                        }                        to {                            text-shadow: 0 0 1px "+b[1]+", 0 0 2px "+b[1]+", 0 0 4px "+b[1]+", 0 0 6px "+b[1]+", 0 0 8px "+
b[1]+", 0 0 10px "+b[1]+", 0 0 12px "+b[1]+";                        }                    }";h.head.appendChild(c);a.preview[a.styleType].style.animation="animatedGlow 2s ease-in-out infinite alternate"},setIconColor:function(a){var b=a.element[0];["change","input"].forEach(function(c){XF.on(b,c,function(d){a.preview.icon_fa.style.color=b.value})})},setIconPosition:function(a){var b,c=a.element[0],d=a.preview;XF.on(c,"change",function(f){switch(c.querySelector(":checked").value){case "left":b=d.inner_text_animation;
break;case "right":b=d.inner_text_animation.nextSibling}d[a.styleType].insertBefore(d.icon_fa,b);d[a.styleType].insertBefore(d.icon_img,b)})},setIconType:function(a){var b=a.element,c=a.preview;a=XF.config.url.basePath+"js/apathy/StyleSuite/vendor/icon-sets";(new IconPicker(".iconpicker",{iconSource:["Font Awesome 5 Brands",{key:"fa-brands",prefix:"fab fa-",url:a+"/fa-brands.json"},"Font Awesome 5 Regular",{key:"fa-regular",prefix:"far fa-",url:a+"/fa-regular.json"},"Font Awesome 5 Solid",{key:"fa-solid",
prefix:"fas fa-",url:a+"/fa-solid.json"}],closeOnSelect:!0,i18n:{"input:placeholder":XF.phrase.icon_picker_placeholder,"text:title":XF.phrase.icon_picker_title,"text:empty":XF.phrase.icon_picker_empty,"btn:save":XF.phrase.save}})).on("select",function(d){var f="";switch(d.value.split(" ")[0]){case "fab":f="brands";break;case "far":f="regular";break;case "fas":f="solid"}XF.Icon.getInlineIcon(f,d.value.split(" ")[1]).then(function(g){g=XF.createElementFromString(g);h.querySelector("#previewIcon--fa").parentElement.replaceWith(g);
g.children[0].id="previewIcon--fa"})});["change","input"].forEach(function(d){b.forEach(function(f){XF.on(f,d,function(g){c.icon_fa.style.display="none";c.icon_img.style.display="none";switch(b[0].querySelector(":checked").value){case "fontawesome":c.icon_fa.style.display="inline-block";break;case "upload":c.icon_img.style.display="block";break;case "preset":c.icon_img.style.display="inline-block",c.icon_img.src=XF.config.dataDir+"icons/l/"+b[7].value+".png",c.icon_img.height=XF.config.iconHeight,
c.icon_img.width=XF.config.iconWidth}})})})},setInnerTextAnimation:function(a){var b=this,c=a.element[0],d=a.preview;XF.on(c,"input",function(f){c.value?(d.inner_text_animation.style="",b.createClipFromText(d.inner_text_animation,c.value)):b.createTextFromClip(d)})},setSparkle:function(a){var b=a.element[0],c=a.preview.sparkle;XF.on(b,"change",function(d){c.className="";c.classList.add("previewSparkle");b.value&&c.classList.add("ap-ss-sparkle--"+b.value)})}});XF.Element.register("text-style-preview",
"XF.TextStylePreview")})(window,document);
 
apathy updated [AP] Style Suite with a new update entry:

2.14.0 Beta 2

  • Group permissions by user style type rather than just have them all in one group
  • Allow for glows & inner-text animations to be applied to Post styles
  • Create TextStyleTrait entity trait
  • Fix regression Beta 1 when running user style cache rebuild job: Undefined array key ""
  • Fix regression from original beta in tools -> rebuild caches: Cannot access offset of type string on string
  • Fix regression from Beta 1 where non-asset icons (fontawesome, upload) & postbits...
Click to expand...

Read the rest of this update entry...
 
Could I ask for background-color for postbit and post style?

Sorry of this is possible already.
I mean I guess for postbit you can load a flat square and just repeat it but it's kinda overkill to load an image for a flat color.
For post style there's no workaround.


postbit11.webp

postbit2.webp
 
Last edited:
unproperlypropagated said:
Could I ask for background-color for postbit and post style?

Sorry of this is possible already.
I mean I guess for postbit you can load a flat square and just repeat it but it's kinda overkill to load an image for a flat color.
For post style there's no workaround.
Click to expand...
for CSS you can whitelist "background-color" and other properties in the addons options, in the "user style" tab

I'm not sure how to add background color for just post text, i think it would have to be the whole post container. I'm not sure I'd have time for that right now because I could see it evolving into its own user style type very quickly lol, but I wont rule it out for an update further down the line
 
I found that for a user that has username has
CSS: 
-webkit-text-fill-color: transparent;
Their name will render ALL BLACK on profile page and on tooltip (but fine everywhere else).
I tracked the cause of it to these core css rules (commented out)

member_tooltip.less
line 88
CSS: 
    .username
    {
        //.memberTooltip-textStroke();
    }

member.less
line 96

CSS: 
    .username
    {
        //.member-textStroke();
    }

I don't know the setting that is adding:
CSS: 
-webkit-text-fill-color: transparent;
it's not for every user.

As a work around I commented out core css but if you could look into this case it would be better.
 
Last edited:
unproperlypropagated said:
I found that for a user that has username has
CSS: 
-webkit-text-fill-color: transparent;
Their name will render ALL BLACK on profile page and on tooltip (but fine everywhere else).
I tracked the cause of it to these core css rules (commented out)

...

As a work around I commented out core css but if you could look into this case it would be better.
Click to expand...

Hadn't had a chance to work on the addon for the last 3 days but I'll be back working on it today.
I'll take a look but I've never encountered this - I do have the member-textStroke() lines commented out on my forums theme though.
I know inner-text animations add text clips so I'd wager that's the offending setting.
 
apathy said:
Hadn't had a chance to work on the addon for the last 3 days but I'll be back working on it today.
I'll take a look but I've never encountered this - I do have the member-textStroke() lines commented out on my forums theme though.
I know inner-text animations add text clips so I'd wager that's the offending setting.
Click to expand...
Hello Apathy, we have this issue with the Profile Posts Background repeat property, it doesn't matter what option we choose (None, X-axis, Y-axis, Both).
The CSS is always:
CSS: 
.p-pageWrapper {
    background-repeat: no-repeat;

}
 
@unproperlypropagated the tooltip bug is probably the same one I have fixed in 2.14.0, the bug only stops it from loading when hovering usernames, but hovering an avatar works fine.

Not sure about the background-repeat, didn't run into it and I'm not gonna have time to squeeze it into 2.14.0. Let me know if its still an issue when thats out (which I'm expecting will be later today)
 
You must log in or register to reply here.
Back
Top Bottom