Jump to content

Block social - change social network icons


nanowax
 Share

Recommended Posts

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 :)

 

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

  • 4 weeks later...

 

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')

Share this post


Link to post
Share on other sites

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 :P

 

I tryed with and without quotes on the url :/

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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{
            height:40px;
            width:40p
            }
            footer-container #footer #social_block ul li.facebook{
              height:40px; width:40px;
            }

;)

  • Like 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

  • 2 months later...

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;
}

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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; } }
 

Share this post


Link to post
Share on other sites

  • 2 months later...
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More