How to style data elements

  • Resolved john.cressman

    (@johncressman)


    7 years, 6 months ago

    How do you style the individual elements in the breadcrumbs. I need a very specific look but I need to access the CSS for each element, but I can’t find exactly how to access it or my css is being overwritten.

    What’s the proper way of styling each element?

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author John Havlik

    (@mtekk)

    If you are using the recommended,and default settings for your breadcrumb templates, then each breadcrumb will be wrapped in span tags. You should be able to target them with the .breadcrumbs span CSS rule. Breadcrumb NavXT does not ship with any CSS, so styling is left completely to the theme. Thus, CSS styles need to be added to your theme’s (or child theme’s) style.css. If you are having issues getting CSS rules to apply, I suggest using your web browser’s built in inspector to help you diagnose what is going on.

    Thread Starter john.cressman

    (@johncressman)

    Thank you. I believe I’ve figured it out… and how to style the last item differently.

    
.breadcrumbs a {
  border: 2px solid #000099; 
  border-radius: 5px;
  background: #000099; 
  color: #ffffff;  
  margin-top: 10px;   
  font-size: 20px;
}

.breadcrumbs a:hover {
  border: 2px solid #000099; 
  border-radius: 5px;
  background: #ffffff; 
  color: #000099;  
  margin-top: 10px;   
  font-size: 20px;
  text-decoration: none;
}

.breadcrumbs span:last-child a {
  border: 2px solid #000099; 
  border-radius: 5px;
  background: #ffffff; 
  color: #000099;  
  margin-top: 10px;   
  font-size: 20px;
  text-decoration: none;
}
    • This reply was modified 7 years, 6 months ago by john.cressman.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to style data elements’ is closed to new replies.

Tags