How can I change youtube/any other social icon image in the social buttons at the footer?
Thanks.
How to Change Youtube social icon in store Footer
- 392
- 5323
- 4/22/2014
- India
Modify the file Website Root/Themes/<Your Theme Name>/Common/Footer.cshtml file
Find the following code
Change this to
Find the following code
@if (!string.IsNullOrEmpty(Model.YoutubeLink))
{
<li class="youtube"><a href="@Model.YoutubeLink" target="_blank">@T("Footer.FollowUs.Youtube")</a></li>
}
Change this to
@if (!string.IsNullOrEmpty(Model.YoutubeLink))
{
<li class="youtube"><a href="@Model.YoutubeLink" target="_blank"><img src='your icon path (relative)'/></a></li>
}
MVP
Certified Developer
- 1623
- 15968
- 11/25/2013
- Bangladesh
Kelly wrote:
In DefaultClean theme it is set by css ===> for doing this you can change css file for class
How can I change youtube/any other social icon image in the social buttons at the footer?
Thanks.
Thanks.
In DefaultClean theme it is set by css ===> for doing this you can change css file for class
.follow-us .social astyle.css file line approximate 910 ==========> you can also change class and also define your class from Footer.cshtml ====> path:
\Nop.Web\Views\Common\Footer.cshtml
- 31
- 195
- 7/3/2010
- Nigeria
Thanks RoastedBytes for your response. I did as you asked but I noticed the new icon is placed directly on top of the old youtube icon as I can see the red background of the old icon about the outline of the new icon. Secondly, it displaced the the icon by moving it a bit upwards above the rest of the icons. Can you help with that?
- 31
- 195
- 7/3/2010
- Nigeria
sohel wrote:
Hi Sohel. Thanks for being here again. I did what you asked initially, but I can't find image for the youtube icon in the style. All i saw was a reference to a sprite image.
How can I change youtube/any other social icon image in the social buttons at the footer?
Thanks.
In DefaultClean theme it is set by css ===> for doing this you can change css file for class
Thanks.
In DefaultClean theme it is set by css ===> for doing this you can change css file for class
.follow-us .social astyle.css file line approximate 910 ==========> you can also change class and also define your class from Footer.cshtml ====> path:
\Nop.Web\Views\Common\Footer.cshtml
Hi Sohel. Thanks for being here again. I did what you asked initially, but I can't find image for the youtube icon in the style. All i saw was a reference to a sprite image.
- 392
- 5323
- 4/22/2014
- India
As suggested by Sohel above, the Default theme uses CSS Sprite Image to set the social icons. You can change the icon by overriding the background image in css.
Find the following code in styles.css file
Replace this with
or if you wish to change all the social icons, you can either create another sprite image with new icons and set the background positions of each social link according or follow the above approach for each link and set the background of each image link.
Find the following code in styles.css file
.follow-us .social .youtube a {
background-position: -114px 0;
}Replace this with
.follow-us .social .youtube a {
background: url(path/to/your/icon) no-repeat;
background-position: 0 0;
}or if you wish to change all the social icons, you can either create another sprite image with new icons and set the background positions of each social link according or follow the above approach for each link and set the background of each image link.
MVP
Certified Developer
- 1623
- 15968
- 11/25/2013
- Bangladesh
Kelly wrote:
Yes. One image(social-sprite.png) for all....It is done by css. social-sprite.png is given bellow ====>http://demo.nopcommerce.com/Themes/DefaultClean/Content/images/social-sprite.png
you can change it and can set icon for per link
How can I change youtube/any other social icon image in the social buttons at the footer?
Thanks.
In DefaultClean theme it is set by css ===> for doing this you can change css file for class
Hi Sohel. Thanks for being here again. I did what you asked initially, but I can't find image for the youtube icon in the style. All i saw was a reference to a sprite image.
Thanks.
In DefaultClean theme it is set by css ===> for doing this you can change css file for class
.follow-us .social astyle.css file line approximate 910 ==========> you can also change class and also define your class from Footer.cshtml ====> path:
\Nop.Web\Views\Common\Footer.cshtml
Hi Sohel. Thanks for being here again. I did what you asked initially, but I can't find image for the youtube icon in the style. All i saw was a reference to a sprite image.
Yes. One image(social-sprite.png) for all....It is done by css. social-sprite.png is given bellow ====>http://demo.nopcommerce.com/Themes/DefaultClean/Content/images/social-sprite.png
you can change it and can set icon for per link
- 31
- 195
- 7/3/2010
- Nigeria
RoastedBytes wrote:
Worked like a charm! Thanks a bunch!
As suggested by Sohel above, the Default theme uses CSS Sprite Image to set the social icons. You can change the icon by overriding the background image in css.
Find the following code in styles.css file
Replace this with
or if you wish to change all the social icons, you can either create another sprite image with new icons and set the background positions of each social link according or follow the above approach for each link and set the background of each image link.
Find the following code in styles.css file
.follow-us .social .youtube a {
background-position: -114px 0;
}Replace this with
.follow-us .social .youtube a {
background: url(path/to/your/icon) no-repeat;
background-position: 0 0;
}or if you wish to change all the social icons, you can either create another sprite image with new icons and set the background positions of each social link according or follow the above approach for each link and set the background of each image link.
Worked like a charm! Thanks a bunch!
- 31
- 195
- 7/3/2010
- Nigeria
sohel wrote:
Thanks Sohel for your input. I believe yours would work also but I decided to opt for a simpler approach suggested by RoastedBytes as I don't want to spend so much time on this. However I'm giving you an upvote on this one. Many thanks again.
How can I change youtube/any other social icon image in the social buttons at the footer?
Thanks.
In DefaultClean theme it is set by css ===> for doing this you can change css file for class
Hi Sohel. Thanks for being here again. I did what you asked initially, but I can't find image for the youtube icon in the style. All i saw was a reference to a sprite image.
Yes. One image(social-sprite.png) for all....It is done by css. social-sprite.png is given bellow ====>http://demo.nopcommerce.com/Themes/DefaultClean/Content/images/social-sprite.png
you can change it and can set icon for per link
Thanks.
In DefaultClean theme it is set by css ===> for doing this you can change css file for class
.follow-us .social astyle.css file line approximate 910 ==========> you can also change class and also define your class from Footer.cshtml ====> path:
\Nop.Web\Views\Common\Footer.cshtml
Hi Sohel. Thanks for being here again. I did what you asked initially, but I can't find image for the youtube icon in the style. All i saw was a reference to a sprite image.
Yes. One image(social-sprite.png) for all....It is done by css. social-sprite.png is given bellow ====>http://demo.nopcommerce.com/Themes/DefaultClean/Content/images/social-sprite.png
you can change it and can set icon for per link
Thanks Sohel for your input. I believe yours would work also but I decided to opt for a simpler approach suggested by RoastedBytes as I don't want to spend so much time on this. However I'm giving you an upvote on this one. Many thanks again.