CODEWITHSUNDEEP
graphicsiconsfooterbigcartel
Ruthie Fn
Ruthie Fn

Reputation: 11

removing twitter icon on big Cartel footer nav

using Big Cartel Ranger theme. I would like to have the Mailing list at the top of my social links on the footer nav, preferably with an envelope icon. The reason it has the twitter icon is because it has been input via the basic Settings within big Cartel, and I have simply modified the title from Twitter to Mailing List via the layout code, see screengrab: [enter image description here]

Please be patient! I stumble my way through any code changes through trial and *mostly *error!

I have been in touch with Big Cartel support and they were asking me to remove the Layout code that relates to twitter (pasted below) and put a simple link in, which obviously didn't work. Below is the coding that relates to the twitter link on footernav.

{% if theme.twitter_url != blank or theme.facebook_url != blank or theme.instagram_url != blank or theme.tumblr_url != blank or theme.pinterest_url != blank %}
\<nav class="footernav"aria-label="Footer social media navigation"\>
\<div class="footer-nav-title"\>Social\</div\>
<ul class="social-icons">
{% if theme.twitter_url != blank %}
<li><a href="{{ theme.twitter_url }}" title="Mailing List">\<svg xmlns="http://www.w3.org/2000/svg
" width="24" height="24" viewBox="0 0 24 24"\>\<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.61 1.798-1.574 2.165-2.724-.95.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.18 0-5.515 2.966-4.797 6.045C7.727 8.088 4.1 6.128 1.67 3.15.38 5.36 1.003 8.256 3.195 9.722c-.806-.026-1.566-.247-2.23-.616-.053 2.28 1.582 4.415 3.95 4.89-.693.188-1.452.232-2.224.084.626 1.957 2.444 3.38 4.6 3.42-2.07 1.623-4.678 2.348-7.29 2.04 2.18 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.72 13.995-14.646.962-.695 1.797-1.562 2.457-2.55z"/\>\</svg\>\<span\>Mailing List\</span\></a></li>
{% endif %}

As above, I simply amended the title to Mailing List from Twitter. I also tried removing the w3.org link and inputting my image link, as follows: https://www.dropbox.com/s/rtxpa88q75wpmz2/Envelope.jpg?dl=0 but the icon remained. I also removed everything from <svg to </svg> and that removed the icon. I then tried to input my dropbox link and removing the <path to z"/> and it didn't change anything further.

I think it requires further change in CSS. There is one section that mention social icons and it appears all are 'locked in' within their w3.org link, in which case I don't think I can change it:

.footernav ul.social-icons {
list-style: none;
margin: 0;
padding: 0;
}
.footernav ul.social-icons li {
display: block;
}
.footernav ul.social-icons li a {
color: {{ theme.accent_text_color }};
display: block;
}
.footernav ul.social-icons li a span {
display: inline-block;
margin-left: 8px;
}
.footernav ul.social-icons li a svg {
\-webkit-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
display: inline-block;
fill: {{ theme.accent_text_color }};
height: 16px;
opacity: 0.6;
position: relative;
top: 3px;
width: 16px;
}
.footernav ul.social-icons li a:hover svg {
opacity: 1;
}

Any help appreciated, thanks in advance!

Upvotes: 0

Views: 142

Answers (1)

Azy
Azy

Reputation: 21

This one took me a while to figure out when I was editing my own icons, but it's easy to change! For this particular theme, there are two Twitter code bits you'll want to change under Layout.

So to switch the icons associated with the Twitter link, you'll want to take out this SVG code on or around lines 147 and 252 (depending on if you've implemented more code) of your Layout:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.61 1.798-1.574 2.165-2.724-.95.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.18 0-5.515 2.966-4.797 6.045C7.727 8.088 4.1 6.128 1.67 3.15.38 5.36 1.003 8.256 3.195 9.722c-.806-.026-1.566-.247-2.23-.616-.053 2.28 1.582 4.415 3.95 4.89-.693.188-1.452.232-2.224.084.626 1.957 2.444 3.38 4.6 3.42-2.07 1.623-4.678 2.348-7.29 2.04 2.18 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.72 13.995-14.646.962-.695 1.797-1.562 2.457-2.55z"/></svg>

Be sure to leave the < a > tags around them! Now, you'll want to replace those SVG code bits with the following in both places, to which I used a free envelope icon from Font Awesome:

<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>

This should get you the results you're wanting with that envelope on both desktop and mobile. :) Let me know if this works for you!

Upvotes: 0

Related Questions