Change color of an appended $div element in macro - moved

classic Classic list List threaded Threaded
23 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Change color of an appended $div element in macro - moved

Malmadork

Hello. I tried using another support forum to add a rank system into my forum. However I would like to change the color of the text within post_count_js.

Here is my code:


<override_macro name="post_count_js"> 
    <n.param_loop. param="postCount"> 
        <n.if.not.page_user.is_deactivated> 
            <then> 
                var $div = $('div.post-count<n.page_user.user_tag_id/>');  
                $div.html('<n.one_or_many n="[n.page_user.post_count_value/]" one_text="[t]post[/t]" many_text="[t]posts[/t]"/>');  
           
                $div.append("<br/>");  
                var postCount = <n.page_user.post_count_value/>;  
                if (postCount > 200)  
               
                    $div.append("Elite Member");  
                else if (postCount > 100)  
                    $div.append("Guru");  
                else if (postCount > 50)  
                    $div.append("Master");  
                else if (postCount > 25)  
                    $div.append("Helper");  
                else  
                    $div.append("Newbie");  
            </then> 
        </n.if.not.page_user.is_deactivated> 
    </n.param_loop.> 
</override_macro>


I already tried using `$div.style = 'color: blue' `however that did not work.

How can I change the color of each $div.append so they are different per rank? Thank you!
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Israel <Nabble>
Administrator
Hello Malmadork,
Do you have an image to illustrate what you wish on your site?
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Malmadork
The edited macro I shared below adds the text of the # of posts a user made, and then a rank. What I would like to do is have the color of the text change for the 'Ranking'. I would like the color to be different for each rank.

I tried to add an id to the div element and edit the css, however that did not work. Then I tried manually setting the style trying js to do `$div.style = 'color: blue' ` however that did not work.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Malmadork
I'm not to familiar with how the nabble language works. If there was a way I could make this in pure js that would be helpful, as I am more accustomed to that.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

GregChapman
Hi Malmadork,

Your forum doesn't currently have the ranking you show in your image, so I can't provide a complete answer.

One way to tackle it is to look at the code on your forum. Here's a sample.
     <div class="avatar-inner">
            <a href="http://games-and-more-sharespace.105588.n8.nabble.com/template/NamlServlet.jtp?macro=user_nodes&user=1" rel="nofollow" title="View profile of Malmadork" class="nowrap no-decoration"><img class="avatar medium-border-color" src="/file/a1/avatar100.png" height="100" width="100" alt="Malmadork" title="Malmadork"/><img src="/images/online.png" class="online1 online invisible" title="User is online" alt="online"/></a>
    
    
        </div>
    </div>
    <div class="avatar-label weak-color"><b>Administrator</b></div>
    
    <div class="post-count1 avatar-label weak-color"></div>
      
Note the last two lines and the classes the two divs have.

It's easy enough to add CSS code in the box found at:
Options > Application > Change appearance > CSS
to alter the appearance of whatever div you create to add the rank.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Malmadork
Yes, was trying to try something but it resulted in an error that stopped the ranking from appearing. It appears now, but let me try your solution real quick. I'll let you know what happens
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Israel <Nabble>
Administrator
Can you please try the code below?
<override_macro name="post_count_js">
        <n.param_loop. param="postCount">
                <n.if.not.page_user.is_deactivated>
                        <then>
                                var postCount = <n.page_user.post_count_value/>;
                                var s = '' + postCount + ' ' + (postCount==1 ? '<t>post</t>' : '<t>posts</t>');
                                s += "<br/>";
                                if(postCount > 200)
                                        s += "Elite Member";
                                else
                                        s += "Newbie";
                                $('div.post-count<n.page_user.user_tag_id/>').html(s);
                        </then>
                </n.if.not.page_user.is_deactivated>
        </n.param_loop.>
</override_macro>

Please let us know if it works for you.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Malmadork
Israel <Nabble> : Yes this works but it does the same as I had it before, just with less ranks. It did not change the color.

GregChapman: The CSS would not change the color. I tried editing things other than the color for those classes, which worked; I tried `float: left`and it floated left, however, `color: blue` did not change the color. I think it could be that the weak color css overrides the custom css. Not entirely sure why or how but that is my best guess
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

GregChapman
My trouble is that I have no understanding of JavaScript, only HTML ans CSS. I don't understand how the script interacts with the page actually delivered.

Taking an example, I see in your page code at:
http://games-and-more-sharespace.105588.n8.nabble.com/Programing-a-platformer-td14.html
where you and another post, lines where I expect to see the postcount and rank. These are either

<div class="post-counta22_Glitchy avatar-label weak-color"></div>
or
<div class="post-count1 avatar-label weak-color"></div>

As you see, both divs are empty, so I have no understanding of how the rank and count actually appear on the page and I wouldn't expect my suggested solution of placing code in the CSS box to work until your script actually writes to the html file delivered to the visitor.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Malmadork
Yes, both div elements are empty, which (most likely) does mean that the post_count.js file is adding text to the div tags. This can be seen in the post_count.js file. I wonder if the text_weak_color file could be changed to solve this issue.

text_weak_color : `<macro name="text_weak_color">666666</macro>`

Right now, it appears that text_weak_color file is used to override the colors of that text, as we can see in the page source it has a class of "weak-color". It is used in change_appearance.naml, in which I cannot change. If I change the text_weak_color file, it does the same as if I were to edit the color by doing: Options, application, change appearance, then changing weak text color there. This influences all weak text on the forum and is definitely not what I would like to do. I wonder if there is someway to edit the text_weak_color or change_appearance.naml files in order to only change the post_count (posts & rank) CSS.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

GregChapman
In my view one of the problem with much of Nabble's styling code is that it is applied through a large number of CSS classes that have only a visual effect that is not related to the function of the element to which they are applied.

The result is that when you want to change the effect of, for example, a "weak-color" class in one place it has an unwanted impact in many other places on the forum.

That's why my general approach would be to try to edit the NAML to edit the HTML/CSS generated, so appropriate classes could be applied to just the elements concerned - but that approach is, of course, driven by lack of knowledge of JavaScript. It's probably time for me to withdraw from this topic as I'm at the limit of my knowledge.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Malmadork
Got it. Thank you for you answers GregChapman. Not entirely sure what to do, but still glad I could get the ranks working well.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Israel <Nabble>
Administrator
This post was updated on .
Hi Malmadork,
Is it working properly. Can you please share the changes that were made?
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Malmadork
This post was updated on .

Above is the code and the output I am receiving.

The code you provided also receives the same output but only with less ranks
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

OS-Jason
I am very new to css but this worked for me.

.nabble .avatar-label{
        color:#ffffff;
        font-size:15px;
}

Copy and paste this code in the css section of options/application/change appearance

I hope I am not to late
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Malmadork
This works! Only thing I wish I could do is change it depending on the rank (# of posts). However, I am glad I can make it pop out.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

Malmadork
@OS-Jason, GregChapman, Israel, or anyone else who may be knowledgeable,

Is there a way to add a custom class or id within a macro?  If there is a way to do this, I would gladly appreciate it if you could show me how. I apologize for adding on more questions, but I really do appreciate all of your help in customizing my forum.

Thanks so much,

Malmadork, Games and More
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

GregChapman
I'm not sure what you mean by "class".

I think of that as a CSS term with a very particular meaning, but I suspect you are using it differently. Can you explain your thought in more detail.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Change color of an appended $div element in macro - moved

GregChapman
In reply to this post by Malmadork
(Don't forget to use "Threaded" view to see where this fits in the topic.)

The reason that I didn't post Jason's answer is because  it is strictly a Nabble CSS class that is applied to the relevant block of HTML code.

The trouble is that the ranking system is added using locally applied JavaScript not code added by Nabble at their server, so to apply different colours to a rank must be done within the JavaScript code to ensure it is applied locally enough.

I don't understand enough about JavaScript to suggest how the JavaScript be edited.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Solution to Adding Ranks With Custom Styles!

Malmadork
In reply to this post by Malmadork

I've finally solved it!!!

Here is how you create a custom rank with custom colors and custom styles:

First, we need to add custom ranks as we did earlier; I will go over this for clarification if anyone else needs it. On your forum, click the link "Edit My Page" most likely found in the bottom right corner of the page. Then click on the settings wheel and select "Search Macros". After you have reached that page, you want to search for the file, "post_count_js". It should look something like this:
Next, you want to click on the file named "post_count_js". Click on the button "Override this Macro", and copy the following text into the macro:

<override_macro name="post_count_js">  
    <n.param_loop. param="postCount" >  
        
        <n.if.not.page_user.is_deactivated>  
           
                <then>
                    var $div = $('div.post-count<n.page_user.user_tag_id/>');   
                    $div.html('<n.one_or_many n="[n.page_user.post_count_value/]" one_text="[t]post[/t]" many_text="[t]posts[/t]"/>');   
                    
                    $div.append("<br/>");   
                    var postCount = <n.page_user.post_count_value/>;   
                    if (postCount > 150)   
                
                    $div.append("Elite Member");   
                else if (postCount > 100)   
                    $div.append("Guru");   
                else if (postCount > 50)   
                    $div.append("Master");   
                else if (postCount > 25)   
                    
                    $div.append("Helper");   
                else   
                    $div.append("Newbie");   
                    </then>
    
               
                
        </n.if.not.page_user.is_deactivated>  
    </n.param_loop.>  
</override_macro>

Once you replace the old macro, you can see that it will append a rank depended on the number of posts given. You can always change the numbers and the name of the ranks later if you like! Here is what it looks like without styles, which we will get to next:

Next, the more complicated part, is adding custom colors and or styles for each rank, so different members stand out dependent on their number of posts. If we go back to "search macros", we want to search for the file "post_count". You should see a file like this:

Now you want to replace the file with the text below:
<override_macro name="post_count" requires="user">
    <div class="post-count[n.user_tag_id/] avatar-label weak-color" id="_div"></div>
    <n.call_later value="[n.id/]" param="postCount"/>
    <script>
        
        var post_count = 0;
        var set = false;
        
        function getDiv() {
            let myDiv = document.getElementById('_div');
            let txt = myDiv.innerHTML;
            return txt;
        }
        
        function getPosts() {
            let count = getDiv();
            let n = 0;
            let str = 0;
            for(p=150; p>0; p-=1) { // The initial value for p will have to changed later depending on the max number of posts made and highest rank
                n = count.includes(p);
                if(n) {
                    if(!set) {
                        post_count = p;
                        set = true;
                    }
                }
            }
        }
 
        function appendDiv(count) { 
            let thisDiv = document.getElementById('_div');
            if(count > 150) {
                thisDiv.style.color = '#FFFF00';
            }
            else if(count > 100) {
                thisDiv.style.color = '#00ffff';
            }
            else if(count > 50) {
                thisDiv.style.color = '#ffffff';
            }
            else if(count > 25) {
                thisDiv.style.color = '#ff0066';
            }
            else {
                thisDiv.style.color = '#000000';
            }
        }
        
        setInterval(function() {
        getPosts();
        appendDiv(post_count);
        }, 100);
        
    </script>
</override_macro>

The new file now has a script which finds the users highest post count, and gives it a custom color. I would make sure the number of posts for each color in this file matches with the appropriate rank number. You can also change the colors by changing the hexadecimal values, and even add in your own custom styles by using "thisDiv.style". Also be sure not to include numbers within your rank name. In addition, you might have to adjust the max value in the for loop later depending on the max number of posts a user has. Otherwise, after changing these two macros, you should now have custom ranks with custom styles.

Thanks to everyone for your help! I really appreciate it!

~ Malmadork, Games and More

12