Custom CSS Style

Danny Koppenhagen edited this page Dec 31, 2017 · 3 revisions

TagCloud

You can adjust the css style of the tag cloud. Just add a (new) CSS file and add it to your parents-containers metadata:

@Component({
  selector: 'my-component',
  styleUrls: ['my.component.css']
})

The file my.component.css could look like that:

/* General Layout */
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

angular-tag-cloud.custom-css {
  font-family: 'Amatic SC';
  font-size: 12px;
  background: #2C2C2C url("../assets/blackboard.jpg") no-repeat;
  background-size: 100% auto;
}

/* no decoration for links */
angular-tag-cloud.custom-css > span > a {
  text-decoration: none;
}
 /* font sizes */
angular-tag-cloud.custom-css > span.w10 { font-size: 550%; }
angular-tag-cloud.custom-css > span.w9  { font-size: 500%; }
angular-tag-cloud.custom-css > span.w8  { font-size: 450%; }
angular-tag-cloud.custom-css > span.w7  { font-size: 400%; }
angular-tag-cloud.custom-css > span.w6  { font-size: 350%; }
angular-tag-cloud.custom-css > span.w5  { font-size: 300%; }
angular-tag-cloud.custom-css > span.w4  { font-size: 250%; }
angular-tag-cloud.custom-css > span.w3  { font-size: 200%; }
angular-tag-cloud.custom-css > span.w2  { font-size: 150%; }
angular-tag-cloud.custom-css > span.w1  { font-size: 100%; }

/* colors */
angular-tag-cloud.custom-css > a        { color: inherit; }
angular-tag-cloud.custom-css > a:hover  { color: rgb(255, 255, 255); }
angular-tag-cloud.custom-css > span.w10 { color: #0cf; }
angular-tag-cloud.custom-css > span.w9  { color: #fff; }
angular-tag-cloud.custom-css > span.w8  { color: rgb(255, 0, 195); }
angular-tag-cloud.custom-css > span.w7  { color: rgb(36, 154, 116); }
angular-tag-cloud.custom-css > span.w6  { color: #e8f090; }
angular-tag-cloud.custom-css > span.w5  { color: #c3dd90; }
angular-tag-cloud.custom-css > span.w4  { color: #f09090; }
angular-tag-cloud.custom-css > span.w3  { color: #f2ea10; }
angular-tag-cloud.custom-css > span.w2  { color: #ee99e7; }
angular-tag-cloud.custom-css > span.w1  { color: #18cb42; }
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.