Just switched to Chrome and i can see the icons now. How strange i cannot seem to see them on Firefox

I would tighten up the spacing a bit via the css file and you should be good to go.

Andy

Please feel free to review / rate our software

Thanks Andy will do

Have a good weekend

Also trying to add these.
I am just using the css you have in the example, however the Facebook buttons are bigger than all the rest. I tried setting the height in the css file, but that doesn't seem to help. How can I set the Facebook buttons to be 21 px like the ask a question and email a friend buttons?


Version: Ecommerce Plus PHP v6.7

Hi Crystal,

See the bottom of page 1 of this post - https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=106606

cheers
Ross

Ross Fraser
ross@chain-me-up.com.au
https://www.chain-me-up.com.au

I am having similar issues with these buttons.

They are in a box, all the same size, all lined up, nice and tidy in your example.

the sample says, use below code for the screen shot above. I put everything in exactly as your suggest.

BUT when you add everything they look nothing like the example. They are different sizes, not aligned in way, baseline or middle etc.

Chrome: They jump above the prev next line when I placed them after that prevnext and are stacked up all weirdly.. it's a mess!
Safari and IE: it looks correct in placement but sizes are still an issue.
Firefox: ask a wuestion and email a friend show up, tweet word show up but not the icon and FB and LI icons are completely missing

i have the line the css in the proddetail page area, not in response or mobile layouts.

i have also tried to add css elements to adjust the height, etc.. but to no avail.. they just still look terrible and inconsistent.

Help!

Michelle L Cosen

Hi Michelle

Can you show us where you have them set up?

Andy

Please feel free to review / rate our software

I didn't want to make that hot mess live.. to be honest.

This is the order that I want but seems to not like it. The socialmedia between previousnext and description.
I tried adding heights to the individual buttons and I have no idea what to do about the jumbled layout. It acts like it's not clearing the prev next line? but I am not sure how to force it to always clear it.


vsadmin/includes.php the below are in this file

$detailpagelayout='navigation, productimage, manufacturer, productname, discounts, listprice, price, currency, options, minquantity, quantity, checkoutbutton, previousnext, socialmedia, description, reviewstars, reviews';

$socialmediabuttons="askaquestion,emailfriend, facebook,linkedin,twitter";


CSS lines added under /* The product detail page
-------------------------------------*/ area
input.askaquestion, input.emailfriend{
background:#1F3284;
color:#fff;
height:21px;
border:0;
border-radius:4px;
font-size:12px;
cursor:pointer;
margin-top:7px;
}


div.socialmediabuttons{margin:10px 8px;background:#fff;width:94%;float:left;padding:4px;}
The css for the individual buttons uses something like this
div.socialmediabutton{float:left;display:inline-block;padding:6px;}
div.socialaskaquestion{margin-top:1px;}
div.sociallinkedin{margin-top:9px}
div.socialfacebook{margin-top:9px}
div.socialtwitter{margin-top:9px}
div.socialgoogle{margin-top:6px}




Michelle L Cosen

That should work fine but there is another method you could try, kindly suggested near the end of this thread by dbdave https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=107608

Andy

Please feel free to review / rate our software

With regard to social media buttons I have used AddThis on a number of my clients ECT websites.

One line of code from the website owners AddThis account added in to one of the Custom Fields and the icons all line up perfectly irrespective of screen size the site is being viewed on. Also there is no CSS to be getting ones hands dirty with!

Personally, I think the AddThis icons look more consistent.

Will - Bolton Manchester UK

https://www.cpcsigns.com/proddetail.php?prod=Brite-Max-Multi-View-Post-Reflectors

I moved the line of icons below the reviews as above description throws them all out of whack and place them above prev/next area. These do not display in all browsers as mentioned before in this post. The live link above shows that they do not display as your example and the fb buttons are larger. I really want these above the description and too function like the example in looks. I do not want to download or add some new widget or add-on program. I just want it to work as the ecomm instructions say it should. any insight would be appreciated.

Michelle L Cosen

Is that the correct URL as I can't get a page up. Is it working for anyone else?

Andy

Please feel free to review / rate our software

try google chrome or IE. IT is aware that firefox and safari are not responding and are looking into it..

Michelle L Cosen

I can't view it in any browser I'm afraid.

Andy

Please feel free to review / rate our software

Nothing loading from that link nor is there a site loading from cpcsigns.com :-(

Steve
Using ECT PHP versions since 2004 / 5

Reported to the IT - the server person. stay tuned.

Michelle L Cosen

So you are in another country and the firewall won't let you see our site.

Michelle L Cosen

The site loads fine here, but really the CSS for the social media buttons is a piece of cake if you use my flexbox tip.
Just a few lines of css and those pesky buttons will fall into place.

Try this nugget of css

div.socialmediabuttons{margin:5px; width:94%; float:left; display:flex; justify-content:center; align-items:center; flex-wrap:wrap}
div.socialmediabutton{padding:4px;}

David

quote:

---

So you are in another country and the firewall won't let you see our site.

---

Yes, I am in the UK, North West England

Steve
Using ECT PHP versions since 2004 / 5