benkaminski.com

As many of you WordPress users and developers out there may have noticed, post tags, categories and the like are a huge attribute to the success of WordPress and it’s great communication with the search engines. You can tag your posts with relevant data or keywords that pertain to your specific post and these tags are indexed by the search engines. This makes it easier to attract traffic to your site and so on and so forth.

I will not waste anyone’s time by elaborating on the already obvious benefits of using WordPress. Although, the appearance of the Post-Tags on the pages may have an undesirable affect on your website users. In most cases, they are a rather large font size, bold, and eye catching. Some people see this as annoying or as an eye-sore, so I sought out a solution to be able to edit the post tags appearance on the pages in which they are contained without removing them completely from the page and defeating their purpose.

All you need is a basic understanding of CSS to follow this tutorial and I will explain it the best I possibly can, so lets get started…

First things first:
You will need access to an FTP client or you can use the “Editor” in WordPress under the “Appearance” tab. Either way you choose, find the “style.css” file and open it in your editor of choice. If you have the ability to search for terms in your editor, search for *”post-meta” as this is the key element in the appearance of the tags and other meta-data for each post. I can’t give a specific line number as it will differ from theme to theme. So, should you not be able to search automatically, you will have to find the “post-meta” category by scanning over the “style.css” page. You will find it, it’s definitely there.

(**PLEASE NOTE: “post-meta” is theme specific, it may also appear as “PostFooterIcons” or another custom function name. The easiest thing to do if this becomes a problem for you would be to download the Firefox web browser and get the “FireBug” add-on) This way you can easily locate the CSS that is being referenced in the theme that you are using. It’s as simple as highlighting your tags and right clicking “inspect element” and there you have it)

Example of tags before editing:

Anyhow, here is how most of the pre-configured “post-meta” CSS definitions will look:

/***** Post Meta ********************/
.post-meta {
font-size: 12px;
text-transform: uppercase;
margin: 0;
padding: 5px 0 0 0;
border-top: 1px solid #DDDDDD;
clear: both;
}

As you can see, the font size itself is already set to 12 pixels. This (at least to me) is too large for post meta-data. I believe that post-tags should be subtle and unobtrusive on the end user. They need to appear on the page to be able to reap the benefits of them, but let’s make it a little less noticeable on the end user.

So, two things we want to change right off the bat here. Font size and text-transform. See below:

/***** Post Meta ********************/
.post-meta {
font-size: 6px; /* here I changed the font from 12px down to 6px which will be almost unreadable*/
text-transform: none; /* here I changed the text-transform from "uppercase" to "none" this will also decrease the overall font size*/
color: #CCCCCC /* I chose #CCCCCC because it matches the background of the page itself. This helps hide the tags even more. You don't have to make them completely invisible and feel free to mess around with other hexadecimal color combos to suit your needs*/
margin: 0;
padding: 5px 0 0 0;
border-top: 1px solid #DDDDDD;
clear: both;
}

So, after you apply this to your CSS, save the file and refresh the page that has your post-tags on it and you will see how drastic of a change this will produce. Although there is still one problem. The post-tags are links, therefore they will inherit any link settings from the CSS that are already configured. Meaning that in most cases, they will be a bright link color (usually blue) and in some cases they will be underlined or have other link effects applied to them in the CSS.

The way to overcome this and to further stealth the post-tags is to add the following right under the CSS we just edited:

.post-meta a { /* by adding the "a" after ".post-meta" means that these settings will apply to all links that are contained within the ".post-meta" setting.*/
font-size: 6px;
color: #CCCCCC;
}

So, what I did there was make it so that the links are the same color and size as the modification that I made above.
The final CSS code should look like this:

/***** Post Meta ********************/

.post-meta {
font-size: 6px;
color: #CCCCCC;
text-transform: none;
margin: 0;
padding: 5px 0 0 0;
border-top: 1px solid #DDDDDD;
clear: both;
}
.post-meta a {
font-size: 6px;
color: #CCCCCC;
}

Example of post-tags after editing CSS

Hopefully this tutorial will help you solve this issue. I had searched for a solution for a while and was unable to find one. If you are familiar with CSS there are many more options that you can apply to your post-meta CSS definitions, but this should at least get you going in the right direction.

Please comment with any questions or let me know if this worked (or didn’t) for you.

Volusion is probably one of the top 3 eCommerce solutions for small businesses on the internet. They offer credit card online transactions through Visa and Mastercard for considerably less than other alternatives, and secure trading over the internet.

What they don’t offer is a lot of wiggle room to customize the look of the website. The templates are fully customizable, but not for the content are of the site, such as the product display and category displays. Since Volusion uses .ASP pages to call their data, the pages are encrypted and aren’t given access to.

One of the most important things that Volusion stresses in their training videos is the importance of visual presentation, and then they don’t give you the ability to edit the look of one of the most critical parts of the site!

Luckily, thanks to a little research, and guidance from fellow web developers, scripts of javascript code can be used to identify certain parts of the site, and insert your own lines of code.

Volusion’s .ASP pages write the code in tables, as opposed to div tags, which are horrendous for SEO purposes, and also, you won’t have a div class to identify and override in your CSS. What you essentially have to do is identify a page by it’s URL, identify a table cell by it’s tag, insert your div tag in the table cell, and then write the corresponding CSS for that tag. Here’s how, step by step:

1) Identify the page you want to make changes on:

In the template of your Volusion site, insert the following code after your final div tag, but before the tag:

<script type="text/javascript">
//var sPath = location.href;
//if(sPath.indexOf('URL element defined by you') != -1) {

if(location.href.indexOf('URL element defined by you') != -1) {
</script>

All this is doing is essentially telling the javascript, if the page you are currently on involves ‘this’ in the URL, begin the code. It SHOULD NOT be the entire URL, but a unique part of the URL that Volusion uses, for example : ‘category_s’ or ‘product_p’.

2) Tell the code to begin identifying tables by cell:

Now you have to tell the code to create a variable based on which block element you want to use.

var tdTags = new Array();
var tdTags = document.getElementsByTagName('td');

What you are doing is creating a variable called ‘tdTags’ and you are getting that specific block element by the type which in this case is a table cell (td). You can use this code later for other purposes, because it will identify block elements only, i.e. div, table, tr or whatever.

3) Call to a specific cell table by number:

This is the fun part. Since the pages are written in tables, and tables flow left to right, you basically have to call to them by number, like 1, 2, 3, and so on.

var replcode = tdTags[8].innerHTML;
tdTags[8].innerHTML = "<div class=\"YOUR CSS CLASS HERE \">" + replcode + "</div>"

So here, it’s calling to table cell # 8, and telling it, take that table cell, wrap it in a div tag with the class name of your choosing, put the code back in, and then close the div. You can now go to your CSS, write that class style, and it will now insert it for that particular table cell, for that page only.

Basically, when you are done, the code should look like this:

<script type="text/javascript">
//var sPath = location.href;
//if(sPath.indexOf('URL element defined by you') != -1) {

if(location.href.indexOf('URL element defined by you') != -1) {

var tdTags = new Array();
var tdTags = document.getElementsByTagName('td');

var replcode = tdTags[TABLE CELL NUMBER].innerHTML;
tdTags[TABLE CELL NUMBER].innerHTML = "<div class=\"HERE \">" + replcode + "</div>";

}
</script>

You can repeat the last 2 lines of code and change the numbers as much as you’d like in the script. You can edit multiple table cells in one particular page, but if you change pages, you will have to write a new script, with a new unique URL element. Try it out, and see how it works for you.

PROBLEMS WITH USING THIS CODE :

It doesn’t come without its strings. I’ve definately encountered a few problems using this trick to get the look you want. The most notable :

1) Elements change constantly on a Volusion store. The idea behind being a web developer is turning this online store over to a client after the finished product is there. Since this code is POST data retrieval, when a client finally has their store up and running, their products may change, descriptions will change, amounts will change, and thus the table element’s numbers will change. The code will still work, but it may not call to the table cells you want anymore. This is NOT a dynamic script, sadly.

This is especially tricky is when you have a page that contains say 10 items, and then the next page has 5. The table’s are written left to write, not up and down, so if there is only 5 items, the table cells’ numbers will change for that last product, and it will take on the wrong elements and insert them. Unless you’re a super incredible web developer and want to insert a loop into your javascript code to prevent this (which sounds like a shit load of work), your pretty much stuck. Try to work around this.

2) It takes a lot of time to define these table cells. It certainly isn’t easy to just say, “oh, ok, Volusion put table cell #2 here.” You’re going to need something in place already to define a table cell element, and then call it by number. A LOT of trial and error. What i found was best is to just use a class with a small, thin red border around it. Start trying different numbers in the script to see where these table cells are placed on your page.

All and all, this code is good for small, minor changes, but will never be as satisfactory as simply having access to the .ASP pages. It will never be truly dynamic unless Volusion lets you.

Good luck!

Author: Randy Neil
Courtesy of: www.theheadrush.com