CSS – Page 2 – mccormicky

Revised File For Fake Grid View

how to get grid view wordpress shopping cart — a shop page suing my fake Grid View:

Very happy to report that you can still “fake” Grid View in Posts/Pages using version 3.12.6 of the WordPress Shopping Cart as the paid for Grid View Module. Most times upgrading a plugin will mean I will have to work very hard to re create the desired effects with the new code. But this time I caught a break and the changes were minimal.

CSS for Grid View-esque Styled Shop Pages in Posts or Pages
These are my suggested styles. You can do what you like just remember that float:left is the main element of Grid View.

/*makes sure things look ok in IE and floats don’t get wonky*/
.homepage_products{overflow:hidden;width:100%;height:auto;position:relative;}

/Product title. !important will override link styling */
.homepage_products a.wpsc_product_title{color:#000!important;font:bold 11px arial!important}

/*adjust widths and heights to fit your product thumbnail */
/* Add padding for more “air” in the boxes, add a border or background color,too. Go crazy!*/
.homepage_products .category_view_product{position:relative;width:155px;height:350px;float:left;margin:8px 8px 2px 6px;}

Download homepage_products_functions.php
*Note* This file was edited April 21st,2009 to correct a validity issue.
[download id=”3″]
FTP to your WordPress Shopping Cart plugin folder and rename the current file: homepage_products_functions_old.php,
if there is a disastrous error you can delete my file and rename the other one, no harm done.
Then upload the edited file, tweak your stylesheet and enjoy!

Revised Fake Grid View

Updated April 19th 2009

If you are using the latest version of the WordPress Shopping Cart plugin, version 3.12.6, please read my latest post on the subject:
“Revised File for Fake Grid View”
The following post is helpful but the file to be downloaded was written for version 3.6.7.

I use wpsc when I mean WordPress Shopping Cart.
Here is a re write of an earlier post on “faking” Grid View(for wordpress shopping cart plugin).
My earlier post did not take into account, beyond styling the page with CSS, the functions in homepage_products_functions.php and how the output of this file varies from the real grid view product display.
So if you have purchased Grid View you should be able to use the Cart Icon button in the Post or Page editor to insert a wpsc category into a Post or Page and have it display just like Grid View,right? I thought so. But it doesn’t work that way.Inserting a single category into a page results in a page that looks a lot like grid view but acts quite differently.

Some key differences between using homepage_products and the grid view
Inserting a wpsc category into a Page(shortcode is for homepage_products) displays a thumbnail gallery of all products from one category and their product titles. If you use “Full” your page will not look like Grid View. If you don’t select Full you will get close to faking Grid View ( if you have the correct CSS to do so). But a Fake Grid View page has one little problem:the thumbnail image does not link to the single product display page(like in Grid View).Instead,it links to the thumbnail image.Which means a thumbnail image will pop up where a full size image should.
Continue reading Revised Fake Grid View

Get Grid View Without the Gold Cart

gratuitous blog post image WPSC means WordPress Shopping Cart, a plugin for WordPress.

What: Too cheap to buy a Gold Cart Module for your WPSC plugin? Well, it isn’t only out of cheapness that I’m writing this (anyway I make my clients buy the module for other reasons like more payment gateways than PayPal) it’s the constant battle to optimize SEO. This shopping cart plugin is possibly the best thing to happen to WordPress but it gives less than great SEO. Duplicate title tags,missing or too short meta descriptions.

How: Use the WordPress editor in Visual Mode to insert a product group into a Page or Post.

The more familiar I get with how low ranking websites get knocked for duplicate content (yep, Google gives more leeway to popular sites with loads of incoming links and high page rank) the more value I see in adding a product group/category to a page or post rather than use the one page to show your entire store.

The editor in HTML mode will not show the shopping cart button. And if you turned this option off in your user profile you won’t ever see this button. So go to your user profile and turn Use Visual Editor back on.
So go to Write > Page and click on the cart icon to choose a category from product groups. Select, insert,save. Once you preview you’ll see that the products scroll down the page.
Don’t publish just yet.

Here is some sweet sweet CSS to fake the Grid View, save 20 bucks and get some good SEO working (that those rich guys that paid for Grid View probably won’t have).
This part is so incredibly easy I could kiss myself. In fact I will.

Fake Grid View CSS
Add this to style.css in your theme folder:
[css]
#homepage_products{overflow:hidden;}
#homepage_products .category_view_product .product_details .wpsc_product_title{font-size:12px;}
#homepage_products .category_view_product{width:200px;height:300px;float:left;margin:8px 3px;}
[/css]
The height and width and margins will have to be tweaked to fit your wishes.You can make the product titles smaller and change color.You can also have borders.It’s wide open for customization.But the float:left is what matters and creates the grid.Having overflow:hidden in the wrapper div keeps the page from looking screwy.

SEO
Next thing is to download the All in One SEO pack plugin for WordPress, unzip, upload to plugins folder, activate settle up the options and go back to your almost done Page or Post.Pop open the All in One SEO box in the editor page, below Categories. You’ll see title,description and keyword fields. Writing in your description will solve the short or missing meta description problem. If you used a post you can skip the keywords field and use tags instead. Tags are better anyway.

Use a Page or a Post?
In WordPress categories are king and you can great things with category templates.You can only use categories with posts. I would rather be able to place a single product into a Post.I think this would open up a lot more flexibility in using this plugin. This is supposed to be an option in the latest release of the plugin but either it doesn’t work or I have another plugin that breaks the button code for this. Entirely possible.

Last but not least tweak your header.php. Look for the line with html]blah blah blah [/html] delete it and paste this in it’s place:
[php]<title><?php

// Page or Single Post
if ( is_page() or is_single() ) {
the_title();

// Category Archive
} elseif ( is_category() ) {
printf( __(‘Archive for ‘%s’’), single_cat_title(”, false) );

// Tag Archive
} elseif ( function_exists(‘is_tag’) and function_exists(‘single_tag_title’) and is_tag() ) {
printf( __(‘Tag Archive for ‘%s’’), single_tag_title(”, false) );

// General Archive
} elseif ( is_archive() ) {
printf( __(‘%s Archive’), wp_title(”, false) );

// Search Results
} elseif ( is_search() ) {
printf( __(‘Search Results for ‘%s’’), get_query_var(‘s’) );
}

// Insert separator for the titles above
if ( !is_home() and !is_404() ) {
_e(‘ at ‘);
}

// Finally the blog name
bloginfo(‘name’);

?></title>[/php]

That helps take care of the duplicate title problem for categories and archives.
The all in one seo pack does most of the work and this does the rest. It’s very cool.

Clear Clear Clear your floats!

Anytime you use a float and the containing div of that float isn’t big enough to hold it, the floated element will overflow the containing div unless you clear it.

Example:
A blog page displaying 10 posts, some with floated images. Some posts are fine because they don’t have large, aligned images or have enough text to balance things out. But other posts with images aligned to the left or right and have little text and so seem to be running into the post below them. What is actually happening is that the post below is getting mis-aligned because it is not clearing the floated image.

You could just use a smaller image or add more text.

But what if:

You need to show a large image, a smaller one reduces the visual effect.
It isn’t your content, you can’t just add more to solve this issue.
You want the text in the post to show alongside the image rather than under it, you want to show information above the image above the fold.

What should you do? You should Clear your floats!

You could add
[html]<br class="clear"/> <!–or–> <div class="clear"></div> [/html]

Then add [css] .clear { clear: both } [/css] to the stylesheet. This would solve the problem but wouldn’t be semantically correct because [html]<div class="clear"></div>[/html]
is an *empty HTML element. It neither provides or formats any information. Also this must be added to each post manually and chances are your clients will not remember or care to have to do this.
Better to take care of the problem site-wide with CSS by adding [css] .containing-div { overflow:hidden } [/css] to the stylesheet. This rule should be applied to the innermost div that will be handling the overflow.
Example, if you have a document structure like this:

[html]<div id="content">
<div class="outer">
<div class="inner"><p><img src="/images/image.jpg" alt="" class="alignleft" width="650" height="820"/>My lovely, large image.</p>
</div> <!–closes #inner–>
</div> <!–closes #outer–>
<!–then the next post–>
<div class="outer">
<div class="inner"><p><img src="/images/image.jpg" alt="" class="alignleft" width="150" height="220"/>Text Text Text</p>
</div> <!–closes #inner–>
</div> <!–closes #outer–>
<!–then the next post–>
<div class="outer">
<div class="inner"><p><img src="/images/image.jpg" alt="" class="alignright" width="350" height="420"/>My lovely, medium image.</p>
</div> <!–closes #inner–>
</div> <!–closes #outer–>

</div><!–closes #content –>[/html]

Div.inner would need [css] div.inner { overflow:hidden;} [/css]
And div.outer would get [css] div.outer{clear:both;} [/css]

Then you and your clients can go nuts with class=”alignleft” without ruining the look of the page.

Using [html]<div class="clear"></div>[/html] a few times due to deadline pressure isn’t such a huge crime. I’ve done it. But it isn’t a good habit to get into.

Using *empty HTML elements to enforce styling is a slippery slope.
Ever seen this beauty?
[html]<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>[/html]
I have.
What about this gem?
[html]<div>
<p>content content content</p>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
</div>
[/html]

Both do the job of adding more space where needed when the content fell short and the designer needed to find a way to fix that for their page to look the way they wanted it to…
It’s not the best way to do it but a lot of the time a designer can’t rely on content alone in text or images to provide the formatting they need.Still, it’s better to take care of this in the stylesheet rather than in the html document.

P.S. I have made all these mistakes and many more far more hideous!