Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 4, 2020 at 7:15 pm #1181459
    Flow9999

    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!

    February 4, 2020 at 9:33 pm #1181551
    Victoria

    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

    February 16, 2020 at 4:19 pm #1184981
    Flow9999

    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/

    February 17, 2020 at 5:44 am #1185087
    Nikko

    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

    February 18, 2020 at 2:55 am #1185494
    Flow9999

    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 4 years, 9 months ago by Flow9999.
    February 18, 2020 at 9:23 am #1185562
    Nikko

    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

    February 18, 2020 at 2:34 pm #1185668
    Flow9999

    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

    February 18, 2020 at 5:05 pm #1185741
    Nikko

    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

    February 18, 2020 at 5:24 pm #1185744
    Flow9999

    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 4 years, 9 months ago by Flow9999.
    February 18, 2020 at 5:41 pm #1185752
    Nikko

    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

    February 18, 2020 at 6:41 pm #1185768
    Flow9999

    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 4 years, 9 months ago by Flow9999.
    February 19, 2020 at 2:26 am #1185888
    Nikko

    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

    February 19, 2020 at 3:12 am #1185891
    Flow9999

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

    • This reply was modified 4 years, 9 months ago by Flow9999.
    February 19, 2020 at 4:13 am #1185900
    Nikko

    Hi Flow9999,

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

    Best regards,
    Nikko

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Breadcrumb Shortcode optimization’ is closed to new replies.