Block social - change social network icons

[nanowax]

hello,

 

I'm edditing default-bootstrap theme in presta 1.6.0.5 and I need to change icons from Block Social (fb, twitter, g+, ... in footer), because it looks horrible in green background, but I can't find the source file to replace them.

 

Can anyone tell me, in with folder and file I find these icon ?

 

Thank you

 

 

[vekia]

and I need to change icons from

because it looks horrible in green background, but I can't find the source file to replace them

 

 

so, what you exactly expect?

you want to change icons design?

you've got some alternatives?

[nanowax]

I have default icons on the shop, and I want to replace them by my icons, but I don't know, where I replace them, because from source I see only this

<section id="social_block">
    <ul>
        <li class="facebook">
            <a href="facebook link" target="_blank">
                <span>
                    Facebook
                </span>
            </a>
        </li>
        <li class="youtube">
            <a href="Youtubelink">
                <span>
                    YouTube
                </span>
            </a>
        </li>
    </ul>
    <h4>
        Následujte nás   //Follow us
    </h4>
</section>

[wmh90]

I'm with the same doubt.

 

I tried changes in the global.css but not success.

 

Let's wait the experts

[vekia]

 

I have default icons on the shop, and I want to replace them by my icons, but I don't know, where I replace them, because from source I see only this

<section id="social_block">
    <ul>
        <li class="facebook">
            <a href="facebook link" target="_blank">
                <span>
                    Facebook
                </span>
            </a>
        </li>
        <li class="youtube">
            <a href="Youtubelink">
                <span>
                    YouTube
                </span>
            </a>
        </li>
    </ul>
    <h4>
        Následujte nás   //Follow us
    </h4>
</section>

 

hello

your icons are a part of font awesome?

 

you have to change css styles

icons are defined in css styles as a "content" code (font awesome)

if you want to replace them with own images, remove "content" in css definition, replace it with background:url('url to your icon')

[wmh90]

Vekia, I tryied this but it didn't work.

 

Imagine what I could be doing wrong?

 

my code:

          .footer-container #footer #social_block ul li.facebook a:before {
            background: url(http://www.trashmashers.com.br/loja/img/c-facebook.png); }

I don't know how to use the '../img' so I use the entire url

 

I tryed with and without quotes on the url :/

[vekia]

Vekia, I tryied this but it didn't work.

 

Imagine what I could be doing wrong?

 

my code:

          .footer-container #footer #social_block ul li.facebook a:before {
            background: url(http://www.trashmashers.com.br/loja/img/c-facebook.png); }

I don't know how to use the '../img' so I use the entire url

 

I tryed with and without quotes on the url :/

 

can you share url to page where you use these styles?

[wmh90]

I'm under maintenance mode, as I have my store by 4 years, I need to let it this way.

There's a way I can share with you this way?

[vekia]

you can add my ip address to allowed, then i will be able to check it :-)

check pm

[wmh90]

Thanks, check it out:

 

www.trashmashers.com.br/loja

[wmh90]

I have backed it to normal.

I just added the code in css again.

Now it shouldn't appear.

[PSfever.com]

Hi,

 

is it Prestashop's default theme?

I believe that the problem is the color of the icons?

If so, then go to themes/default-bootstrap/global.css line 6868

 .footer-container #footer #social_block ul li a {
            display: inline-block;
            color: #908f8f;
            font-size: 28px; }

change the value of color to a different one.

[wmh90]

No PSfeve.com

 

This isn't what I need.

I want to replace the icon from the font to one image, but this is not working, I don't know why.

[vekia]

Thanks, check it out:

 

www.trashmashers.com.br/loja

 

for me it's still under maintenance

Thanks, check it out:

 

www.trashmashers.com.br/loja

 

for me it's still under maintenance

[wmh90]

for me it's still under maintenance

 

for me it's still under maintenance

humm

 

I add your ip again, check it out now please.

If this doesn't work I try to add one login for you.

[vekia]

humm

 

I add your ip again, check it out now please.

If this doesn't work I try to add one login for you.

 

it started to work!

many thanks

 

 

do the magic with:

 

.footer-container #footer #social_block ul li.facebook a{

            background: url(http://www.trashmashers.com.br/loja/img/c-facebook.png); 

            height:40px;

            width:40p

            }

            footer-container #footer #social_block ul li.facebook{

              height:40px; width:40px;

            }

[wmh90]

Just a little correction, is missing a x in px;

 

This is the right code to who need replace the font with an image for the footer social block:

.footer-container #footer #social_block ul li.facebook a{
     background: url(http://www.trashmashers.com.br/loja/img/c-facebook.png); 
     height:40px;
     width:40px;
     }
      footer-container #footer #social_block ul li.facebook{
         height:40px; width:40px;
         }

Thanks vekia, you're the man!

[Whispar1]

Vekia, I just tried this method but for some reason the custom icons are not displaying.

Any thoughts on what I missed? http://www.whispardesign.com

[vekia]

you use relative path "../../graphics/pinterest-icon.png"
does this file exist?

[Whispar1]

Yes, it does. Here is my css section in global.css

<!--Custom Social Icons -->
.footer-container #footer #social_block ul li.facebook a{
	background: url(../../graphics/facebook-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.facebook{
	height:48px; width:48px;
}

.footer-container #footer #social_block ul li.twitter a{
	background: url(../../graphics/twitter-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.twitter{
	height:48px; width:48px;
}

.footer-container #footer #social_block ul li.pinterest a{
	background: url(../../graphics/pinterest-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.pinterest{
	height:48px; width:48px;
}

.footer-container #footer #social_block ul li.google plus a{
	background: url(../../graphics/gplus-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.google plus{
	height:48px; width:48px;
}

[Whispar1]

Also Vekia, Only two of the icons I added are showing and not facebook or google+

[Whispar1]

Another issue is none of the icons show up on secure pages (i.e. cart or checkout process)

[Whispar1]

Bump

[jjryeste]

Hello i have change icons in the footer

 

http://www.punto-de-cruz.es/

 

but as I can separate a little, are very close

Thank you.

[Whispar1]

Add

margin-right: 5px; 

to this section of code:

.footer-container #footer #social_block ul li

And since you were able to get all your icons to show, perhaps you can tell me why only my custom facebook and google+ icons are not showing up? 

http://www.whispardesign.com

Edited October 16, 2014 by Whispar1 (see edit history)

[jjryeste]

i have add margin-right: 5px;   and not found

 

.footer-container #footer #social_block ul li {
          float: left;
          width: 48px;
          height:48px
          margin-right: 5px;
          text-align: center; }
          @media (min-width: 768px) and (max-width: 991px) {
            .footer-container #footer #social_block ul li {
              width: 30px; } }
 

[ivanpeque111]

Me ha desaparecido el logo de facebook, me podéis decir como añadirlo y la ruta exacta .

 

Gracias