Layouts

Recent Posts

` you'll find `
• ` elements wrapped in Liquid conditionals. These represent each of the possible links you can currently add to the sidebar. #### Example of Twitter link ```html {% if author.twitter %}
• Twitter
{% endif %} ``` To add a new link you'll need three things: 1. Destination URL 2. [Font Awesome icon](http://fontawesome.io/icons/) (`fa-` class) 3. Label for the link It's up to you if you want to wrap it in a `{% if %} ... {% endif %}`conditional and add variables to `_config.yml`. If you don't plan to change it then hard-coding the strings is perfectly acceptable. Let's run through how you'd add a new link that points to a Reddit profile. Starting with the three things from above: 1. `https://www.reddit.com/user/username` 2. [`fa-reddit`](http://fontawesome.io/icon/reddit/) 3. `Reddit` And plug them into the appropriate locations: ```html
• [3]
``` To end up with: ```html
• Reddit
```  To add a touch of color to the default black (`#000`) icon a few more steps are necessary. Start by opening `/assets/_scss/_utilities.scss` to the icon section (it's near the bottom). You'll want to nest a new class beneath `.social-icons` that matches the one used to declare the Font Awesome icon. In our case `.fa-reddit`. Simply add a `color` declaration and the corresponding hex code and recompile `main.css` following the steps outlined in the [stylesheet documentation](https://igards.github.io/docs/stylesheets/). ```scss .social-icons { .fa-reddit { color: #ff4500; } } ```  **ProTip:** For bonus points you can add it as a Sass `$variable` that you set in `_variables.scss` like the other ["brand" colors](http://brandcolors.net/). {: .notice--info} **Please please please** don't submit [pull requests](https://igards.github.io/docs/contributing/) adding in support for "missing" social media links. I'm trying to keep things down to the minimum (hence the theme's name) and have no interest in merging such PRs . {: .notice--warning} ### Custom Sidebar Content Blocks of content can be added by using the following under `sidebar`: | Name | Description | | ---- | ----------- | | **title** | Title or heading. | | **image** | Image path placed in `/images/` folder or an external URL. | | **image_alt** | Alternate description for image. | | **text** | Text. Markdown is allowed. | Multiple blocks can also be added by following the example below: ```yaml sidebar: - title: "Title" image: http://placehold.it/350x250 image_alt: "image" text: "Some text here." - title: "Another Title" text: "More text here." ```



**Note:** Custom sidebar content added to a post or page's YAML Front Matter will appear below the author profile if enabled with `author_profile: true`. {: .notice--info} ### Custom Sidebar Navigation Menu To create a sidebar menu[^sidebar-menu] similar to the one found in the theme's documentation pages you'll need to modify a `_data` file and some YAML Front Matter. [^sidebar-menu]: Sidebar menu supports 1 level of nested links.



To start, add a new key to `_data/navigation.yml`. This will be referenced later in via YAML Front Matter so keep it short and memorable. In the case of the theme's documentation menu I used `docs`. **Sample sidebar menu links:** ```yaml docs: - title: Getting Started children: - title: "Quick-Start Guide" url: /docs/quick-start-guide/ - title: "Structure" url: /docs/structure/ - title: "Installation" url: /docs/installation/ - title: "Upgrading" url: /docs/upgrading/ - title: Customization children: - title: "Configuration" url: /docs/configuration/ - title: "Navigation" url: /docs/navigation/ - title: "UI Text" url: /docs/ui-text/ - title: "Authors" url: /docs/authors/ - title: "Layouts" url: /docs/layouts/ - title: Content children: - title: "Working with Posts" url: /docs/posts/ - title: "Working with Pages" url: /docs/pages/ - title: "Working with Collections" url: /docs/collections/ - title: "Helpers" url: /docs/helpers/ - title: "Utility Classes" url: /docs/utility-classes/ - title: Extras children: - title: "Stylesheets" url: /docs/stylesheets/ - title: "JavaScript" url: /docs/javascript/ ``` Now you can pull these links into any page by adding the following YAML Front Matter. ```yaml sidebar: nav: "docs" ``` **Note:** `nav: "docs"` references the `docs` key in `_data/navigation.yml` so make sure they match. {: .notice--info} If you're adding a sidebar navigation menu to several pages the use of Front Matter Defaults is a better option. You can define them in `_config.yml` to avoid adding it to every page or post. **Sample sidebar nav default:** ```yaml defaults: # _docs - scope: path: "" type: docs values: sidebar: nav: "docs" ``` --- ## Social Sharing Links The `single` layout has an option to enable social links at the bottom of posts for sharing on Twitter, Facebook, Google+, and LinkedIn. Similar to the links found in the author sidebar, the theme ships with defaults for the most common social networks.  To enable these links add `share: true` to a post or page's YAML Front Matter or use a [default](https://jekyllrb.com/docs/configuration/#front-matter-defaults) in your `_config.yml` to apply more globally. If you'd like to add, remove, or change the order of these default links you can do so by editing [`_includes/social-share.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/social-share.html). Let's say you wanted to replace the Google+ button with a Reddit one. Simply replace the HTML with the following: ```html Reddit ``` The important parts to change are: 1. Share point URL *eg. `https://www.reddit.com/submit?url=` 2. Link `title` 3. [Font Awesome icon](http://fontawesome.io/icons/) (`fa-` class) 4. Link label  To change the color of the button use one of the built in [utility classes](https://igards.github.io/docs/utility-classes/#buttons). Or you can create a new button class to match whatever color you want. Under the `$social` color map in `assets/_scss/_buttons.scss` simply add a name (this will be appened to `btn--`) that matches the new button class. In our case `reddit` ~> `.btn--reddit`. ```scss $social: (facebook, $facebook-color), (twitter, $twitter-color), (google-plus, $google-plus-color), (linkedin, $linkedin-color); (reddit, #ff4500;) ``` **ProTip:** For bonus points you can add it as a Sass `$variable` that you set in `_variables.scss` like the other ["brand" colors](http://brandcolors.net/). {: .notice--info} Add the new `.btn--reddit` class to the `` element from earlier, [compile `main.css`](https://igards.github.io/docs/stylesheets/) and away you go. ```html Reddit ```