To customize Elegant’s visual style, use custom.css. You can override Elegant’s visual style like font, color, spacing etc using this sheet. This empty style sheet is present at following path in your Elegant folder,

static/css/custom.css

Find the code of the element you want to customize in elegant.css. Copy the element’s selector and styles, and paste it in custom.css. Edit this CSS code and customize it to your liking.

Your customizations will override whatever rules are defined in elegant.css.

Let’s take a look how you can change the style of hyperlinks in an article. Following is the relevant code,

article p:not(#list-of-translations):not(#post-share-links) a,
article ol a,
article div.article-content ul:not(.articles-timeline):not(.related-posts-list) a {

    border-bottom: thin dashed #A9A9A9;
    color: #000;
}

Copy and paste it in custom.css. Change color to red for example,

article p:not(#list-of-translations):not(#post-share-links) a,
article ol a,
article div.article-content ul:not(.articles-timeline):not(.related-posts-list) a {

    border-bottom: thin dashed #A9A9A9;
    color: red;
}

Test your website using Pelican. All links should be colored red.

Read this post to make sure your site’s page speed does not decrease due to additional HTTP request.

Like this post? Share on: TwitterFacebookEmail


Talha Mansoor Avatar Talha Mansoor is the creator and lead developer of Elegant theme.

Keep Reading


Published

Category

Extra Customization

Tags

Stay in Touch

Get Monthly Updates