Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1181459

    I am using Breadcrumbs with shortcode [av_breadcrumbs] together with adding the following lines to function.php:

    function av_breadcrumbs_shortcode( $atts ) {
    return avia_breadcrumbs(array(‘separator’ => ‘/’, ‘richsnippet’ => true));
    }
    add_shortcode( ‘av_breadcrumbs’, ‘av_breadcrumbs_shortcode’ );

    (1) Can I have this installed in any way that it doesnt get thrown out on updates?
    (2) Can I somehow get the breadcrumb shortcode to be centered? text-align: center doesn’t work so it has to be in custom CSS I guess

    Thanks!

    #1181551

    Hey Flow9999,

    Yes, you need to install the child theme and put the code there.

    Do you have them on the page somewhere?

    Best regards,
    Victoria

    #1184981

    Thanks Victoria!

    I need to brief myself on how to install modifications through child theme but I guess I’ll manage.
    Much more important is how I can align breadcrumb shortcode to be centered and how to use different color for “main page” link?

    Kind regards o/

    #1185087

    Hi Flow9999,

    To center the breadcrumb, you can add this CSS code in Quick CSS, located in Enfold > General Styling:

    #top .avia-breadcrumbs {
        text-align: center;
    }
    
    #top .avia-breadcrumbs .breadcrumb-trail > * {
        vertical-align: top;
    }
    
    #top .avia-breadcrumbs span {
        display: inline-block;
        float: none;
    }

    For the color of the main page, use this CSS code:

    #top .avia-breadcrumbs .trail-end {
        color: lightblue;
    }

    Just change the color, hope this helps.

    Best regards,
    Nikko

    #1185494

    Thanks! The first part works just fine.
    The color modification only applies changes for color with the actual page and not the home page.
    I used the following to make it work:

    #top .avia-breadcrumbs span {
    color: #996633!important;
    }
    #top .avia-breadcrumbs .trail-end {
        color: white!important;
    }

    Now the only thing I would like to change is to change the separator character from “/” to “>>” and maybe change the color for it. How can this be altered through CSS?

    Thanks and kind regards!

    • This reply was modified 1 month, 2 weeks ago by  Flow9999.
    • This reply was modified 1 month, 2 weeks ago by  Flow9999.
    #1185562

    Hi Flow9999,

    Glad that you found a way to make it work.
    As for changing the separator character please refer to this thread: https://kriesi.at/support/topic/change-breadcrumb-separator/

    Best regards,
    Nikko

    #1185668

    Thanks Nikko!

    I made according changes to class-breadcrumb.php, but the new separator is not fully shown.
    $separator = '<span class="sep"> >> </span>';

    Only one “>” char is shown instead of “>>” and I’d like to change the color for the separator to be white, while the link to main page before the separator should be #996633 color. Check my link to see the current result.

    Kind regards

    #1185741

    Hi Flow9999,

    Can you try this instead:

    $separator = '<span class="sep"> » </span>';

    As for the main page before the separator color, please replace this part of the code I gave:

    #top .avia-breadcrumbs span {
        display: inline-block;
        float: none
    }

    to:

    #top .avia-breadcrumbs span {
        color: #996633;
        display: inline-block;
        float: none
    }

    Best regards,
    Nikko

    #1185744

    Thanks Nikko!

    I implemented your modifications. The “»” char is only shown displayed with the first half. The second half appears to be cut off somehow.
    The color changes affect separator and the link to main page before, so I need some way to only change separator color.
    Separator should be white and the link to main page before #996633
    Kind regards

    • This reply was modified 1 month, 2 weeks ago by  Flow9999.
    #1185752

    Hi Flow9999,

    Please replace the >> with (remove the spaces in between), I didn’t notice it was rendered after I posted it:

    & r a q u o ;

    As for the separator color and the main link color, just make sure the order of your css is like this:

    #top .avia-breadcrumbs span {
      // some properties here
    }
    
    #top .avia-breadcrumbs span.sep {
      // some properties here
    }

    Hope this helps.

    Best regards,
    Nikko

    #1185768

    Separator color works now with white :)
    Unfortunatly the “»” char is still only displayed with the first half ( I used & r a q u o ; without spaces)
    Maybe there is some sort of limited amount of characters or pixel that can be displayed in breadcrumbs?

    • This reply was modified 1 month, 2 weeks ago by  Flow9999.
    #1185888

    Hi Flow9999,

    I see, I think the width in this CSS (I think this is in Quick CSS) is causing the issue:

    .breadcrumb .sep {
        display: block;
        overflow: hidden;
        width: 8px;
    }

    Please remove it and that should fix it :)

    Best regards,
    Nikko

    #1185891

    width: 12px;
    That did the trick, works fine now :-)
    Thanks alot Nikko, I appreciate your effort!

    • This reply was modified 1 month, 1 week ago by  Flow9999.
    • This reply was modified 1 month, 1 week ago by  Flow9999.
    #1185900

    Hi Flow9999,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

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

The topic ‘Breadcrumb Shortcode optimization’ is closed to new replies.