【发布时间】:2023-01-25 02:05:27
【问题描述】:
使用 Big Cartel Ranger 主题。我希望在页脚导航的社交链接顶部有邮件列表,最好带有信封图标。它有twitter图标的原因是因为它是通过big Cartel中的基本设置输入的,我只是通过布局代码将标题从Twitter修改为Mailing List,见screengrab: []
请耐心等待!我通过试验和*主要是*错误,偶然发现了任何代码更改!
我一直在联系 Big Cartel 支持,他们要求我删除与 twitter 相关的布局代码(粘贴在下面)并放入一个简单的链接,这显然不起作用。下面是与 footernav 上的 Twitter 链接相关的编码。
{% 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 %}
如上,我只是将标题修改为来自推特的Mailing List。 我还尝试删除 w3.org 链接并输入我的图像链接,如下所示:https://www.dropbox.com/s/rtxpa88q75wpmz2/Envelope.jpg?dl=0 但图标仍然存在。 我还删除了从 <svg 到 </svg> 的所有内容,并删除了图标。 然后我尝试输入我的保管箱链接并删除 <path to z"/> 并且它没有进一步改变任何东西。
我认为它需要进一步改变 CSS。有一个部分提到了社交图标,似乎所有图标都“锁定”在它们的 w3.org 链接中,在这种情况下,我认为我无法更改它:
.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;
}
任何帮助表示赞赏,在此先感谢!
【问题讨论】:
标签: graphics icons footer bigcartel