Comments

• 

  thaen

  Posts: 1,072 April 2020

  @Keryth987,

  My strong suit is not css, but give this a try in your custom css and see if it does what you want.

  
  .ui-accordion-header.ui-state-hover, .ui-accordion-header.ui-state-active {
    border: 1px solid #cccccc;
  }
  
  .ui-accordion-header-icon.ui-icon {
    background-image: url("../assets/images/ui-icons_222222_256x240.png");
  }

   

  Obsidian Portal Developer
• 

  Keryth987

  Posts: 1,047 April 2020

  Thanks but that didnt seem to work.

  

  

  
• 

  thaen

  Posts: 1,072 April 2020

  @Keryth987, that's really odd.  I tested it out on my test campaign and it did what I thought you were wanting...changed the outline and hover coloring of the accordion from "yellow" to "gray/black", including the expand/collapse triangle.

  Did you notice any changes to the coloring at all?  Or was there something specific that wasn't working?

  I don't see the custom css I posted in the css on your campaign.  Can you add that css back and let me know when you have so I can take a look and see what might be affecting it?

  Obsidian Portal Developer
• 

  Kallak

  Posts: 1,090 April 2020

  Here's a snippet from the CSS on one of my campaigns to change the border and background color for the accordions. I made a lot of other changes, but this should work for you regardless.

  
  /* UI ITEMS */
  .ui-accordion h3 {
  	background:none;
  	border:1px solid #00c2d9;
  }
  .ui-widget-content {
  	background-image: none;
  	background-color: transparent;
  	border-right-color: #00c2d9;
  	border-left-color: #00c2d9;
  	border-bottom-color: #00c2d9;
  }

  A thing to note is that I did not change the little arrow/icon for that particular campaign, so if you are wanting to change that as well, you'll need to switch the background image that it is being pulled from. There are a few default options you can choose from (as seen in the image files assignments below), or you can make, host and then call your own image file to do something more individiaul/unique.

  
  .ui-icon,
  .ui-widget-content .ui-icon {
   background-image:url("images/ui-icons_222222_256x240.png")
  }
  .ui-widget-header .ui-icon {
   background-image:url("images/ui-icons_ffffff_256x240.png")
  }
  .ui-state-default .ui-icon {
   background-image:url("images/ui-icons_ef8c08_256x240.png")
  }
  .ui-state-hover .ui-icon,
  .ui-state-focus .ui-icon {
   background-image:url("images/ui-icons_ef8c08_256x240.png")
  }
  .ui-state-active .ui-icon {
   background-image:url("images/ui-icons_ef8c08_256x240.png")
  }
  .ui-state-highlight .ui-icon {
   background-image:url("images/ui-icons_228ef1_256x240.png")
  }
  .ui-state-error .ui-icon,
  .ui-state-error-text .ui-icon {
   background-image:url("images/ui-icons_ffd27a_256x240.png")
  }

   

  All the best,
  - Kallak
  
• 

  Keryth987

  Posts: 1,047 April 2020

  That seemed to work. Thanks