Changes from 1.5 to 1.63 (or current version)
Permalink Browser Info Environment
I just updated from 1.52 or 1.53 to the current version, I think that is 1.63? This is the only change I made and my breadcrumbs now display as a vertical list rather than the horizontal way they did just prior to the update. I use auto-nav at top level pages below home, set the child displays, and select the Breadcrumb Devoda SEO block type, which is how the site was originally created. So, first question, has the class type or something else in the HTML changed with the newer versions that might cause a difference? I am looking now to see if I have an CSS script in injected to handle this prior. Was just odd that my template or I had it handled and the update changed something that it is no longer handled. My thanks, love your work.
| Type: | Ticket |
|---|---|
| Status: | In Progress |
This makes plenty of sense. I have spent an inordinate amount of time trying to find the 'less' file that has any of the UL or LI css codes in it, let alone an ordered list or breadcrumb attribute. I think all I need is a CSS line for the list that says 'display: inline' and yet I cannot seem to find the place to interject this. I don't know if there is a simple place to find this out.? Thanks for such a fast reply. Best. David.
Hi there,
A real real simple example, which you should probably still style some more, but is a start...
Hope that helps you out a bit?
Kind regards
Ramon
A real real simple example, which you should probably still style some more, but is a start...
.breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin-bottom: 1rem; list-style: none; }
Hope that helps you out a bit?
Kind regards
Ramon
That was very helpful. For others like me (that do this infrequently) the way to input a custom CSS is to go to a page, select the gear (not the pencil icon) to edit properties, select the theme, and under the theme icon should be a customize link.
This takes us to a list of all kinds of things that can be changed, and the last item is custom CSS. When I added the CSS and saved the changes it asked if I wanted to do so for the page or the entire site. By clicking the entire site, the custom CSS was populated everywhere.
I typically clear the cache (under system settings) next to be sure everyone gets fresh code.
Now my last (hopefully) question is by using this CSS snippet the spaces are removed between the '>' and the links. I.e., Home>Test1>Test2 where as I would prefer the old way which was Home > Test 1 > Test 2. It is also too far to the right, but I think that would be block padding.
Is there good CSS to add here that might add space to the items? I am thinking of trying right-margin so that there is extra room to the right of everything..??
This takes us to a list of all kinds of things that can be changed, and the last item is custom CSS. When I added the CSS and saved the changes it asked if I wanted to do so for the page or the entire site. By clicking the entire site, the custom CSS was populated everywhere.
I typically clear the cache (under system settings) next to be sure everyone gets fresh code.
Now my last (hopefully) question is by using this CSS snippet the spaces are removed between the '>' and the links. I.e., Home>Test1>Test2 where as I would prefer the old way which was Home > Test 1 > Test 2. It is also too far to the right, but I think that would be block padding.
Is there good CSS to add here that might add space to the items? I am thinking of trying right-margin so that there is extra room to the right of everything..??
That was very helpful. For others like me (that do this infrequently) the way to input a custom CSS is to go to a page, select the gear (not the pencil icon) to edit properties, select the theme, and under the theme icon should be a customize link.
This takes us to a list of all kinds of things that can be changed, and the last item is custom CSS. When I added the CSS and saved the changes it asked if I wanted to do so for the page or the entire site. By clicking the entire site, the custom CSS was populated everywhere.
I typically clear the cache (under system settings) next to be sure everyone gets fresh code.
Now my last (hopefully) question is by using this CSS snippet the spaces are removed between the '>' and the links. I.e., Home>Test1>Test2 where as I would prefer the old way which was Home > Test 1 > Test 2. It is also too far to the right, but I think that would be block padding.
Is there good CSS to add here that might add space to the items? I am thinking of trying right-margin so that there is extra room to the right of everything..??
This takes us to a list of all kinds of things that can be changed, and the last item is custom CSS. When I added the CSS and saved the changes it asked if I wanted to do so for the page or the entire site. By clicking the entire site, the custom CSS was populated everywhere.
I typically clear the cache (under system settings) next to be sure everyone gets fresh code.
Now my last (hopefully) question is by using this CSS snippet the spaces are removed between the '>' and the links. I.e., Home>Test1>Test2 where as I would prefer the old way which was Home > Test 1 > Test 2. It is also too far to the right, but I think that would be block padding.
Is there good CSS to add here that might add space to the items? I am thinking of trying right-margin so that there is extra room to the right of everything..??
Thank you so much for the help! Here is my final CSS that I added. My template did not automatically deal with the breadcrumb class and then, the breadcrumb was scrunched together, so I added spacing only around the carrot so make it look more pleasing.
Hope this helps someone else!
Best.
David.
/* set breadcrumbs style to horizontal */ .breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin-bottom: 1rem; list-style: none; } /* add spacing in carot items */ .fa-angle-right { padding-right: 10px; padding-left: 10px; }
Hope this helps someone else!
Best.
David.
Hi there,
Yes, this is an option. You could do it many ways, and this is one of them. You could also do style "before/after" items within the list items. Pretty example here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Bre...
That way you don't need the angle icon in your HTML! Makes your code cleaner. You'd need the font awesome content icon to input there and apply the font family to make it look exactly the same, but depends on what you want. Perhaps you also like this arrow notation :)
Kind regards
Ramon
Yes, this is an option. You could do it many ways, and this is one of them. You could also do style "before/after" items within the list items. Pretty example here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Bre...
That way you don't need the angle icon in your HTML! Makes your code cleaner. You'd need the font awesome content icon to input there and apply the font family to make it look exactly the same, but depends on what you want. Perhaps you also like this arrow notation :)
Kind regards
Ramon
This is the changelog from 1.6.0
#v1.6.0
* Updated Auto-Nav "Breadcrumbs Devoda Seo" template, with the Schema.org guidelines implemented (data-vocabulary.org markup will no longer be eligible for Google rich result features);
So yes, minor changes to this template. Depending on your theme, it may not display as it did before. It is an <ul> (unordered list) in HTML, where before it was a "nav" element. Google guidelines (https://developers.google.com/search/docs/appearance/structured-data/breadcrumb#html_1) show it as this list too. Hence the change here, to keep in line with Google's recommendations. Should be minor changes in your CSS then! Probably search for nav or nav.breadcrumb (breadcrumb is the class which was on this nav by default).
Does that help you further?
Kind regards
Ramon