Hello,
Can anyone suggest me how to add different colors to the glyphicons and title in the widget instances( apart from bootstrap color)
should be modified like below image
Can anyone guide me how to add color to the title and glyphicons.
Quick help would be highly appreciable!
Thanks,
Prerana
Hi Prerna,
You can inspect the element and then add the color to the icons.by navigating to the page in which you have to add the colors then add the css there.
Fro example:
on the page right click and select inspect
Copy the element from right side the n add the color in the page(say these wiget are present in the index page) so go the index page and add the css there.
as shwon below:
.fa-book:before {
content: "\f02d";
color:blue;
}
Output:
Mark helpful and correct if it helps.
Thanks,
CB
Hi Prerana,
OOB its not possible to change the font color with the page CSS as shown in the screenshot.
As you can see that there they have added the class to the icons but not with the title.
If you wan't to proceed with the cloning of the widget then you have to do this workaround.
Clone the icon link widget and change the html code like this:
HTML code: [note: replace the HTML code in the cloned icon link widget--]
here i have added the {{::options.class_name}} in the <h2> tags.
<div class="iconlink" ng-class="{'high-contrast': accessibilityModeEnabled}">
<!--// Top Icon -->
<a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-href="{{::data.href}}" class="top_icon {{::options.class_name}}" target="{{::data.target}}">
<div class="m-b fa fa-{{::options.glyph}} fa-4x text-{{::options.color}}"></div>
<h2 class="{{::options.class_name}}">{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>
<!--// Circle Icon -->
<a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}" class="circle_icon text-{{::options.color}}" target="{{::data.target}}">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
</span>
<h2 class="{{::options.class_name}}">{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>
<!--// Color Box -->
<a ng-if="::(options.link_template == 'Color Box')" ng-href="{{::data.href}}" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" target="{{::data.target}}">
<div class="fa fa-{{::options.glyph}} fa-3x "></div>
<h2 class="{{::options.class_name}}">{{::options.title}}</h2>
<span>{{::options.short_description}}</span>
</a>
</div>So what it does it it will add the class to the h2 tags.
When you add this icon link widget to the page then it will create a widget instances(Navigate to -- widget instances).
In that you can define the class name and update in the page with that class which you did earlier.
Widget instance class name update: [Note: here you have to update the class name ] like i have added here know_class
Update the same in the page so in that case each icon link will have different class and you can add that.
.know_class{
color:blue;
}
Mark helpful and correct if it helps.
Thanks,
CB
