Some Layout Issues with the Hikashop Social plugin

-- HikaShop version -- : 2.5.0
-- Joomla version -- : 3.4.3
-- PHP version -- : 5.6.9

I am using the social plugin on two sites and love what it can do but there are a couple things that seem broken to me.
I am having the same issues on the following two sites:

www.anchorpointfilms.com

www.veggievore.com

Here are the main things I would love some help to resolve:

1) I can't get all the button icons to align evenly. In particular I would love to align them to the same top line. Maybe there is a little tweak I can put in my custom.css file.

2) The Pin It count displays on top of the button even though I am picking horizontal as the option. It seems like it should be putting the count on the right side like the other buttons.

3) The Facebook like button that allows you to edit and post to facebook is lining up behind a right hand column or the end of the page. You can see some examples in the attached images. I guess there is some priority setting that may need to be added via a custom.css tweak to bring the facebook window up to the front?

Here are a couple pages you can look to see the alignment issues:

www.anchorpointfilms.com/dvd/ancient-health

www.veggievore.com/dvd/best-blood-pressure-plan

You can also see the facebook issues if you click on the like button and then sign in to your facebook account.

Thank you, Sean Carney

Hi

The joomla template come from joomlabamboo and is name is rasa2 . The both website url use rasa2 that is base on zengrid . The social content /Layout is a HKS social plugin with many enhancements refer to the changelog history .


if javascript is disable "tweet "and "pin it " appear both at right location and non alingment problem appear.if javascript is enable ; 2 new icons appear and there right align each other ( green line) but modify 2 parameters :
1) the 2 default button are push bottom direction with different distance refer to horizontal line ( ( vertical baseline issue ?)
2) the two news button ( G and facebook) seem align refer to pinit button but not Tweet ( green line)
the tweeter icon is raster
the google button icon is an iframe with svg image !!!

there is dynamic javascript that disturb me when study HTML /css code so i need to disable javascript ( put a javascript breakpoint "anywhere") . So the 2 new icon is handle by javascript and iframe with raster image or SVG .

The issue seem to be locate at
-the layout box around the tweeter icon
-the file name templates/rasa2/css/theme.veggievore.css
-the line 930 for css name and propertied/value img { vertical-align: middle }
disable it /remove it and vertical ll be ok


what I don't know is the context of this CSS properties , does properties attach to img selector ll apply to all img instance in the dom /iframe ? Here a capture screen before and after disbale vertical-align properties
As always a change of this css properties can create new issue iin another position or page !!
You have to check / takecare of this behaviour



It is strange that this vertical aligment attach to twitter layout don't apply when i disable javascript ?
rasa2 team must know why !! Does vertical-aligment is a dynamic CSS properties value handle by javascript rasa2 template ??
NB It ll be nice to have the answer from them and post in this forum ( i l l do some test if i have time )
regard's

For the other link relative to vertical aligment
www.anchorpointfilms.com/dvd/ancient-health
see around
.btn-o, .count-o, .btn, .btn .label, #count {
display: inline-block;
vertical-align: text-top;
}

I Think for the two links about icon twetter issue aligment , rasa2 template use two differents CSS way and have issue for both by using vertical-align in your case ( perhaps in other users case ?) .

Create template take time and need strong knowledge so ask to joomlabamboo by mail or forum
( don't buy template name without a good active forum or support !! )

.btn-o, .count-o, .btn, .btn .label, #count {
display: inline-block;
vertical-align: text-top;
}

hope this ll be helpfull ...
regard's

I will show all of this to the template designer and really thank you very much for the detailed analysis!!!!

I submitted this page to JoomlaBamboo for support and they asked me a few questions that brought some clarity.

1) The first question was whether the problem exists if I use Protostar. And, the answer is YES. This plugin has the same problem with Protostar. so, the are suggesting that the plugin has the issue and not their template.

2) They asked if we could provide an example of this plugin functioning properly? I am hoping some of you might be able to give some of your sites that use the plugin and successfully show the social media icons without having to write additional css code.

3) They stated that turning off Javascript would also break HikaShop so that is not an option.

4) I wanted to let you know that I definitely have the Pinterest display set to Horizontal!

I have left one page using the Protostar template so that you can see the problem still exists dependant of the template:

www.veggievore.com/dvd/best-blood-pressure-plan

I will change it back once I hear from you. I have not tried any of the code yet that you all have supplied but will do that to try to fix the problem is that is what needs to be done. But, it seems like the plugin might want to be expanded slightly to take care of this.

Also, I had to turn off Add This because it really throws the layout off and it is kind of redundant. Although for the sake of this ticket I have just turned it back on. It's setting is set to display on the right but it is actually displaying on the left. I thought this might be of some interest. Just like the Pinterest count display that is set for horizontal but is displaying vertically instead.

The issue is the same in the new url . I desactivate each css file one by one to see if issue still here. None of the files create the issue except protostar/css/template.css
in template.css
line 50
img {
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle; /*remove this line */
}

1) different template can use/share the same code and so issue ll be there.
The best way is study code rather than bla bla ....

2) hope some will post their url

3) the hks plugin need javascript so yes you can't disable javascript to resolve the issue .
I write that it ll be interesting to spy step by step which line in the code create this issue !!


regard's

Thank you very much Lionell75 for finding this. I am wondering if you can suggest a solution besides deleting the line. Is there something I can just add to my custom.css file to fix this?

Hi
you have to go to the definition of vertical-align here . As you see the default value is baseline ( implicit value) that you should use ( explictly) if you don't want to modify the css file ( remove ) .

you have to write this code
img { vertical-align: baseline; /*remove this line */ }
inside a css file that ll be load after the file where the code create the issue !!

if your file is load before the file that contain the code that create the issue then you should add ! important in the end or css property ( before the ";") to have this
img { vertical-align: baseline !important;}

regard's

all is ok now ?

Thank you so much Nicolas for your reply. Once again the 'BUG' I submitted is actually a configuration issue on our side.

I have submitted your comments to JoomlaBamboo for their consideration regarding disabling your hikashop.css file. I am wondering if maybe they should load your hikashop.css file and then just over ride key elements to get the look they are after?

I have found that the Pinterest count displays no matter which settings I select, even if I select the 'none' setting. So, that seems like it may still be a bit of a bug to me. But, the alignment problem did clear when I turned on the default hikashop.css. Unfortunately though I lost a LOT of my other CSS changes, many of them that came from JoomlaBamboo.

At this point I am going to wait to hear from JoomlaBamboo because when I turned on the CSS loading of your hikashop.css folder a lot of their stying went away. I want to get their suggestion on how best to fix this. I wonder if in the future template designers should load your code and then somehow over ride it to get their unique styling?

Thank you Jerome,
That seems like it could be a good decision on how to architect the hikashop.css file!

Right now the advice I got from JoomlaBamboo which probably makes the most sense to me if for me to copy the css from hikashop.css that controls the icons layout into my own custom.css file. Could you point me to the correct text to try to put into my custom.css file?

I actually did a search for hikashop.css on my system and that file appears not to be there!

Thank you, Sean

Thank you very much for that code Nicolas. I added it to me custom.css file and at first there was no change at all. Then I realized I was probably required to change the setting for Tag type from XFBML to IFRAME. After I did that things did change quite a bit but still things are not lining up as nicely as I am wanting.

Here are the things that we have not been able to line up like we would like yet:

1. The AddThis button is displaying on the left even though I have selected the setting to display on the right. It is also aligned lower than the other icons.
2. The twitter icon is not aligning to the top like the google+ icon is.
3. The pinterest icon is displaying a count on top even when I select 'none' or 'horizontal' as my options.
4. I wish there was a way to just display a like button for facebook without any other text. But, I think that is not possible so I would just like to see the facebook button and line up on the same line as all the others.

I noticed too that the container for div#hikashop_social is 719.906px x 201 px. I would prefer to reduce that height to as little as necessary.

Any advice will be greatly appreciated on what I might do next. I have only done this on one site now (veggievore.com) and will try to do the same thing to the anchorpointfilms.com site once this is working at veggievore!

Thank you, Sean Carney

Hello Nicolas,

My apologies because I did not change the line you suggested because I did not realize that the same line appeared 12 times in the same file and only one of them needed changing. So, I searched for the string I was supposed to put in and when I encountered it entered correctly I assumed that problem was already fixed in my file. That was my mistake. I have remedied that now.

After making that one change to the file that you suggested I was not really able to see a significant change in the display of the AddThis or the other social icons. I know this issue is not in my template because it happens when I use Protostar as well. However, when I do what you suggested earlier which is to turn the CSS setting for Front-end CSS File to Default then it lines up fine.

So, it looks like I either have to use the template designers settings and just no use your social modules since I can't get them to line up unless I set the Front-end CSS to default. Or, I can ask my template designers if they can tweak their design so that the icons will align properly.

That said, there is still one unresolved issue that may be with you guys which is that the Pinterest Count displays on top whether I select Horizontal, Vertical or None!

And, as I think about the fact that your plugin works fine, except for the Pinterest issue, when I turn the front-end CSS to default it makes me wonder if there might be some additional code from within your CSS that I am missing which could be added to my custom.css file to make your other css fit properly. I may be grasping at straws but am trying to figure out how to not have to turn off your plugin which is the solution I had to settle for in order to release the site.

Sean

Thank you Nicolas,

I did have the wrong code in my file as you outlined. I changed it and now I believe it is working. The count disappeared when I selected the 'none' option.

I also asked Rob at JoomlaBamboo for advice to get the hikashop default css into my custom.css file. he gave me the exact same code that you gave me except for he removed the last line:

#hikashop_social iframe{ max_width: inherit !important; }

Anyhow, it did work perfectly for me so with your Pinterest fix and that code in my custom.css file, I am a happy camper!