Close

Customizing Heroes Assemble Style with CSS

Here are a list of CSS I’ve prepared for you that you can use it right away to customize the styling (color, font size, etc) of your heroes.

 

All you need to do is copy the CSS codes, change the value of the CSS properties, and add it into your website.

 

If you’re not sure where to add custom css in your website, please use this plugin: https://wordpress.org/plugins/simple-custom-css/

CSS for Layout

Style 1

/* 1. Name */
#layers-heroes-assemble .lhea-member-style-1 .lhea-member-picture .lhea-member-name-position .lhea-member-name { 
  font-size: 12px; 
  color: #000; 
  background: #fff; 
} 

/* 2. Position */
#layers-heroes-assemble .lhea-member-style-1 .lhea-member-picture .lhea-member-name-position .lhea-member-position { 
  font-size: 12px; 
  color: #000; 
  background: #fff; 
} 

/* 3. View Profile button - icon color */
#layers-heroes-assemble  .lhea-member-style-1 .lhea-external-link .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-1 .lhea-modal-trigger .fa-stack-2x { 
  color: #000; 
}

/* 3. View Profile button - background color */
#layers-heroes-assemble  .lhea-member-style-1 .lhea-external-link .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-1 .lhea-modal-trigger .fa-stack-1x { 
  color: #fff; 
}

/* 3. View Profile button - icon color (on hover) */
#layers-heroes-assemble  .lhea-member-style-1 .lhea-external-link:hover .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-1 .lhea-modal-trigger:hover .fa-stack-2x { 
  color: #fff; 
}

/* 3. View Profile button - background color (on hover) */
#layers-heroes-assemble  .lhea-member-style-1 .lhea-external-link:hover .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-1 .lhea-modal-trigger:hover .fa-stack-1x { 
  color: #000; 
}

/* 4. Social Links - background color */
#layers-heroes-assemble .lhea-member-style-1 ul.lhea-member-social { 
  background: #fff; 
}

/* 4. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-1 ul.lhea-member-social a { 
  color: #000; 
}

/* 4. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-1 ul.lhea-member-social a:hover { 
  color: #9e0000; 
}

Style 2

/* 1. Background color for Name & Position */
#layers-heroes-assemble .lhea-member-style-2 .lhea-member-details { 
  background: #9e0000; 
} 

/* 1. Background color for Name & Position (on hover) */
#layers-heroes-assemble .lhea-member-style-2:hover .lhea-member-details { 
  background: #000; 
} 

/* 2. Name */
#layers-heroes-assemble .lhea-member-style-2 .lhea-member-name { 
  font-size: 12px; 
  color: #000; 
} 

/* 2. Name (on hover) */
#layers-heroes-assemble .lhea-member-style-2:hover .lhea-member-name { 
  color: #fff; 
} 

/* 3. Position */
#layers-heroes-assemble .lhea-member-style-2 .lhea-member-position { 
  font-size: 12px; 
  color: #000; 
} 

/* 3. Position (on hover) */
#layers-heroes-assemble .lhea-member-style-2:hover .lhea-member-position { 
  color: #fff; 
} 

/* 4. View Profile button - icon color */
#layers-heroes-assemble  .lhea-member-style-2 .lhea-external-link .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-2 .lhea-modal-trigger .fa-stack-2x { 
  color: #000; 
}

/* 4. View Profile button - background color */
#layers-heroes-assemble  .lhea-member-style-2 .lhea-external-link .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-2 .lhea-modal-trigger .fa-stack-1x { 
  color: #fff; 
}

/* 4. View Profile button - icon color (on hover) */
#layers-heroes-assemble  .lhea-member-style-2 .lhea-external-link:hover .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-2 .lhea-modal-trigger:hover .fa-stack-2x { 
  color: #fff; 
}

/* 4. View Profile button - background color (on hover) */
#layers-heroes-assemble  .lhea-member-style-2 .lhea-external-link:hover .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-2 .lhea-modal-trigger:hover .fa-stack-1x { 
  color: #000; 
}

/* 5. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-2 ul.lhea-member-social a { 
  color: #999;  
}

/* 5. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-2 ul.lhea-member-social a:hover { 
  color: #fff; 
}

Style 3

/* 1. Name */
#layers-heroes-assemble .lhea-member-style-3 .lhea-member-name { 
  font-size: 12px; 
  color: #000; 
}

/* 2. Position */
#layers-heroes-assemble .lhea-member-style-3 .lhea-member-position { 
  font-size: 12px; 
  color: #000; 
}

/* 3. View Profile button - icon color */
#layers-heroes-assemble  .lhea-member-style-3 .lhea-external-link .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-3 .lhea-modal-trigger .fa-stack-2x { 
  color: #000; 
}

/* 3. View Profile button - background color */
#layers-heroes-assemble  .lhea-member-style-3 .lhea-external-link .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-3 .lhea-modal-trigger .fa-stack-1x { 
  color: #fff; 
}

/* 3. View Profile button - icon color (on hover) */
#layers-heroes-assemble  .lhea-member-style-3 .lhea-external-link:hover .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-3 .lhea-modal-trigger:hover .fa-stack-2x { 
  color: #fff; 
}

/* 3. View Profile button - background color (on hover) */
#layers-heroes-assemble  .lhea-member-style-3 .lhea-external-link:hover .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-3 .lhea-modal-trigger:hover .fa-stack-1x { 
  color: #000; 
}

/* 4. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-3 ul.lhea-member-social a { 
  color: #999;  
}

/* 4. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-3 ul.lhea-member-social a:hover { 
  color: #fff; 
}

Style 4

/* 1. Background color for Name & Position */
#layers-heroes-assemble .lhea-member-style-4 .lhea-member-details { 
  background: #9e0000; 
} 

/* 2. Name */
#layers-heroes-assemble .lhea-member-style-4 .lhea-member-name { 
  font-size: 12px; 
  color: #000; 
} 

/* 3. Position */
#layers-heroes-assemble .lhea-member-style-4 .lhea-member-position { 
  font-size: 12px; 
  color: #000; 
} 

/* 4. View Profile button - icon color */
#layers-heroes-assemble  .lhea-member-style-4 .lhea-external-link .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-4 .lhea-modal-trigger .fa-stack-2x { 
  color: #000; 
}

/* 4. View Profile button - background color */
#layers-heroes-assemble  .lhea-member-style-4 .lhea-external-link .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-4 .lhea-modal-trigger .fa-stack-1x { 
  color: #fff; 
}

/* 4. View Profile button - icon color (on hover) */
#layers-heroes-assemble  .lhea-member-style-4 .lhea-external-link:hover .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-4 .lhea-modal-trigger:hover .fa-stack-2x { 
  color: #fff; 
}

/* 4. View Profile button - background color (on hover) */
#layers-heroes-assemble  .lhea-member-style-4 .lhea-external-link:hover .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-4 .lhea-modal-trigger:hover .fa-stack-1x { 
  color: #000; 
}

/* 5. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-4 ul.lhea-member-social a { 
  color: #999;  
}

/* 5. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-4 ul.lhea-member-social a:hover { 
  color: #fff; 
}

Style 5

/* 1. Name */
#layers-heroes-assemble .lhea-member-style-5 .lhea-member-name { 
  font-size: 12px; 
  color: #fff; 
} 

/* 2. Position */
#layers-heroes-assemble .lhea-member-style-5 .lhea-member-position { 
  font-size: 12px; 
  color: #fff; 
} 

/* 3. View Profile button - icon color */
#layers-heroes-assemble  .lhea-member-style-5 .lhea-external-link .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-5 .lhea-modal-trigger .fa-stack-2x { 
  color: #000; 
}

/* 3. View Profile button - background color */
#layers-heroes-assemble  .lhea-member-style-5 .lhea-external-link .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-5 .lhea-modal-trigger .fa-stack-1x { 
  color: #fff; 
}

/* 3. View Profile button - icon color (on hover) */
#layers-heroes-assemble  .lhea-member-style-5 .lhea-external-link:hover .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-5 .lhea-modal-trigger:hover .fa-stack-2x { 
  color: #fff; 
}

/* 3. View Profile button - background color (on hover) */
#layers-heroes-assemble  .lhea-member-style-5 .lhea-external-link:hover .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-5 .lhea-modal-trigger:hover .fa-stack-1x { 
  color: #000; 
}

/* 4. Social Links - background color */
#layers-heroes-assemble .lhea-member-style-5 ul.lhea-member-social { 
  background: #fff; 
}

/* 4. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-5 ul.lhea-member-social a { 
  color: #999;  
}

/* 4. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-5 ul.lhea-member-social a:hover { 
  color: #000; 
}

Style 6

/* 1. Name */
#layers-heroes-assemble .lhea-member-style-6 .lhea-member-name { 
  font-size: 12px; 
  color: #000;
} 

/* 2. Position */
#layers-heroes-assemble .lhea-member-style-6 .lhea-member-position { 
  font-size: 12px; 
  color: #fff; 
  background: #000; 
} 

/* 3. View Profile button - icon color */
#layers-heroes-assemble  .lhea-member-style-6 .lhea-external-link .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-6 .lhea-modal-trigger .fa-stack-2x { 
  color: #000; 
}

/* 3. View Profile button - background color */
#layers-heroes-assemble  .lhea-member-style-6 .lhea-external-link .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-6 .lhea-modal-trigger .fa-stack-1x { 
  color: #fff; 
}

/* 3. View Profile button - icon color (on hover) */
#layers-heroes-assemble  .lhea-member-style-6 .lhea-external-link:hover .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-6 .lhea-modal-trigger:hover .fa-stack-2x { 
  color: #fff; 
}

/* 3. View Profile button - background color (on hover) */
#layers-heroes-assemble  .lhea-member-style-6 .lhea-external-link:hover .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-6 .lhea-modal-trigger:hover .fa-stack-1x { 
  color: #000; 
}

/* 4. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-6 ul.lhea-member-social a { 
  color: #000; 
}

/* 4. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-6 ul.lhea-member-social a:hover { 
  color: #9e0000; 
}

Style 7

/* 1. Box Background color */
#layers-heroes-assemble .lhea-member-style-7 { 
  background: #000; 
} 

/* 1. Box Background color (on hover) */
#layers-heroes-assemble .lhea-member-style-7:hover  { 
  background: #ddd; 
} 

/* 2. Name */
#layers-heroes-assemble .lhea-member-style-7 .lhea-member-name { 
  font-size: 12px; 
  color: #fff; 
} 

/* 2. Name (on hover) */
#layers-heroes-assemble .lhea-member-style-7:hover .lhea-member-name { 
  color: #000; 
} 

/* 3. Position */
#layers-heroes-assemble .lhea-member-style-7 .lhea-member-position { 
  font-size: 12px; 
  color: #fff; 
} 

/* 3. Position (on hover) */
#layers-heroes-assemble .lhea-member-style-7:hover .lhea-member-position { 
  color: #000; 
} 

/* 4. View Profile button */
#layers-heroes-assemble  .lhea-member-style-7 .lhea-external-link, 
#layers-heroes-assemble  .lhea-member-style-7 .lhea-modal-trigger { 
  color: #fff;
  border-color: #fff;
}

/* 4. View Profile button (on hover) */
#layers-heroes-assemble  .lhea-member-style-7 .lhea-external-link:hover, 
#layers-heroes-assemble  .lhea-member-style-7 .lhea-modal-trigger:hover { 
  color: #9e0000;
  border-color: #9e0000;
  background: none;
}

/* 5. Social Links - background color */
#layers-heroes-assemble .lhea-member-style-7 ul.lhea-member-social { 
  background: #fff; 
}

/* 5. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-7 ul.lhea-member-social a { 
  color: #999;  
}

/* 5. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-7 ul.lhea-member-social a:hover { 
  color: #000; 
}

Style 8

/* 1. Name */
#layers-heroes-assemble .lhea-member-style-8 .lhea-member-name { 
  font-size: 12px; 
  color: #000; 
} 

/* 2. Position */
#layers-heroes-assemble .lhea-member-style-8 .lhea-member-position { 
  font-size: 12px; 
  color: #000; 
} 

/* 3. View Profile button - icon color */
#layers-heroes-assemble  .lhea-member-style-8 .lhea-external-link .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-8 .lhea-modal-trigger .fa-stack-2x { 
  color: #000; 
}

/* 3. View Profile button - background color */
#layers-heroes-assemble  .lhea-member-style-8 .lhea-external-link .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-8 .lhea-modal-trigger .fa-stack-1x { 
  color: #fff; 
}

/* 3. View Profile button - icon color (on hover) */
#layers-heroes-assemble  .lhea-member-style-8 .lhea-external-link:hover .fa-stack-2x, 
#layers-heroes-assemble  .lhea-member-style-8 .lhea-modal-trigger:hover .fa-stack-2x { 
  color: #fff; 
}

/* 3. View Profile button - background color (on hover) */
#layers-heroes-assemble  .lhea-member-style-8 .lhea-external-link:hover .fa-stack-1x, 
#layers-heroes-assemble  .lhea-member-style-8 .lhea-modal-trigger:hover .fa-stack-1x { 
  color: #000; 
}

/* 4. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-8 ul.lhea-member-social a { 
  color: #fff;
  background: #000;
}

/* 4. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-8 ul.lhea-member-social a:hover { 
  color: #fff; 
  background: #9e0000;
}

Style 9

/* 1. Background color for Name & Position */
#layers-heroes-assemble .lhea-member-style-9 .lhea-member-name-position { 
  background: #9e0000; 
} 

/* 2. Name */
#layers-heroes-assemble .lhea-member-style-9 .lhea-member-name-position .lhea-member-name { 
  font-size: 12px; 
  color: #000; 
} 

/* 3. Position */
#layers-heroes-assemble .lhea-member-style-9 .lhea-member-name-position .lhea-member-position { 
  font-size: 12px; 
  color: #000; 
} 

/* 4. View Profile button */
#layers-heroes-assemble  .lhea-member-style-9 .lhea-external-link, 
#layers-heroes-assemble  .lhea-member-style-9 .lhea-modal-trigger { 
  background: #000; 
  color: #fff;
}

/* 4. View Profile button (on hover) */
#layers-heroes-assemble  .lhea-member-style-9 .lhea-external-link:hover, 
#layers-heroes-assemble  .lhea-member-style-9 .lhea-modal-trigger:hover { 
  color: #000; 
  background: #fff;
}

/* 5. Social Links - background color */
#layers-heroes-assemble .lhea-member-style-9 ul.lhea-member-social { 
  background: #f1f1f1;  
}

/* 5. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-9 ul.lhea-member-social a { 
  color: #999;  
}

/* 5. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-9 ul.lhea-member-social a:hover { 
  color: #000; 
}

Style 10

/* 1. Name */
#layers-heroes-assemble .lhea-member-style-10 .lhea-member-name-position .lhea-member-name { 
  font-size: 12px; 
  color: #999;
} 

/* 2. Position */
#layers-heroes-assemble .lhea-member-style-10 .lhea-member-name-position .lhea-member-position { 
  font-size: 12px; 
  color: #999; 
} 

/* 3. View Profile button */
#layers-heroes-assemble  .lhea-member-style-10 .lhea-external-link, 
#layers-heroes-assemble  .lhea-member-style-10 .lhea-modal-trigger { 
  background: #000; 
  color: #fff;
}

/* 3. View Profile button (on hover) */
#layers-heroes-assemble  .lhea-member-style-10 .lhea-external-link:hover, 
#layers-heroes-assemble  .lhea-member-style-10 .lhea-modal-trigger:hover { 
  color: #000; 
  background: #fff;
}

/* 4. Social Links - icon color */
#layers-heroes-assemble .lhea-member-style-10 ul.lhea-member-social a { 
  color: #999; 
}

/* 4. Social Links - icon color (on hover) */
#layers-heroes-assemble .lhea-member-style-10 ul.lhea-member-social a:hover { 
  color: #9e0000; 
}

CSS for Team Selector

Style 1

/* 1. button (normal state) */
#layers-heroes-assemble .lhea-sorting-style-1 .lhea-term-filter {
    font-size: 12px;
	color: #000;
  	background: #ddd;
}

/* 2. button (on hover) */
#layers-heroes-assemble .lhea-sorting-style-1 .lhea-term-filter:hover {
	color: #fff;
  	background: #000;
}

/* 2. button (activated) */
#layers-heroes-assemble .lhea-sorting-style-1 .lhea-term-filter:focus, 
#layers-heroes-assemble .lhea-sorting-style-1 .lhea-term-filter.filter-activated {
	color: #fff;
  	background: #000;
}

Style 2

/* 1. button (normal state) */
#layers-heroes-assemble .lhea-sorting-style-2 .lhea-term-filter {
  	font-size: 12px;
	color: #000;
}

/* 2. button (on hover) */
#layers-heroes-assemble .lhea-sorting-style-2 .lhea-term-filter:hover {
	color: #fff;
  	background: #000;
}

/* 2. button (activated) */
#layers-heroes-assemble .lhea-sorting-style-2 .lhea-term-filter:focus, 
#layers-heroes-assemble .lhea-sorting-style-2 .lhea-term-filter.filter-activated {
	color: #fff;
  	background: #000;
}

Style 3

/* 1. button (normal state) */
#layers-heroes-assemble .lhea-sorting-style-3 .lhea-term-filter {
	color: #000;
}

/* 2. button (on hover) */
#layers-heroes-assemble .lhea-sorting-style-3 .lhea-term-filter:hover {
	color: #fff;
  	background: #000;
    border-color: #000;
}

/* 2. button (activated) */
#layers-heroes-assemble .lhea-sorting-style-3 .lhea-term-filter:focus, 
#layers-heroes-assemble .lhea-sorting-style-3 .lhea-term-filter.filter-activated {
	color: #9e0000;
  	border-color: #9e0000;
}

Style 4

/* 1. button (normal state) */
#layers-heroes-assemble .lhea-sorting-style-4 .lhea-term-filter {
	color: #000;
}

/* 2. button (on hover) */
#layers-heroes-assemble .lhea-sorting-style-4 .lhea-term-filter:hover {
	color: #9e0000;
  	border-color: #9e0000;
  	background: none;
}

/* 2. button (activated) */
#layers-heroes-assemble .lhea-sorting-style-4 .lhea-term-filter:focus, 
#layers-heroes-assemble .lhea-sorting-style-4 .lhea-term-filter.filter-activated {
	color: #9e0000;
  	border-color: #9e0000;
  	background: none;
}

Style 5

/* 1. button (normal state) */
#layers-heroes-assemble .lhea-sorting-style-5 .lhea-term-filter {
    font-size: 12px;
	color: #000;
  	background: #ddd;
}

/* 2. button (on hover) */
#layers-heroes-assemble .lhea-sorting-style-5 .lhea-term-filter:hover {
	color: #fff;
  	background: #000;
}

/* 2. button (activated) */
#layers-heroes-assemble .lhea-sorting-style-5 .lhea-term-filter:focus, 
#layers-heroes-assemble .lhea-sorting-style-5 .lhea-term-filter.filter-activated {
	color: #fff;
  	background: #000;
}

Style 6

/* 1. selector */
#layers-heroes-assemble .lhea-sorting-style-6 .lhea-filter-select-wrapper {
    font-size: 12px;
	color: #000;
  	background: #ddd;
}

CSS for Popup Modal

/* 0. popup modal - background */
.lhea-modal-container .lhea-modal-contents {
 	background: #000; 
}

/* 1. Name */
.lhea-modal-container .lhea-modal-contents .lhea-modal-picture-hover .lhea-modal-name {
	font-size: 12px; 
  	background: #ddd;
  	color: #000;
}

/* 2. Position */
.lhea-modal-container .lhea-modal-contents .lhea-modal-picture-hover .lhea-modal-position {
	font-size: 12px; 
  	background: #000;
  	color: #fff;
}

/* 3. Social links - background */
.lhea-modal-container .lhea-modal-contents ul.lhea-modal-social {
	 background: #000;
}

/* 3. Social links - icon color */
.lhea-modal-container .lhea-modal-contents ul.lhea-modal-social a {
 	color: #999; 
}

/* 3. Social links - icon color (on hover) */
.lhea-modal-container .lhea-modal-contents ul.lhea-modal-social a:hover {
 	color: #fff; 
}

/* 4. Profile Area - background */
.lhea-modal-container .lhea-modal-contents .lhea-modal-post_contents {
	background: #ddd;  
}

/* 4. Profile Area - text color */
.lhea-modal-container .lhea-modal-contents .lhea-modal-post_contents,
.lhea-modal-container .lhea-modal-contents .lhea-modal-post_contents p {
	color: #999;  
}

/* 5. Skills - background */
.lhea-modal-container .lhea-modal-contents .lhea-modal-skills {
	background: #9e0000; 
}

/* 5. Skills - title */
.lhea-modal-container .lhea-modal-contents .lhea-modal-skills .lhea-modal-skills-headline {
	color: #000;
  	font-size: 12px;
}

/* 5. Skills - bar */
.lhea-modal-container .lhea-modal-contents .lhea-modal-skill .lhea-modal-skill-bar {
	background: #000;
  	color: #999;
  	font-size: 12px;
}

/* 6. Additional Info Section - background */
.lhea-modal-container .lhea-modal-contents ul.lhea-modal-extra {
	background: #000; 
}

/* 6. Additional Info Section - text color */
.lhea-modal-container .lhea-modal-contents ul.lhea-modal-extra li {
	color: #999; 
}

/* 6. Additional Info Section - link color */
.lhea-modal-container .lhea-modal-contents ul.lhea-modal-extra li a {
	color: #ddd; 
}

/* 6. Additional Info Section - link color (on hover) */
.lhea-modal-container .lhea-modal-contents ul.lhea-modal-extra li a:hover {
	color: #fff; 
}
Loading...

Loading...