Bloggers use different tools to connect with their readers, engage in discussion with them, and create a loyal following of fans. These tools range from fully blown social web apps like twitter to old school RSS feeds.
Bloggers add a social media widget to their blog which has links to all their social media profiles; inviting readers to engage with them else where on the web too. Most social widgets are loud and obtrusive. Their colors and placement takes away readers’ attention from the actual content.
Elegant understands the importance of readers engagement but it makes sure not to push author’s “online social karma” down readers’ throats.
Elegant displays the widget in the sidebar. Each icon is a link to a social media profile with an appropriate title attribute. Icons use muted color which changes when user hovers over them.
Elegant uses scalable vector icons from Font Awesome. You can instantly customize the icons by tweaking the CSS. This customization can range from changing size and color to adding drop shadow.
How to configure the widget¶
SOCIAL in your
SOCIAL is list of tuple. Each tuple
has two items, title and URL.
SOCIAL = (('Twitter', 'http://twitter.com/talham_'), ('Github', 'http://github.com/talha131'))
In this example,
SOCIAL has two tuples. First tuple is
('Twitter', 'http://twitter.com/talham_'). First element of the tuple is the title
Elegant picks icons from Font Awesome. Title of the tuple, for example
fa-twitter CSS class,
Github will use
You can see all the icons and their corresponding CSS classes in Font Awesome documentation.
How to customize the icon¶
What if the icon of your social media site is not available in Font Awesome?
What if the CSS class name does not follow
fa-<title> convention, for example
Stack Exchange is different from
fa-stack-exchange? What if you want to use
fa-youtube-play in place of
fa-youtube for your YouTube profile?
The solution is to add a third element to the tuple. CSS class name.
SOCIAL = (('Twitter', 'http://twitter.com/talham_', 'twitter-square'), ('Youtube', 'http://example.com', 'youtube-play'))
This third element is optional. It should be equal to the Font Awesome CSS
class that you want to use for the social profile, minus the
fa part from the
CSS class name.
How to customize Social Profile Label¶
By default, Elegant labels social profile section as Contact. You can
change this label by defining a new variable
SOCIAL_PROFILE_LABEL in your
SOCIAL_PROFILE_LABEL = u'Stay in Touch'