change postbit online icon

[kapt]

Currently the online icon is located to the left of my name. I want to move this just above postbit.
now:


i need: (border-bottom: 4px green)

[Antechinus]

Not particularly difficult, but will obviously require rewriting some of the template code. Have you tried asking the theme's author?

[kapt]

Not particularly difficult, but will obviously require rewriting some of the template code. Have you tried asking the theme's author?

I am developing the theme. I can send you whatever file you need.

[Antechinus]

Ok, if you're making the theme I suggest you try doing this yourself. It will be good experience.

This is the default online button:

Code Select Expand

    // Show online and offline buttons?
    if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
        echo '
                                ', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<span class="' . ($message['member']['online']['is_online'] == 1 ? 'on' : 'off') . '" title="' . $message['member']['online']['text'] . '"></span>', $context['can_send_pm'] ? '</a>' : '';
From your screenshot, it appears you want to replace this with a green border across the entire post. So, start by commenting out the default code (handy to keep it there to check against). I would then move the anchor and span to a suitable place in the template. Just before the .post_wrapper opening tag looks like a good option:

Code Select Expand

    // Show the message anchor and a "new" anchor if this message is new.
    echo '
                <div class="', $message['css_class'], '" id="msg' . $message['id'] . '">
                    ', $message['id'] != $context['first_message'] ? '
                    ' . ($message['first_new'] ? '<a id="new"></a>' : '') : '', '
                    <div class="post_wrapper">';
The anchor and span can then be set to display:block; in your CSS, and that should give you what you want.

[Antes]

My solution... but don't cheat ... this is for other users who wants to do the same thing but has no intention for coding anything!

Code Select Expand

// Show the message anchor and a "new" anchor if this message is new.
echo '
<div class="'. $message['css_class'] . ($message['member']['online']['is_online'] == 1 ? ' u_on' : '') . '" id="msg' . $message['id'] . '">
', $message['id'] != $context['first_message'] ? '
' . ($message['first_new'] ? '<a id="new"></a>' : '') : '', '
<div class="post_wrapper">';

Code (CSS) Select Expand

.u_on {
border-top: 5px solid greenyellow;
}
obviously the thickness (5px) and color (greeyellow) is for demonstration - you can change them to fit your style.

[kapt]

My solution... but don't cheat ... this is for other users who wants to do the same thing but has no intention for coding anything!

Code Select Expand

    // Show the message anchor and a "new" anchor if this message is new.
    echo '
                <div class="'. $message['css_class'] . ($message['member']['online']['is_online'] == 1 ? ' u_on' : '') . '" id="msg' . $message['id'] . '">
                    ', $message['id'] != $context['first_message'] ? '
                    ' . ($message['first_new'] ? '<a id="new"></a>' : '') : '', '
                    <div class="post_wrapper">';

Code (CSS) Select Expand

.u_on {
    border-top: 5px solid greenyellow;
}
obviously the thickness (5px) and color (greeyellow) is for demonstration - you can change them to fit your style.

you are a true hero, i want it to show Online when we hover over the green border. How can I do it?



By the way, here is my default code

Code Select Expand

        // Show the message anchor and a "new" anchor if this message is new.
        if ($message['id'] != $context['first_message'])
            echo '
                <a id="msg', $message['id'], '"></a>', $message['first_new'] ? '<a id="new"></a>' : '';
            echo '
                <div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg77') : 'approvebg', '">
                    <div class="post_wrapper"></div></div>
                    ';

This code is the one you sent, The two look a little different to me. Will it cause a Problem?

Code Select Expand

    // Show the message anchor and a "new" anchor if this message is new.
    echo '
                <div class="'. $message['css_class'] . ($message['member']['online']['is_online'] == 1 ? ' u_on' : '') . '" id="msg' . $message['id'] . '">
                    ', $message['id'] != $context['first_message'] ? '
                    ' . ($message['first_new'] ? '<a id="new"></a>' : '') : '', '
                    <div class="post_wrapper">';

[Antes]

I created the example based off of SMF 2.1 default theme, other themes can have different codes to shape up their style...

[Antechinus]

I didn't realise your last post was partially addressed to me, since you only quoted Antes. Anyway...

Doing it in 2.0.x is going to depend on how you are handling the default .topslice spans. Frankly I think they're not worth having (they were only included to allow rounded corners on old versions of Internet Explorer). Are you keeping them in that template, or getting rid of them? If you are keeping them, what CSS are you using for them?

[kapt]

I didn't realise your last post was partially addressed to me, since you only quoted Antes. Anyway...

Doing it in 2.0.x is going to depend on how you are handling the default .topslice spans. Frankly I think they're not worth having (they were only included to allow rounded corners on old versions of Internet Explorer). Are you keeping them in that template, or getting rid of them? If you are keeping them, what CSS are you using for them?

Actually, Antes' sharing worked for me. But since I am using 2.0.17 my default code is different than 2.1. If you can adapt the u_on code, my problem will be solved.

My default code 2.0.17(It's different from the 2.1 default code you shared.):

Code Select Expand

        // Show the message anchor and a "new" anchor if this message is new.
        if ($message['id'] != $context['first_message'])
            echo '
                <a id="msg', $message['id'], '"></a>', $message['first_new'] ? '<a id="new"></a>' : '';
            echo '
                <div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg77') : 'approvebg', '">
                    <div class="post_wrapper"></div></div>
                    ';

[Antechinus]

Do you want it clickable to enable sending a PM, just like the original icon?

[kapt]

Do you want it clickable to enable sending a PM, just like the original icon?

No, I just want the green border to above on the postbit when it's online.

https://i.hizliresim.com/b58f0hh.png

[Antechinus]

In that case I would do it like this:

Code Select Expand

// Show the message anchor and a "new" anchor if this message is new.
if ($message['id'] != $context['first_message'])
echo '
<a id="msg', $message['id'], '"></a>', $message['first_new'] ? '<a id="new"></a>' : '';

echo '
<div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg77') : 'approvebg' $message['member']['online']['is_online'] ? ' u_on' : '', '">
<div class="post_wrapper">';

[kapt]

In that case I would do it like this:

Code Select Expand

        // Show the message anchor and a "new" anchor if this message is new.
        if ($message['id'] != $context['first_message'])
            echo '
                <a id="msg', $message['id'], '"></a>', $message['first_new'] ? '<a id="new"></a>' : '';

        echo '
                <div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg77') : 'approvebg' $message['member']['online']['is_online'] ? ' u_on' : '', '">
                    <div class="post_wrapper">';

syntax error, unexpected '$message' (T_VARIABLE), expecting ',' or ';'

[Antechinus]

Missing comma. This works:

Code Select Expand

// Show the message anchor and a "new" anchor if this message is new.
if ($message['id'] != $context['first_message'])
echo '
<a id="msg', $message['id'], '"></a>', $message['first_new'] ? '<a id="new"></a>' : '';

echo '
<div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg77') : 'approvebg', $message['member']['online']['is_online'] ? ' u_on' : '', '">
<div class="post_wrapper">';

[kapt]

Missing comma. This works:

Code Select Expand

// Show the message anchor and a "new" anchor if this message is new.
if ($message['id'] != $context['first_message'])
echo '
<a id="msg', $message['id'], '"></a>', $message['first_new'] ? '<a id="new"></a>' : '';

echo '
<div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg77') : 'approvebg', $message['member']['online']['is_online'] ? ' u_on' : '', '">
<div class="post_wrapper">';

Some code does not allow it to run.

[Antechinus]

Yup. The default CSS is more specific, because it starts with the #forumposts ID. That's how CSS works. So...

[kapt]

Yup. The default CSS is more specific, because it starts with the #forumposts ID. That's how CSS works. So...

i solved the problem with a few edits. Thank you for your patience.  Finally, when I hover over the green border, what should I do to get the "Online" text?

https://i.hizliresim.com/ex1w3yt.png

[Antechinus]

You could have asked that the first time.

The default code just uses an HTML title attribute, which works but cannot be styled to match your theme. It's possible to do trickery with various other things if you want to allow styling it up with extra eye candy.

If you want it to look more or less like the fake "Online" text in that screenshot you would need something handy (like an extra span) that calls the online text from Languages and is styled to suit (absolute position, background-color, etc).

How about you think about the problem and decide on everything you want it to do, and how you want it to look. Then we can think about code for that result.

[kapt]

You could have asked that the first time.

The default code just uses an HTML title attribute, which works but cannot be styled to match your theme. It's possible to do trickery with various other things if you want to allow styling it up with extra eye candy.

If you want it to look more or less like the fake "Online" text in that screenshot you would need something handy (like an extra span) that calls the online text from Languages and is styled to suit (absolute position, background-color, etc).

How about you think about the problem and decide on everything you want it to do, and how you want it to look. Then we can think about code for that result.

I asked before, but I guess you didn't see it because there were too many answers. I did it after a few tries. All my problems are solved. It's been a long day, thank you again.