• Resolved portpass1974

    (@portpass1974)


    Is there any way to have items on both sides of the timeline? I’m doing a historical timeline, and there’s an event about once every five years, but every event is on the left side. Is there any way to make it left-right-left-right to use all the width? Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author boldthemes

    (@boldthemes)

    Hi @portpass1974,

    Thanks for using Bold Timeline Lite plugin! ??

    Can you please send us link with mentioned Timeline so that we could have a closer look?
    Thanks in advance.

    Thread Starter portpass1974

    (@portpass1974)

    Hi. The timeline is at https://seanc82.sg-host.com/about/history/ (just scroll down a bit).

    Plugin Author boldthemes

    (@boldthemes)

    Hi,

    Thanks for sending us page link with BoldTimeline, it helped ??

    Please, use the following code and add as Custom CSS:

    .bold_timeline_container_line_position_center.bold_timeline_container.bold_timeline_container_item_connection_type_line .bold_timeline_item_override_connection_type_inherit.bold_timeline_item:nth-child(odd) .bold_timeline_item_connection {
        right: 100% !important;
        left: calc(-2.5rem) !important;
    }
    .bold_timeline_container_line_position_center.bold_timeline_container.bold_timeline_container_item_marker_type_dot .bold_timeline_item_override_marker_type_inherit.bold_timeline_item:nth-child(odd) .bold_timeline_item_marker {
    	right: auto !important;
        left: calc(-2.5rem - 8px) !important;
    }
    .bold_timeline_group:nth-child(even) .bold_timeline_group_content .bold_timeline_item .bold_timeline_item_icon {
        right: auto !important;
        left: calc(-5.5rem) !important;
    }
    .bold_timeline_group:nth-child(even) .bold_timeline_group_content .bold_timeline_item {
        margin-right: 0 !important;
        margin-left: calc(50% + 2.5rem) !important;
    }
    .bold_timeline_group:nth-child(even) .bold_timeline_group_content .bold_timeline_item .bold_timeline_item_icon {
        right: auto !important;
        left: calc(-2.5rem) !important;
    }
    Thread Starter portpass1974

    (@portpass1974)

    Hi. Thanks so much for this. This is great. Just three things:

    1. Is this CSS code loaded by the server on just the page at https://seanc82.sg-host.com/about/history/, or on every page of the website? I’m only asking since I want to keep the code as light as possible.

    2. I noticed that for those events on the right side, the logo is kind of off center, and the dot is in the middle, instead of the far right (for left side events, it’s the opposite). It’s a minor issue, but just wondering if this could be fixed.

    3. Also, is there a way to make the timeline “tighter,” with the years on both left and right close together vertically (just to save space).

    Thanks so much again. Great plugin.

    • This reply was modified 3 years, 3 months ago by portpass1974.
    Thread Starter portpass1974

    (@portpass1974)

    Hi. Me again. I noticed as well that the events on the right side are “smushed” vertically when seeing the timeline on mobile. Is there a way to fix this? Thanks.

    Plugin Author boldthemes

    (@boldthemes)

    Hi,

    Please read the answers below:

    1. It depends where you have added Custom CSS.
    2, 3 & 4. It could be fixed with some additional CSS codes, which we suggest you to customize according to your needs.

    Cheers, BT ??

    Thread Starter portpass1974

    (@portpass1974)

    Hi, I added the code to the CSS section of my premium theme, but I believe that’s the only place to put it. Is there additional code that could be added to that the events on the right side aren’t smushed.

    For now, I’ve removed the code to just have everything on the left.

    Plugin Author boldthemes

    (@boldthemes)

    Hi, please use another third party plugin for Custom CSS in order to use the same code for several Timelines.

    • This reply was modified 3 years, 3 months ago by boldthemes.
    Thread Starter portpass1974

    (@portpass1974)

    I tried to put the code in the CSS box right on the page, but that still created the same problem. It looks fine on a screen, just not on a mobile or smaller device. Is there any fix to this?

    Plugin Author boldthemes

    (@boldthemes)

    Hi,

    Please try adding !important in CSS lines, example: .class { color: red !important;}

    Regarding mobile, probably Timeline on mobile needs additional CSS.

    Thread Starter portpass1974

    (@portpass1974)

    Actually, the !important lines were already added to the code listed above.

    Do you have additional CSS for the mobile that you can send me? Thanks so much.

    Plugin Author boldthemes

    (@boldthemes)

    Hi,

    Unfortunately, we are not able to provide customization per request, so please use the inspect tool on your Browser to customize the Timeline on your site. In order to change items position on mobile, please use @media (max-width: 780px) code (change device size in px according to your needs). Thanks for understanding! ?? BT team

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Items on both sides’ is closed to new replies.