# Socila links in jekyll main page at the bottom

**URL:** <https://talk.jekyllrb.com/t/socila-links-in-jekyll-main-page-at-the-bottom/7248>\
**Category:** Help\
**Created:** [April 19, 2022, 7:00pm UTC](https://talk.jekyllrb.com/t/socila-links-in-jekyll-main-page-at-the-bottom/7248 "2022-04-19T19:00:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adrian6](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@Adrian6](https://talk.jekyllrb.com/u/Adrian6)\
**Post date:** [April 19, 2022, 7:00pm UTC](https://talk.jekyllrb.com/t/socila-links-in-jekyll-main-page-at-the-bottom/7248/1 "2022-04-19T19:00:55Z")

</div>

Hi,

I’m new in jekyll community I try to figured it how to do some but with no result. I’m using jekyll in no-style-please theme. My page looks like this:

 ![www](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/6/6e4632a0739e6864124ea715342387651cefcef0.jpeg)

I would like using some codes or svg icon add my linkedn account and the github repo. I read about the I should add footer.html in \_includes then make new entry in \_config.yml using social\_links text. But all of this cost my a week of attempts with no result. Maybe in this theme it’s not possible to add things like this, but I think it’s unlikely. Can someone show step by step how to properly add it? and yes I was using a google in time when I was trying fix it by myself 🙂

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [April 20, 2022, 5:32am UTC](https://talk.jekyllrb.com/t/socila-links-in-jekyll-main-page-at-the-bottom/7248/2 "2022-04-20T05:32:01Z")

</div>

you can certainly do that, but there are lot of ways to go about it. A quick look at that theme shows it does not have a footer, so if you want to add that (as an include would be good) and put them there that would work. You could then include the footer at the bottom of the default layout which should make it show on every page.

As for adding stuff into the config, you could do that or you could just put it in the footer. Adding things to the config is more for making something universal - so another person using YOUR theme could change it easily rather than having to find it in the footer include.

I’d encourage you to do some jekyll tutorials videos on youtube to get an understanding of how it all works. Just focusing on one theme may make it hard to understand what is happening. There is a really old youtube series that was awesome - maybe 20 different 10 minute videos, most of that would still apply. There are likely new ones as well I’m sure.

---

<div class="post-metadata">

**Author:** ![BillRaymond](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/billraymond/32/5963_2.png) [@BillRaymond](https://talk.jekyllrb.com/u/BillRaymond)\
**Post date:** [April 20, 2022, 3:43pm UTC](https://talk.jekyllrb.com/t/socila-links-in-jekyll-main-page-at-the-bottom/7248/3 "2022-04-20T15:43:25Z")

</div>

If it is possible to share your repo (GitHub, GitLab, etc.), that would be helpful, and we can help you come up with a solution for your specific scenario. That said, here is a basic approach you want to take:

I assume you have at least one layout you are using in the `_layouts` folder, and for this post, I will assume you call it `default.html`. Inside the HTML `<body>` tag, I assume you will display the content for the post, so you have a page that looks something like this:

`./layouts/default.html`

```auto
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My podcast</title>
</head>
<body>
    {% comment %} display the post content {% endcomment %}
    {{ content }}
</body>
</html>

```

If that is _all_ you are doing, then you could write some HTML that adds the footer to the bottom of your page directly underneath the `{{ content }}` element.

If you have more than one layout and want the footer to be more reusable, you would add the footer content as an include. Create a folder at the root of your Jekyll site named `_includes` and then create a file called whatever you want, like `footer.html`. Inside that footer, you might want to add a little HTML semantic section so you can style it (like make a slightly different background color, set default font styles, etc.). The code would look like this:

`./includes/footer.html`

```auto
<footer class="sitefooter">
    Add your html code here
</footer>

```

Now, your new layout will look like this:

`./_layouts/default.html`

```auto
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My podcast</title>
</head>
<body>
    {% comment %} display the post content {% endcomment %}
    {{ content }}
    {%- include footer.html -%}
</body>
</html>

```

That is all you need to do. Using the `_config.yml` file is useful if you want to store some commonly used data, like the link to your LinkedIn site, but that is _not_ a requirement. You can do something as simple as writing the HTML code in the `footer.html` file without ever using `_config.yml`.

---

<div class="post-metadata">

**Author:** ![Adrian6](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@Adrian6](https://talk.jekyllrb.com/u/Adrian6)\
**Post date:** [April 24, 2022, 2:46pm UTC](https://talk.jekyllrb.com/t/socila-links-in-jekyll-main-page-at-the-bottom/7248/4 "2022-04-24T14:46:12Z")

</div>

Hello,

Thanks for respond. I try to fix some stuff by myself. And now it looks better.

 ![1](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/4/476776635e010f4f45a0373be21b53a245e3963d.jpeg)

but I would like replace this = /////// this border-line:

 ![2](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/1/124171c9bd951680add949ac3df11655da019a85.jpeg)

I try to use inspect on this page and find the code, and I did:

}  
.site-footer {  
border-top: 1px solid #e8e8e8;  
padding: 30px 0;  
}

but it’s in css and in my footer.html I used html. Also I would like to delete this underlines:

![3](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/2/201478188d8ea9610c5b8af3b022f5ad0adc680b.jpeg)

but I don’t know how.

In my jekyll would I did to make the footer was creating footer.html file in \_includes. My code below:

 ![obraz](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/3/34e4bc98644b0f6347b3638a54fd7d0bc3ebc920.png)

Probably it’s messy code I’m not a programmer everything what I need to have I google. I will be appreciate to help mi with this 2 things, if the repo of my site is still necessary I upload it on my github.

---

<div class="post-metadata">

**Author:** ![BillRaymond](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/billraymond/32/5963_2.png) [@BillRaymond](https://talk.jekyllrb.com/u/BillRaymond)\
**Post date:** [April 25, 2022, 7:36pm UTC](https://talk.jekyllrb.com/t/socila-links-in-jekyll-main-page-at-the-bottom/7248/5 "2022-04-25T19:36:25Z")

</div>

I wonder if that is because hrefs have an underline style?

See if this article helps:

> <https://stackoverflow.com/questions/12528316/removing-underline-with-href-attribute>

---

<div class="post-metadata">

**Author:** ![Adrian6](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@Adrian6](https://talk.jekyllrb.com/u/Adrian6)\
**Post date:** [April 29, 2022, 7:40pm UTC](https://talk.jekyllrb.com/t/socila-links-in-jekyll-main-page-at-the-bottom/7248/7 "2022-04-29T19:40:23Z")

</div>

Thank You Bill for help 🙂 ! I almost resolve my all issues 🙂

Maybe You know how to put my own text into main page sidebar not the default, I mean something like this:

![capture2](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/6/6ea83efef36ec853764347b98d6623b11df9ffd6.jpeg)