Too many tabs? Can't tell Prod and Stage apart anymore?
If you're crazy like me and your tab bar looks like one grey blur because of all the tabs you have open, maybe this is for you. I keep having to click tabs just to see if it's a Prod or Stage page, so I added this to the header. One regular favicon and one colourful one, so I know instantly if a tab is prod or stage. <#attempt> <#assign current_url = http.request.url/> <#if current_url?contains("<insert stage-unique url section, e.g. community-stage.site.com>") == true> <link rel="icon" href="colourful icon"> <#else> <link rel="icon" href="normal icon"> </#if> <#recover> <link rel="icon" href="normal icon"> </#attempt>Lab / Idea / Unconference Meetup?
I have a couple things on my community backlog that probably require some level of customization - I tend to be looking for stuff in Atlas that already has some traction or headway AND I see lots of "under consideration" ideas AND I see lots of "Did anybody make an XYZ widget in their community..." questions BUT what I haven't yet found (beyond this forum itself) is an available time and place for Devs to get together on their own and either attack a specific common problem OR talk together through a top of mind issue. It could be anything from a KhorosLed affair or even just an Unconference we put on ourselves. Would be REALLY great if there was a vanilla lab stood up to do actual live-action work that participants could then try to leverage in their own environments later. Am I just not finding this yet? Do we need to bootstrap something? BlakeH - has this come up before?Simple redirect to "my profile" page
Here's how you can create a simple redirect to land your users on their profile page via an easy to share URL. Create an endpoint called myprofileredirect with the following content: <#if user.anonymous > ${http.response.setRedirectUrl(webUi.getUserLoginPageUrl("/plugins/custom/YourID/YourID/myprofileredirect"))} <#else> ${http.response.setRedirectUrl("${user.webUi.url}")} </#if> (If you don't know the ID to use in the anonymous redirect, just save it and you'll see a link to "open the endpoint" where you can get the URL path). Ask support to create two new vanity URLs, both pointing to the endpoint. /myprofile /me Seriously, it's that easy (once published, of course). The user.webUi.url FreeMarker object returns the user's profile ID and if a user isn't logged in, they'll be taken to the login page first, by way of webUi.getUserLoginPageUrl. Enjoy!Highlight topic starter
Just wanted to share a small code snipped I created to highlight the topic starter with a small badge next to the author information in each reply but not the first message in a thread: <#if (env.context.message.parent??) && (page.context.thread.topicMessage.author.id == env.context.message.author.id)> <div>Topic Starter</div> </#if> Just drop the above code in a custom component and add it to the "ForumMessage" page layout next to the author information like avatar, name and rank. How does it look With a pill shape styling similar to that of labels it can look like this: Alternatively you could @override the author avatar component and use above condition to wrap it into a topic starter class container and then add some styling to the avatar like a ring: Or do both at the same time. Have fun with it.Event.path deprecation in Chrome Jan'23
Chrome developers announced deprecation of the Blink JS engine specific Event.path API in January 2023. This will affect end users with both Chrome and Edge browsers. It's being replaced by the standard method Event.composedPath(). Latest Chrome already started flagging a warning in developer console for use of that API in lia-scripts-body-min.js - Not sure if any crucial functionality (like building any info of the LITHIUM.CommunityJsonObject) is based on this script, but would love to hear from Khoros that updating the script is on their radar.BreadcrumbList structured data 2018 update
The navigation breadcrumb metadata format that Google relies on was updated in August 2018. It now requires a new position field for each item that looks like this: <meta itemprop="position" content="1" /> This is an integer for the item depth/distance from the top level. If you are using the custom component to override the breadcrumb please update with the new code to include this itemprop from the best practice article here: https://lithosphere.lithium.com/t5/Tactical/Optimizing-your-page-preview-for-SEO/ta-p/309293 You can verify your community pages' structured data with the Google testing tool here: https://search.google.com/structured-data/testing-tool/u/0/Has anyone built Icon-Based Reactions?? (rather than Kudos)
A user brought up an idea I think is great. To have icon-based responses (similar to Facebook & Teams) like heart, laugh, etc. In an internal board, somebody gave a snarky (but good-natured) reply. We feel that's healthy and adds some spice to the community. But it'd be sweet to laugh at posts like that, rather than simply liking. Low importance!We like the 'Since you were gone' feature here on Atlas - We recreated it and shared the component
We really like the 'Since you were gone' feature here on Atlas. We want to implement this on our Communities. We asked support if this is a component that is available in Studio, it is not. The 'Since you were gone' feature is a custom made component just for Atlas. We would love Khoros to share the content of this component so we can fast-track our development of such a component. We feel the entire community here might benefit from sharing this with all of us 🙂Studio: Component (OoTB) called "tabs"
How does one access the child pages of a page like My Profile Page? According to the standard (non-XML) page quilt in Studio, the main content is in a (?) component generically called "tabs" calls the child pages. I am unable to locate any documentation on how this works. What I need to do is edit one of the child pages, and since they don't show up as custom pages, it is a bit of a challenge.TIP: Replace "Community Settings" tab text with something sensible.
Kudos to luk for posting this hack in the comments section of the idea: Put the flipping Page Name in the HTML Title. Today I'll show you how to turn this tab title text taradiddle: into this: Yes, we can have nice things... so long as we make them ourselves. 🔥😅 Steps: Install the User Javascript & CSS Chrome extension Configure: URL pattern: *community.[your_domain].com/t5/bizapps* Configure: ✓ JavaScript, ✓ jQuery 3 Paste in the code below: function emojiFavIcon(emoji){ // create a new favicon element var favicon = document.createElement('canvas'); favicon.height = 64; favicon.width = 64; // draw the emoji on the canvas var ctx = favicon.getContext('2d'); ctx.font = '64px serif'; ctx.fillText(emoji, 0, 52); // create a new link element for the favicon var newFavicon = document.createElement('link'); newFavicon.rel = 'shortcut icon'; newFavicon.type = 'image/x-icon'; newFavicon.href = favicon.toDataURL('image/x-icon'); // replace the old favicon with the new one var oldFavicon = document.querySelector('link[rel="shortcut icon"]'); if (oldFavicon) { document.head.removeChild(oldFavicon); } document.head.appendChild(newFavicon); } if ( $('body').hasClass('BizAppsPage') ) { const parts = new Set(); $('.lia-tabs-active:not(:first)').each(function() { parts.add($(this).text().trim()); }); // for SCSS COMMON/xyz.scss $('.lia-studio-sass-editable .lia-tree-node-sass .lia-tree-action-root.lia-component-common-widget-link:has(+ul li.lia-list-tree-selected)').each(function() { let tex = $(this).text().trim(); if (tex != "sass"){ parts.add($(this).text().trim().substring(0, 4) + '/'); } }); // for SCSS common/XYZ.SCSS $('.lia-studio-sass-editable .lia-tree-action-root.lia-component-common-widget-link+ul li.lia-list-tree-selected').each(function() { parts.add($(this).text().trim()); }); let nTT = [...parts].join(' - '); // Studio pages get a gear by default. if (nTT.startsWith("Studio - ")) { emojiFavIcon(""); nTT = nTT.replace('Studio - ',''); // Style pages get a paint palette by default if (nTT.startsWith("Community Style")) { emojiFavIcon(""); nTT = nTT.replace('Community Style - ',''); // clean up the CSS path bits nTT = nTT.replace('CSS - ',''); nTT = nTT.replace('/ - ','/'); } if (nTT.startsWith("Text Editor")) { emojiFavIcon(""); nTT = nTT.replace('Text Editor - ',''); } } // Admin pages get a briefcase by default if (nTT.startsWith("Admin - ")) { emojiFavIcon(""); nTT = nTT.replace('Admin - ',''); nTT = nTT.replace('Display - ',''); // to avoid removing "Content - " from "Custom Content - "" if (nTT.startsWith("Content - ")) { nTT = nTT.replace('Content - ',''); } // red hair emoji reminds me of a Guess Who? character if (nTT.startsWith("Users - ")) { nTT = nTT.replace('Users - ',''); emojiFavIcon("️🦰"); } if (nTT.startsWith("Metrics")) { emojiFavIcon(""); nTT = nTT.replace('Metrics - ',''); } } $('title').text(nTT); } The above code: Replaces the fav-icon with 💼Default for Admin ⚙️Default for Studio 👨 Users 📈Metrics 📝Text Editor Replaces the tab text w/ helpful tab text. Look, I'm not gonna say it's optimized (it's not), but it seems safe enough and it's been working for me without any hiccups. Anecdotal win! Here's what my settings look like: Also, see luk's comments here for a slightly different way that checks for LITHIUM.jQuery. For some reason didn't work for me but gave me the essence I needed to get rolling with the above code. If you make any share-worthy improvements, leave them in the comments below!
