Forum Discussion

RobertT's avatar
RobertT
Boss
13 years ago

Problem targeting first element in breadcrumb with CSS

Hi Folks, 

 

We're working on the skin for our community and have updated the typeface used in the breadcrumb, this appears fine throughout the community with the exception of the Q&A App and TKB which for some reason have the first link in the breadcrumb not inheriting the CSS that the rest of the breadcrumb uses.

 

Inspecting the element, the TKB pages and Q&A App pages use the following class "crumb-EntityTypeKey[community]" which is not defined in CSS and for some reason we are unable to target this in custom CSS to modify this element to match the rest of the breadcrumb.

 

See screenshot below:

 

CSS Breadcrumb Issue

 

Any ideas how we can target the first element of the breadcrumb in CSS on the TKB and Q&A pages to apply the same attributes as the rest of the breadcrumb?

 

 

Q&A and TKB pages use the following to class properties on the first element in the breadcrumb:

<a id="link_3" class="lia-link-navigation crumb-EntityTypeKey[community]" name="pageLink119" href="/">Forum</a>

 

 

The rest of the community which displays as intended uses the following class properties:

<a id="link_4" class="lia-link-navigation crumb-community lia-breadcrumb-community lia-breadcrumb-forum" name="pageLink118" href="/">Forum>/a>

1 Reply

Sort By
  • KaelaC's avatar
    KaelaC
    Lithium Alumni (Retired)
    13 years ago

    Hmm... I see the problem there.  I'm not sure that the "crumb-EntityTypeKey[community]" class is displaying as intended or if that is a bug somewhere but I think we can solve your styling problem another way.

     

    If you apply your styles to lia-breadcrumb-node you will get all the items in the breadcrumb list

    #lia-body .lia-content .lia-component-common-widget-breadcrumb ul li.lia-breadcrumb-node {font-size: 20px;}

     

    I think you have some !important notation in your code so that will override any other thing you add. Probably best to disable that for testing.