After some more research, I found a solution:

.topic [data-username="USERNAME"] .poster-avatar

Will select just one user's avatar

Hey.

On my forum, we have Halos around the avatars, set with:

.poster-avatar{
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: -webkit-box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.06);
}
.poster-avatar:hover{
    -webkit-box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.1);
}

Now, I was hoping to dynamically color these Halos for staff groups, so I found this topic:
https://community.nodebb.org/topic/3185/name-color-for-groups-or-username/6

With this nice block of CSS:

a[href*="groups/administrators"] span.label {
background-color: red !important;;
padding: 2rem;
}

So I figured, "Hey, thats awesome. Then I should be able to use CSS selectors to color the Halos.

However, after- extensive testing, I cant figure out what

a[href*="groups/administrators"]

is trying to select, or get it to work, at all.

I thought maybe

a[href*="groups/coloradorks-staff"] .poster-avatar{
box-shadow: 0 0 0 6px rgb(255, 0, 0);
}

would work- but obviously .poster-avatar isn't a child of this selector. Is this just selecting links to the groups page? If so, how does it work in the original case?

@frissdiegurke said in IP displaying on feeds and mentions:

Check the url within config.json.

Well, that was easy. Thanks for the quick fix!

Hey!

I'm pretty sure I set something up wrong here, and just realizing it. I just spotted that all mentions, and RSS feeds for my site appear to point to the IP of my site, instead of the URL. See here. Any ideas what could be causing this?

Hey, this looks cool.

However, I'm curious, in what ways is this better then RoboNitori with the new posts RSS feed?

Modified Material, Its the theme that, to me, feels the smoothest and most feature rich.

Looks sexy. I particularly like the display of 5 threads from each category, that is nice indeed. On larger screens, displaying 3 categories per row instead of two could do a lot for information density, I think.

This would be amazing for me as well. Make it so any user below X posts can receive chats and use them, but cannot start them with other users- other users have to message first. Then after that post threshold they can message normally.

@exodo Anything I do will always be a hack, rule one of things I produce. I do spagetti code like some sort of horrible, programming emnem.

@a_5mith

That is a good midway method, if much less copy and paste ease of set up for more complex tweaks then just changing out 2 or 3 divs.

However, besides the automode, that is inarguably more elegant programmatically way to accomplish that!

So, turns out users /really/ like nightmode.

So while for some sites, the previous, much simpler nightmode will work fine, some will find their users demanding more complex functionality out of the nightmode as the site grows, or at least I did.

This is a far more complex setup, however- so if you find it intimidating, the simple night mode will work almost as well, with a third of the work.

So here's a more complex nightmode, with the following functionalities:

1. Saved state- It will remember a users preference, and flip the nightmode to it on load.
2. Auto nightmode option- Like google maps, it flips nightmode on when its night, and off when it's day.
3. Instead of a cluttered toggle, separated functions

Step 1: CSS

Grab notepad or nodepad++, and your favorite web browser for development. Open up the inspector (ctrl-shift-i on chrome), and carefully tweak your way to a working night mode, copy pasting each CSS rule you make to the txt document, removing any unrelated rules (Keep only things you change!).

Be detailed! Remember dismiss dialogs, search pages, group pages, user settings pages, composers, everything.

Once you have a full night mode CSS, save this file as nightmode.css

Step 2: Putting the CSS file on your server

Use filezilla or similar to throw nightmode.css into nodebb/public

Step 3: JS

Paste the following into your header:

 <script>
 function nightmodeon(){
     var el = document.getElementById('myStyles');
     if ( el !== null ) {  
     } else {        
         var oLink = document.createElement("link") 
         oLink.id   = 'myStyles';
         oLink.href = "/nightmode.css";
         oLink.rel = "stylesheet"; 
         oLink.type = "text/css"; 
         document.body.appendChild(oLink);
     }
 }
 function daymode(){
     var el = document.getElementById('myStyles'); 
     if ( el !== null ) {               
         el.parentNode.removeChild(el);  
     } else {
         var oLink = document.createElement("link") 
         oLink.id   = 'myStyles';
         oLink.href = "/nightmode.css";
         oLink.rel = "stylesheet"; 
         oLink.type = "text/css"; 
     }
 }
 function autonightmode(){
 var d = new Date();
 var n = d.getHours();
 if (n >= 21 || n <= 5) {
 	nightmodeon()
 }
 else{
     daymode()
 }
 }
 function nmSwitch(){
 if (Number(localStorage.nmState) == 1) {
     localStorage.nmState = Number(localStorage.nmState)+1;
 	modeSet()
 }
 else if (Number(localStorage.nmState) == 2) {
     localStorage.nmState = Number(localStorage.nmState)+1;
     modeSet()
 }
 else if (Number(localStorage.nmState) == 3) {
     localStorage.nmState = Number(localStorage.nmState)+1;
     modeSet()
 }
 else {
     localStorage.nmState = 1;
 }
 }
 function modeSet(){
 if (Number(localStorage.nmState) == 1) {
     autonightmode();
     console.log('modeAuto');
 }
 else if (Number(localStorage.nmState) == 2) {
     daymode();
     console.log('modeDay');
     $(".nightmodeCSS").html(" ");
 }
 else if (Number(localStorage.nmState) == 3) {
     nightmodeon();
     console.log('modeNight');
     $(".nightmodeCSS").html(" ");
 }
 else {
     autonightmode();
     localStorage.nmState = 1;
 	console.log('modeElseAuto');
 }
 }
 </script>`

You also need to create a HTML footer widget, and place this inside the widget. If you do not do this, it will not work.

<script> modeSet(); </script>

Step 4: Button

The button for this CAN be simple, but that will be absolutely baffling for the user, because it has three states, one less obvious then the others. You /will/ want to style this button to have three states, one for each mode, so the user can tell what mode they're in. However, if you just want to get it working and let the users sort it out, you can simply place this:

<button class="nightmodebutton" onclick="nmSwitch();"><span></span></button>

HOWEVER, there is a special place in hell for people who do that. Ideally, you should style the above button as "OFF" in your default CSS, style it as "ON" in your nightmode CSS, then add something like:

$(".[CLASS OF SOME EMPTY DIV HERE]").html("<style>.[BUTTONCLASS] span {color: #2196f3 !important;}</style>");

into "function autonightmode()", to give it an "Auto" state.

Hopefully that wasn't too complex, I'm aware it's a bit of a wall of text. Feel free to shoot me a chat if you have issues setting this up!