Change breadcrumb home icon to text = Home?

net1994net1994 Major grinsPosts: 269Registered Users Major grins

Hi All - I want to replace the breadcrumb home page icon, to text that just says 'Home' or the like. Then it would show as 'Home>Folder>Gallery.....' I searched here, google and can't find the CSS for this. Or even better, if I can keep the home icon and right next to it add 'Home' all on the same line.

Thanks

Candy For Your Eyes @ Paint By Pixels

http://www.paintbypixels.com

Comments

  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    Anyone?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • MarcQuinlivanMarcQuinlivan Beginner grinner IrelandPosts: 47Registered Users Big grins
    .sm-user-ui .sm-page-widget .sm-breadcrumbs:before {
        content: "Home" !important;
    }
    .sm-user-ui .sm-page-widget .sm-breadcrumbs .sm-breadcrumb-item .sm-button .sm-icon-Home {
        display: none !important;
    }
    
  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    Hi Marc - That didn't do it. I played around with the text/css and no dice. Any other ideas?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • MarcQuinlivanMarcQuinlivan Beginner grinner IrelandPosts: 47Registered Users Big grins

    Works for me.

    Have you set it in global CSS?

  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    Hello - Yes I added it to the 'entire site' CSS. See pic below. I also have a Theme set for my mobile CSS customizations. Should I also put it in there? Also I was curious, how were you able to modify my site as I see you do have the 'Home' crumb visible?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 12,242Super Moderators moderator

    @net1994 said:
    Also I was curious, how were you able to modify my site as I see you do have the 'Home' crumb visible?

    You can use web developer tools in browsers to experiment with changes to sites. I often use Web Developer in Firefox.

  • MarcQuinlivanMarcQuinlivan Beginner grinner IrelandPosts: 47Registered Users Big grins

    @net1994 said:
    Hello - Yes I added it to the 'entire site' CSS. See pic below. I also have a Theme set for my mobile CSS customizations. Should I also put it in there? Also I was curious, how were you able to modify my site as I see you do have the 'Home' crumb visible?

    Can you add it to the very top of your CSS block, just in case it is nested inside another piece of code that is not applying?

    I can't see the code on your page at the minute - have you removed it again?

    I use the developer tools in Chrome to fiddle with the CSS - I don't actually have access to your site's code directly.

    Have you clicked Customize at the top and then "content and design" and on the right hand pane selected "Entire Site" and edited the CSS there? It looks to me like you are only editing the CSS block for a single page.

  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    Hi Marc - I moved the code to the top of my css block. Now it has the text 'Home' instead of the icon. However when you actually click on the text, it doesn't take you to the home page.
    Aslo I was wondering if there is a way to keep the home icon, and then still put the text 'Home' to the right of it?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • MarcQuinlivanMarcQuinlivan Beginner grinner IrelandPosts: 47Registered Users Big grins

    oh hang on....

    you can't add html to the content block.

    just remove the

    .sm-user-ui .sm-page-widget .sm-breadcrumbs .sm-breadcrumb-item .sm-button .sm-icon-Home {
        display: none !important;
    }
    

    to keep the icon

  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    That got the home icon back, thanks! Though when I click on the text Home, it still doesn't take me to the home page. I was hoping to be able to use both the text and icon for redirect to the home page.

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • MarcQuinlivanMarcQuinlivan Beginner grinner IrelandPosts: 47Registered Users Big grins

    Just need to figure out how to put home after the home button rather than before it.

  • MarcQuinlivanMarcQuinlivan Beginner grinner IrelandPosts: 47Registered Users Big grins

    @net1994 said:
    That got the home icon back, thanks! Though when I click on the text Home, it still doesn't take me to the home page. I was hoping to be able to use both the text and icon for redirect to the home page.

    Yeah ,that's the bit we need to figure out how to add the "Home" text inside the link where the home icon is.

Sign In or Register to comment.