ArtcoInc Posted October 3, 2014 Share Posted October 3, 2014 Can someone point me to where the breadcrumb separator is defined? I would like to change the default ' / ' to a ' >> '. Link to comment Share on other sites More sharing options...
De Dokta Posted October 3, 2014 Share Posted October 3, 2014 Hi add to the user.css: .breadcrumb > li + li:before { content: ">>";} or if you prefer unicode: .breadcrumb > li + li:before { content:"\003E \003E";} J.J. Link to comment Share on other sites More sharing options...
ArtcoInc Posted October 4, 2014 Author Share Posted October 4, 2014 Perfect ... Thank you! I also changed the color to match the <a > setting so the entire line was the same ... .breadcrumb > li + li:before { content:"\003E \003E"; color: #428bca; } Malcolm Link to comment Share on other sites More sharing options...
♥GLWalker Posted October 4, 2014 Share Posted October 4, 2014 I'll have to try this next time. I always placed what I wanted as a separator like so: $breadcrumb->trail( -my awesome separator that beats the crud out of yours here - ) I now see it does not work on the bootstrapped version. Must be the Bootstrap.css over riding it? Follow the community build: BS3 to osCommerce Responsive from the Get Go! Check out the new construction: Admin Gone to Total BS! Link to comment Share on other sites More sharing options...
ArtcoInc Posted October 4, 2014 Author Share Posted October 4, 2014 I put this in the user.css file, which overrides all prior .css files. I also looked up a couple of different Unicode symbols: U+226B U+27EB Both are variations of combining the two " > " symbols into a single symbol. I'm sure you can find something in the Unicode table that would be awesome! :) http://unicode-table.com/en/ Malcolm Link to comment Share on other sites More sharing options...
MrPhil Posted October 4, 2014 Share Posted October 4, 2014 The double closing guillemet (>>) is Latin-1 \BB or Unicode \00BB. If you give an HTML named entity, & raquo; will work with any encoding, as will & #x00BB; or & #187;. Note that this is the UFT-16 code number, which is what HTML wants regardless of the page encoding. Just a word of caution: make sure if you must give a hard-coded (binary) character in CSS or HTML/PHP that it matches the encoding that your page will be displayed in (or, it's UTF-16 and guaranteed to be converted to the proper display encoding). I've seen so many complaints about templates and such where someone typed in, say, a >> using Latin-1 encoding, and then someone else tries using this code for a UTF-8 page display, and they get the dreaded "?-in-black-diamond" invalid character glyph. HTML and PHP code must have either named or numeric HTML entities, and never anything outside the ASCII range (x00-x7F) as binary characters. I don't know offhand what the CSS rules are, but if you stick to Unicode (UTF-16 values) it is probably OK (if it was tested and worked in the examples given). Incidentally, U+226B is "math much greater than" and U+27EB is "math double closing angle bracket". U+00BB has traditionally been used as a breadcrumb separator, simply because it was available in Latin-1. I personally prefer U+21D2 (right pointing double arrow) because it is more semantically meaningful, but the choice is yours. I still don't trust this forum software not to expand the entities I gave, so I stuck and extra space after the the &. Link to comment Share on other sites More sharing options...
De Dokta Posted October 4, 2014 Share Posted October 4, 2014 I do not know if it's bootstrap specific or generally for css applies: When I wanted to change my breadcrumb separator, I have thoroughly tested the usual html entities in all known variants, but none of them worked! Apart from the hardcoded version Unicode seems to be the only working solution - in any case the only one I could find........ J.J. Link to comment Share on other sites More sharing options...
broadstreetbully Posted March 2, 2015 Share Posted March 2, 2015 thanks!! it was driving me crazy...the only thing I had to change was ".breadcrumb" to "#header+div .ui-widget-header" and it worked. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.