Diagrams
Use this shortcode to insert diagrams in your content:
Summary: defines the summary text for your diagram
Type: choose the type of diagram to be displayed – lines/bars or circles.
Content: here you can edit the conten of your diagram by editing its shortcode
{"title":"Skill1","amount":"70","color":"#ff0000"}
{"title":"Skill2","amount":"70","color":"#ffff00"}
{"title":"Skill3","amount":"70","color":"#ff00ff"}
{"title":"Skill4","amount":"70","color":"#f0f0f0"}
- tag
{gem_skill}
defines one parameter/value/skill to be displayed in diagram. You can add as much values/skills as you wish - attribute “title” inside of tag [skill] defines the label/title of this parameter/skill
- attribute “color” defines the color whioch should be used in diagram to represent this parameter/skill
- attribute “amount” defines the value in percent of this parameter/skill
Style: choose one of three pre-made styles of displaying horizontal (line) diagrams
Useful CSS
Circle
Legend colors and font-size:
.diagram-circle .diagram-legend .legend-element .title {
font-size: 14px !important;
font-weight: 300;
color: #ccc;
line-height: 2;
}
Line
Legend colors and font-size:
.digram-line-box .skill-title {
font-size: 15px;
font-weight: 100;
color: #ccc;
}
Style-1 background color:
.digram-line-box {
background-color: #eee;
}
Skill – line background color:
.diagram-wrapper .digram-line-box .skill-line {
background-color: #ccc !important;
}
You can modify this css and insert it in Theme Options -> Custom CSS to apply on all diagrams:
To apply this custom CSS on a single content element only, use the "Extra class name" field in this element in WPBakery:
The example of the css selector for the "custom-diagram" class name in this case:
.custom-diagram .digram-line-box .skill-title {
font-size: 15px;
font-weight: 100;
color: #ccc;
}