Home Forums Porto Template Change timeline icon

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #10031400
    ppericles
    Participant

    Hello,
    How do I change the timeline’s (bullseye) icon? I wish to use a fontawesome character.

    Thanks,
    Pericles



    Template Version: 7.6
    #10031408
    Support2
    Keymaster

    Hello Pericles,

    Here’s the code you need:

    (css/custom.css):

    section.timeline .timeline-box.left:before, section.timeline .timeline-box.right:before {
        content: '\f0ac'; /* blogbe fontawesome icon */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        background: none;
        box-shadow: none;
        color: #1894c7;
        font-size: 20px;
        width: 18px
    }

    And here’s how you can get the content: xxx code of the desired icon:

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031412
    ppericles
    Participant

    Thanks for the swift reply.
    How do I change the color of the vertical line connecting the timeline icon?

    Thanks,
    Pericles


    #10031414
    Support2
    Keymaster

    Hello Pericles,

    Here’s the code you need:

    section.timeline:before {
        background: linear-gradient(to bottom, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%);
    }

    * Change the colors values of linear-gradient.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031418
    ppericles
    Participant

    Hello,
    I did not manage to change the icon of the timeline.

    I used a character from the font awesome pro 5 family and it did not work.
    My code in custom.css was:
    section.custom-timeline .custom-timeline-box.left:before, section.custom-timeline .custom-timeline-box.right:before {
    content: ‘\f05b’; /* crosshairs fontawesome icon */
    font-family: “Font Awesome 5 Pro”;
    font-weight: 900;
    background: none;
    box-shadow: none;
    color: #1894c7;
    font-size: 20px;
    width: 18px;
    }
    You can find an example of the page that contains the timeline at: https://www.ims.gr/company.html

    Thanks,
    Pericles


    #10031421
    Support2
    Keymaster

    Hello Pericles,

    Oh right. Your are using the timeline from niche demo, that’s different from Portofolio Timeline (that’s the code I sent for you before).

    For that timeline you need this code:

    /* Custom Icon */
    .custom-timeline .custom-timeline-box:before {
    	content: '\f0ac'; /* blogbe fontawesome icon */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        background: none;
        box-shadow: none;
        color: #1894c7;
        font-size: 20px;
        width: 20px;
        left: 62px;
        top: 0;
    }
    
    /* Line color */
    .custom-timeline .custom-timeline-box:after {
    	border-color: red;
    }

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 2 days, 8 hours ago by  Support2.
    #10031424
    ppericles
    Participant

    Hello,
    It works partially. Now the timeline icon is not vertically centered with the line.
    See image below:
    Wrong vertical alignment of icon & line in timeline

    Thanks,
    Pericles


    #10031426
    Support2
    Keymaster

    Hello Pericles,

    You can move the timeline icon changing the values of top and left in my previous solution for you.

    left will move the icon horizontally. You can increase or decrease the current value.
    top will move the icon vertically. You can increase or decrease the current value. Accepts negative values.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031431
    ppericles
    Participant

    Thanks.


Viewing 9 posts - 1 through 9 (of 9 total)