Create a time-line in Xenforo

[Grant]

Grant submitted a new resource:

Create a time-line in Xenforo - Use Custom BB Code and CSS to create timelines in your xenforo posts

Here's how you can use BBCode and CSS to create a timeline in a xenforo post.

(based on this code here)

Step 1​

Paste the following into your extra.less file

/* Start timeline css */


.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
    background:black;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0...

Read more about this resource...

 

[RobParker]

Very nicely done!

 

[Slavik]

Nice!!!

 

[Ozzy47]

Well done.

 

[GrowLabz]

nice job, thanks for sharing!

 

[Kevin]

Great idea

 

[Alan_SP]

Can we somehow use colors from style? So it's more different styles friendly?

 

[Paul B]

You can replace hard coded colours with e.g. @xf-borderColorFeature, which will automatically pick up the colours from the palette and style properties.

 

[Russ]

Great resource! I've changed the CSS a little to inherit style colors a little easier:

/* Start timeline css */

@timelinebg: @xf-contentHighlightBg;
@eventbg: xf-intensify(@xf-contentHighlightBg, 3.5%);

.timeline
{
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    background: @timelinebg;
    color: contrast(@timelinebg);
    &:after
    {
        content: '';
        position: absolute;
        width: 6px;
        background-color: @xf-contentBg;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
    }
    .xftlcontainer
    {
        padding: @xf-paddingLarge 40px;
        position: relative;
        background-color: inherit;
        width: 50%;
        &:after
        {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            right: -17px;
            background-color: @xf-contentBg;
            border: 4px solid @xf-borderColorAttention;
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }
        &.xftlleft
        {
            left: 0;
            &:before
            {
                content: " ";
                height: 0;
                position: absolute;
                top: 22px;
                width: 0;
                z-index: 1;
                right: 30px;
                border: medium solid @eventbg;
                border-width: 10px 0 10px 10px;
                border-color: transparent transparent transparent @eventbg;
            }
        }
        &.xftlright
        {
            left: 50%;
            &:before
            {
                content: " ";
                height: 0;
                position: absolute;
                top: 22px;
                width: 0;
                z-index: 1;
                left: 30px;
                border: medium solid @eventbg;
                border-width: 10px 10px 10px 0;
                border-color: transparent @eventbg transparent transparent;
            }
            &:after {
                left: -16px;
            }
        }
    }
    .xftlcontent
    {
        padding: 20px 30px;
        background-color: @eventbg;
        position: relative;
        border-radius: 6px;
    }
}
@media (max-width: @xf-responsiveMedium)
{
    #XF .timeline
    {
        &:after
        {
            left: 31px;
        }
        .xftlcontainer
        {
            width: 100%;
            padding-left: 70px;
            padding-right: 25px;
        }
        .xftlcontainer::before
        {
            left: 60px;
            border: medium solid @eventbg;
            border-width: 10px 10px 10px 0;
            border-color: transparent @eventbg transparent transparent;
        }
        .xftlleft::after, .xftlright::after
        {
            left: 15px;
        }
        .xftlright
        {
            left: 0%;
        }
    }
}

/* End timeline CSS */

You can now update these variables at the top, timelinebg is the wrapper background while eventbg controls the background color of each event along with the arrows.

@timelinebg: @xf-contentHighlightBg;
@eventbg: xf-intensify(@xf-contentHighlightBg, 3.5%);

Should play nicely with any style:

 

[Grant]

@Russ mind if I add this to the post? I’ll credit you.

 

[Russ]

@Russ mind if I add this to the post? I’ll credit you.

Feel free to add, no need to credit. Nice addition to XF!

 

[gilberto85]

thank you its perfect for my site !

 

[🔥Iggy🔥]

nice one thank you.

i noticed one thing that made me ponder the responsive code some.....its not a big deal at all and honestly i havent checked any mobile devices or anything....

what i noticed tho, fwiw, was that in the FAQ the example instance, the code fails to shrink the text so its cutting words in half and such....i guess because the "post view" is smaller but the device viewport is normal.....fwiw.......not sure thats even a problem, just something i noticed and wondered about....

regards

 

[Mr Lucky]

the code fails to shrink the text so its cutting words in half and such....i guess because the "post view" is smaller but the device viewport is normal.....fwiw.......not sure thats even a problem,

I would say cutting words in half actually is a problem.

However I tried this out and didn’t notice that happening

 

[🔥Iggy🔥]

I would say cutting words in half actually is a problem.

However I tried this out and didn’t notice that happening

i would agree with that.....i just meant im not sure if this issue occurs anywhere besides the FAQ or not

 

[Grant]

Grant updated Create a time-line in Xenforo with a new update entry:

Changed CSS

Editted CSS to make it match themes better, thanks to input by @Russ

Read the rest of this update entry...

 

[Alan_SP]

You can replace hard coded colours with e.g. @xf-borderColorFeature, which will automatically pick up the colours from the palette and style properties.

Thanks, exactly what I needed to know. And, I see it's now included within original code.

 

[Pinn]

Not work with 2.2

 

[Oblivion Knight]

I decided to swap our Wiki timeline to this code.. it's making life so much easier!

Of course, I tinkered with it slightly but..