Anonymous User
(@anonymized-3085)
Pretty sure it could be done via CSS using the first shortcode, try setting class=’eshoppanels’ and see what that does.
Genius!
Yes, adding that class definitely did the trick alongside some simple CSS.
Big thank you for the quick and accurate response.
~mccrodp
mccrodp. I am a newbie and would happily mooch off your code. I know some CSS but not enough to make a gallery so please post here, how you did this. I’m hungry for code!!!
Hello, yes no problem, I’ll try and point you in the right direction.
Firstly if you are not already, ensure you are using the firebug browser plugin or similar, so that you can “Inspect” the CSS of your Products page. Also insure you have the class present in the shortcode as elfin described: [eshop_list_subpages class="eshoppanels"]
You should then see the product list with similar markup to the following:
<ul class="eshop eshoppanels">
<li class="eshop-product-86"><li class="eshop-product-87">....
All you should need to do then is force the width of the outer container of the products to be narrow enough. The width you chose will determine how many products will fit on each row inside your ul.eshoppanels container.
For example I set the below CSS on a twentyten child theme using a one column template, this gave me 3 products per row as required
ul.eshoppanels li {
width:15em;
}
Hope that helps, good luck.
~mccrodp
Hello, yes no problem, I’ll try and point you in the right direction.
Firstly if you are not already, ensure you are using the firebug browser plugin or similar, so that you can “Inspect” the CSS of your Products page. Also insure you have the class present in the shortcode as elfin described: [eshop_list_subpages class=”eshoppanels”]
You should then see the product list with similar markup to the following:
<ul class=”eshop eshoppanels”>
<li class=”eshop-product-86″><li class=”eshop-product-87″>….
All you should need to do then is force the width of the outer container of the products to be narrow enough. The width you chose will determine how many products will fit on each row inside your ul.eshoppanels container.
For example I set the below CSS on a twentyten child theme using a one column template, this gave me 3 products per row as required
ul.eshoppanels li {
width:15em;
}
Hope that helps, good luck.
~mccrodp
Yes of course, I have firebug. I can not imagine how I lived without out it before. Firebug is just amazing. And I was using it when trying to inspect my CSS and play around with it but I didn’t have the class. Thanks for the help. It’s very helpful to have panels and excerpts. -Thanks again. And other then that others will see the solutions as well. I hate to come to forums and find out someone’s like “Oh thanks I figured it out.” and not post it.
-Off trying to edit my CSS
Awesome. Worked for me. Now I make the changes in eShop.css correct?
Good good. Well the CSS will work there alright. The reason I wouldn’t advise putting it in eShop.css is that when you update eShop plugin next you will most likely overwrite the changes you’ve made.
I would put it in your theme’s css file: /wp-content/themes/[YOUR_THEME]/style.css
You won’t lose your changes when you put them there. However, If you change your theme down the line you will need to re-add those CSS styles to the new theme’s stylesheet.
~mccrodp
Good good. Well the CSS will work there alright. The reason I wouldn’t advise putting it in eShop.css is that when you update eShop plugin next you will most likely overwrite the changes you’ve made.
I would put it in your theme’s css file: /wp-content/themes/[YOUR_THEME]/style.css
You won’t lose your changes when you put them there. However, If you change your theme down the line you will need to re-add those CSS styles to the new theme’s stylesheet.
~mccrodp
Yeah I tried and it wouldn’t work anywhere. Seems like it inherits alot and builds on with other files(Online). The Firebug CSS file is nothing like the local file.
I’ll try putting in the theme CSS and see how it goes. Thanks.
I’m having some trouble finding where to put it…
I tried a quick search for “li class” in my theme. None there. Should I just make one?
I am confused, you cannot find your theme’s css stylesheet? It should be at:
/wp-content/themes/[YOUR_THEME]/style.css
Best access your site through FTP or go to yoursite.com/wp-admin/theme-editor.php and add to the end of the stylesheet there.
I’m not sure what you mean by “li class”.
I’m sorry I meant I could not find where to put the CSS code in my style.css. Sorry for being so stupid but I was trying to add a rule for the entire (li) class. Because in Firebug it didn’t show up as
ul.eshoppanels li
it showed up as
#content .eshop <strong>li</strong>, #content ul.eshopfeatured <strong>li</strong>, #content ul.eshopfeatured li, #content ul.eshopsubpages <strong>li</strong>, ul.eshopcats li, #content ul.eshoprandomlist li, #content ul.eshopshowproduct li, #content ul.eshoppanels li, #content fieldset.eshoppayvia li, #content .pagfoot ul li, #content ul.continue-proceed li {
So with my limited knowledge I just figured li (class)is what I should to change.
Anyways I just looked back at your code and saw the ul.eshoppanels li { and just made that rule instead in my theme. It works great.
Here’s what I got. http://handmadebyerika.com/test-page-shop/anyoccasioncards/
Wow…. I just realized the class I needed was in firebug after all.
#content .eshop li, #content ul.eshopfeatured li, #content ul.eshopfeatured li, #content ul.eshopsubpages li, ul.eshopcats li, #content ul.eshoprandomlist li, #content ul.eshopshowproduct li, #contentul.eshoppanels li, #content fieldset.eshoppayvia li, #content .pagfoot ul li, #content ul.continue-proceed li {
Thanks a billion dude. I owe it to you that I found your article and learned how to do panels, and then panels and excerpts.
P.S. The company who made my theme is called Billion. Haha. Thanks a billion.
No worries, glad I could help! 🙂
~mccrodp
Anonymous User
(@anonymized-3085)
eShop doesn’t use the css within the plugin except on first install when it copies it to a directory: wp-content/eshop_files. Then I even include a handy editing functionality via Appearance > eShop
This way it doesn’t get overwritten with each update.
Additionally if you have an eshop.css in the current theme, then that takes precedence.
