Online Status Glow to New Forum Topic Icon.

[MokeyII]

So I was looking around and trying to learn how to do some stuff on css but apparently I just don't gasp the concept of everything.

So here's what I thought.

I took the Online Status Glow and attempted to put it on the New post icons.

So I thought I could just Frankenstein some code.

.b-icon__status--green:after {
    content: '';
    border: 10px solid #6e9d00; /* green, change as needed */
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;    
    position: absolute;
    top: -24px; /* you may have to tweak this if you move it from the default position */
    left: -22px; /* you may have to tweak this if you move it from the default position */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite;
}

and simply changing the ".b-icon__status--green:after {" to ".icon.new {"

Then I started looking around and scanning, trying everything hoping I could do this and it would be an easy fix. WRONG! I actually thought it was impossible, then I saw a post on these forums that linked me to someone's site, curious enough I clicked on it... The site had the Online status Glow effect on his new post icons. So I continued and still continue to beat my face off my keyboard trying to figure it out.

Mind helpin' me out?

EDIT:

well... I got it to show up... but it's not where it should be.



SMH, not quite what I wanted...

So changing .b-icon__status--green:after to the below results in the image...

.icon.new {
    content: '';
    border: 10px solid #6e9d00; /* green, change as needed */
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;    
    position: absolute;
    top: -24px; /* you may have to tweak this if you move it from the default position */
    left: -22px; /* you may have to tweak this if you move it from the default position */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite;
}

@-webkit-keyframes glow {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: 0.1;
    }

    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.3;
    }
}

[Felix2]

top: -24px; /* you may have to tweak this if you move it from the default position */ left: -22px; /* you may have to tweak this if you move it from the default position */

Each theme uses different layouts, so the default position will be different for each. As such, you have to set the XY positions to match your theme.
In addition, you may want to read http://vbmods.rocks/forum/vbulletin-...-icon#post1311
That thread shows how to add a glowing pulse effect to new posts (unread). All you are doing, or trying to do, is use a different effect.
.topic-item .vb-icon-topic-status { and .topic-item.read .vb-icon-topic-status { are the class triggers for the code.

[MokeyII]

Each theme uses different layouts, so the default position will be different for each. As such, you have to set the XY positions to match your theme.
In addition, you may want to read http://vbmods.rocks/forum/vbulletin-...-icon#post1311
That thread shows how to add a glowing pulse effect to new posts (unread). All you are doing, or trying to do, is use a different effect.
.topic-item .vb-icon-topic-status { and .topic-item.read .vb-icon-topic-status { are the class triggers for the code.

I did read it, which made me want the icons to have the online glowing effect.

so how does top: -24px; hit every icon? the screen shot looks like it just stacked them all in one corner

is there a way to know what with like a graph or so where exactly to place it?

[MokeyII]

So, I can't seem to figure it out. Every time I do anything and see the effect but it's stacked, like 100 times in 1 spot. I'm not under standing it.

so I replaced

 .icon.new {

with one of these, I tried them all

.topic-item .vb-icon-topic-status {  

.topic-item.read {

.vb-icon-topic-status {

and I either get stacked Icons in a random spot, or no icons at all.

---

EDIT:

I got the unread topics to work now... So it is using the online status animated pulse to bring attention to new posts.

/*--------------------------- New topic Glow----------------------------*/
.topic-item .vb-icon-topic-status {
    content: '';
    border: 10px solid #1C6191; /* blue, change as needed */
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;    
    position: absolute;
    top: -12px; /* you may have to tweak this if you move it from the default position */
    left: -24px; /* you may have to tweak this if you move it from the default position */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite;
}

/* then override and reset read posts to original style */
.topic-item.read .vb-icon-topic-status {
    background-color: transparent;
    border-radius: 0;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}

@-webkit-keyframes glow {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: 0.1;
    }

    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.3;
    }
}

Now my issue is, I can't get the Category Sub categories to do so.
Circled in red.


It still places it at an awkward section no matter where I try set it like the picture at the start of the post.

I thought I could just do it like this but it's just not working.

[B]/* Sub Topic */
.icon.new {
    content: '';
    border: 10px solid #1C6191; /* blue, change as needed */
    background: transparent;
    border-radius: 40px;
    height: 80px;
    width: 60px;    
    position: absolute;
    top: -12px; /* you may have to tweak this if you move it from the default position */
    left: -24px; /* you may have to tweak this if you move it from the default position */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite;
}

.icon.new {
    background-color: transparent;
    border-radius: 0;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}[/B]

[MokeyII]

Very sorry for the massive posts. I guess I can't edit post after an assigned amount of time.

I finally got the glow to work... kinda-sorta...

But if you look, when the icon fades in, it brings the icon with it. so when the animation starts there is nothing there rather than having the default with the effect added.

it also only stacks new posts at the assigned location rather than through the full forum board.

I noticed this in my new topics portion too, the pages that show beside every post aren't there either.

This is the section of code, I'm not sure how to get the icon to show and just have the default.

/* Sub Topic */
.icon.new {
    content: '';
    border: 10px solid #1C6191; /* blue, change as needed */
    background: transparent;
    border-radius: 40px;
    height: 80px;
    width: 60px;    
    position: absolute;
    top: 263px; /* you may have to tweak this if you move it from the default position */
    left: 5px; /* you may have to tweak this if you move it from the default position */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glowcat 1.5s ease-out infinite;
}

@-webkit-keyframes glowcat {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: 0.5;
    }

    50% {
        -webkit-transform: scale(0.1);
        opacity: 1;
    }
}

Alternatively, I was wondering if I could get the online status dot "b-icon b-icon__status--green" and just change the color of it and add it. Much rather have the default icon sit though.

[glennrocksvb]

You forgot the :after. That is needed in order to not replace the original icon and to just add a "glow" around the icon.

The original code is:

.b-icon__status--green[COLOR=#FF0000]:after[/COLOR] {

[MokeyII]

You forgot the :after. That is needed in order to not replace the original icon and to just add a "glow" around the icon.

The original code is:

.b-icon__status--green[COLOR=#FF0000]:after[/COLOR] {

Well it's working almost flawlessly. EXCEPT Sub Topics. " .icon.new:after "

If I change

position: absolute

relative & static cause the same or likewise issue
it acts like try to adjust it using it's like it's stuck inside of a border

If I use:

top: 235px;
left: -5px;

It stacks all the sub topic items on top of each other. However, if you remove it and keep "position: absolute"; the effect works properly but wont fall on the sub topic icon

I tried messing with the z-index, but that doesn't seem to be the issue.

[MokeyII]

still can't figure this out.

[glennrocksvb]

It would be easier to help if you post a link to the actual page.

[MokeyII]

http://www.fractured-gaming.com is my site. I just removed it since I couldn't get it to work.

The effect on the new Category posts on gcombe74 main page is what I'm trying to attempt along with adding it to sub categories. I've PM'd gcombe74 and he responded asking if I got it. He hasn't responded back to my reply.

http://www.coverandcushion.com/forum/

[MokeyII]

Finally, got it.

/*---------------Online Effect on New Topic and Sub Topic Icons---------------*/

/*---Topic---*/
.forum-list-container .forum-item.new .cell-forum .icon {
    position: relative;
}

.forum-list-container .forum-item.new .cell-forum .icon:after {
    content: '';
    border: 10px solid #F01F4B; /*color*/
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;
    position: absolute;
    top: -24px;
    left: -23px;
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite;
}

/*---Sub-Topic---*/
.forum-list-container .subforum-list .subforum-item .icon.new{
    position: relative;
}

.forum-list-container .subforum-list .subforum-item .icon.new:after {
    content: '';
    border: 10px solid #F01F4B; /*color*/
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;
    position: absolute;
    top: -24px;
    left: -23px;
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite;
}
/*---------------END Online Effect on New Topic and Sub Topic Icons---------------*/

[glennrocksvb]

Glad you figured it out.

[MokeyII]

I went ahead and posted it in the template section and added it to the VB site, linking it here giving you guys credibility.

[Felix2]

Took a little tweaking to get it to work on my theme, but the results are wonderful when combined with other effects.
Nice job everyone on the updates.