The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 04-15-2011, 07:06 PM
Johnny Bravo's Avatar
Johnny Bravo is offline
Junior Member
 
Join Date: Apr 2011
Posts: 22
Smile

whitespace above ecwid container


hi guys
after wasting two months with wp-ecommerce, wpstorecart, eshop and other ecommerce plugins, i am shocked to say that ecwid has been a breath of fresh air for me, its usability, integration simplicity is awesome. congrats, you guys are onto a winner with this one!

ok, since installing ecwid, i've got quite far and have a few niggles to iron out. my store can be found at the following link. if you guys can point out anything else i may have overlooked, i'd appreciate it but it's not ready to start accepting orders - yet. mostly, they're css issues.

http://artbyherbie.com/store

1. i have about 50px to 100px whitespace between the ecwid container and my page-title. how can i get the ecwid container flush with the top of the page?

2. in category grid view, how can i centralise the name of each product? i have tried the following but it doesn't work:

td.ecwid-productBrowser-productsGrid-cell {
padding: 0px 26px;
overflow: hidden;
text-align: center;
}

3. are there any major KNOWN wordpress plugins which conflict with ecwid??

thanks in advance!

Last edited by Johnny Bravo; 04-24-2011 at 06:37 PM. Reason: tried a solution for 1.
  #2  
Old 04-15-2011, 09:57 PM
Johnny Bravo's Avatar
Johnny Bravo Johnny Bravo is offline
Junior Member
 
Join Date: Apr 2011
Posts: 22
Default centralising product name link

ok, getting somewhere, this worked to centralise the product name link in the grid view only.

/* centralise product name link in grid */
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-productNameLink {
text-align: center;
}
  #3  
Old 04-24-2011, 06:39 PM
Johnny Bravo's Avatar
Johnny Bravo Johnny Bravo is offline
Junior Member
 
Join Date: Apr 2011
Posts: 22
Default

hi
i still have this extra 40px whitespace above my ecwid scripts. a global css class called entry.p is showing up but editing this for the sake of one page is ludicrous.

please help!
  #4  
Old 04-24-2011, 10:15 PM
lakesentrance's Avatar
lakesentrance lakesentrance is offline
Junior Member
 
Join Date: Mar 2011
Posts: 23
Default

Hi Johnny, nice site, i used this for centreing all titles:
/* ------------ centre titles --------------------*/
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-productNameLink {
text-align:center;
}
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-sku {
text-align: center;
}

I think u'r heading looks fine, i wouldn't stress re the 40px ... but, it's your eye
  #5  
Old 04-25-2011, 12:37 AM
Qetzal's Avatar
Qetzal Qetzal is offline
Ecwid Team
 
Join Date: Sep 2009
Posts: 10,847
Default

Quote:
1. i have about 50px to 100px whitespace between the ecwid container and my page-title. how can i get the ecwid container flush with the top of the page?
This problem is caused by the fact WordPress adds many unnecessary <p> tags at the beginning of your page.

Try to apply this CSS code:

HTML Code:
div#post-3264 .entry p {
margin: 0;
}
The code will applied to the "Store" page only.


Quote:
ok, getting somewhere, this worked to centralise the product name link in the grid view only.
Do you want to centralise them in the List view as well?

Quote:
3. are there any major KNOWN wordpress plugins which conflict with ecwid??
Ecwid doesn't conflict with any WP plugin.
__________________
Eugene K.
Ecwid Team

@ecwid | Facebook | Ecwid Knowledge Base
  #6  
Old 04-25-2011, 08:52 AM
Johnny Bravo's Avatar
Johnny Bravo Johnny Bravo is offline
Junior Member
 
Join Date: Apr 2011
Posts: 22
Default

qetzal, thanks for the reply. to rectify the whitespace problem, i added the following to my ecwid css:

div.ecwid-productBrowser {
padding: 0px 10px 20px 0px;
margin-top: -60px; //or whatever
}

and it sems to have done the trick, now all views incluing shopping bag and checkout appear fine.

my question is that is this code better/more efficient than what you suggested above:

div#post-3264 .entry p {
margin: 0;
}

thanks!
  #7  
Old 04-25-2011, 09:22 AM
Qetzal's Avatar
Qetzal Qetzal is offline
Ecwid Team
 
Join Date: Sep 2009
Posts: 10,847
Default

Quote:
Originally Posted by Johnny Bravo View Post
qetzal, thanks for the reply. to rectify the whitespace problem, i added the following to my ecwid css:

div.ecwid-productBrowser {
padding: 0px 10px 20px 0px;
margin-top: -60px; //or whatever
}

and it sems to have done the trick, now all views incluing shopping bag and checkout appear fine.

my question is that is this code better/more efficient than what you suggested above:

div#post-3264 .entry p {
margin: 0;
}

thanks!
Both solutions are OK, but the second one is more correct, because it fixes the root cause of the problem, instead of the removing symptoms.
__________________
Eugene K.
Ecwid Team

@ecwid | Facebook | Ecwid Knowledge Base
  #8  
Old 04-25-2011, 08:44 PM
Johnny Bravo's Avatar
Johnny Bravo Johnny Bravo is offline
Junior Member
 
Join Date: Apr 2011
Posts: 22
Default

hi, tried it but it didn't work so i stuck with my first solution. yours doesn't move the ecwid container and also deletes the spacing between my <h1> and <h2> tags. thanks anyway!

lakesentrance, i think the 40px matters because i try to get my content as high as possible on the page, but its sorted anyway. thanks!

Last edited by Johnny Bravo; 04-25-2011 at 08:45 PM. Reason: solution found
  #9  
Old 04-26-2011, 11:51 AM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

I think, adding a negative margin wouldn't be 100% correct way of fixing this, because you try to affect the results rather than the reason of the problem.

The problem is that you have unnecessary <p> tag around a part of your Ecwid embed code in that page. That excessive <p> tag appears because WordPress additionally processes your input, transforming line breaks into <p> tags. You can easily overcome this in two ways:

1. Use noformat plugin: http://wordpress.org/extend/plugins/wp-no-format/ and enclose the Ecwid embedding code between <!-- noformat on --> and <!-- noformat off -->

2. Just delete all the line breaks in the Ecwid embedding code, turning it into one-liner. It will work, and Wordpress will not garble it.

By doing the either way you will avoid having the excessive <p> around parts of your code, so there won't be unnecessary spacing around Ecwid. Negative margins are not needed in such case.
The Following User Says Thank You to Eugene Rimmer For This Useful Post:
Barbara Brunner (07-24-2012)
  #10  
Old 04-06-2012, 03:58 PM
Koh Samui's Avatar
Koh Samui Koh Samui is offline
Senior Member
 
Join Date: Aug 2011
Posts: 216
Default

Hi Eugene,

Hope your fine.

I have tried all of the above and nothing seems to remove the white space above my main categories. wpautop-control removes a minimal amount of white space.

I have also tried:

div.ecwid-productBrowser-category {
padding-top: 20px; /*change this value to reduce gap size */
}


I would very much appreciate you looking at my site to see how I can remove the excess white space.

Thank you very much for your advice.

Paul


Koh Samui

Last edited by Koh Samui; 04-06-2012 at 04:16 PM.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
centralise, grid, whitespace

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:16 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.