Adding Blank Spacer Lines between Categories in Category Box

For a while I have found a quick and easy solution for creating blank lines in my Category box so I can group some of my categories. All I do is create a dummy category where I want a blank line.

But this is causing me validation problems as the source code comes out as ....

<a class="category-top" href="http://www.tidytoys.co.uk/shop/-c-299"></a><br />
<a class="category-top" href="http://www.tidytoys.co.uk/shop/-c-300"></a><br />

Is there a way I can insert a blank line wherever I want without causing validation errors behind the scenes that highlight coding that google doesnt like.

I did try playing with one of the category box add-ons a while ago, but it all seemed massively complicated and I still couldnt figure out how to add something as simple as a blank line.

A small change to the template will let you control that with a stylesheet:

1. /includes/templates/YOUR_TEMPLATE_FOLDER/sideboxes/tpl_categories.php
   Around line 22 you'll see code like this:

      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        break;

Change that to add the extra code as highlighted here:```
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top'. ' ' . str_replace('cPath=', 'catnum', $box_categories_array[$i]['path']);
break;

2. Add a new stylesheet specifically to control this:
/includes/templates/YOUR_TEMPLATE_FOLDER/css/stylesheet_cat_sidebox.css

#categoriesContent a.catnum34, #categoriesContent a.catnum78 {
padding-top: 10px;
display: inline-block;
}

Edit the numbers to reflect the cPaths of the categories above which you want the space to display.  There are 2 examples above: for category 34 and 78.

Thank you DrByte for your help

Im now getting this when I view my page source

<a class="category-top catnum299" href="http://www.tidytoys.co.uk/shop/-c-299"></a><br />

But is this right ?

My Code in tpl_categories.php is now ....

// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top'. ' ' . str_replace('cPath=', 'catnum', $box_categories_array[$i]['path']);
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs';
break;

My code in stylesheet_cat_sidebox.css is ...

#categoriesContent a.catnum299, #categoriesContent a.catnum300 {
padding-top: 10px;
display: inline-block;
}

The problem I am having is that when generating a sitemap for my website these blank lines are appearing as such and google webmasters is objecting.

http://www.tidytoys.co.uk/shop/-c-299 2014-12-22 weekly 1.00 ==> not ok
http://www.tidytoys.co.uk/shop/other-toys/musical-vocal-toys 2014-09-03 weekly 0.99 ==> ok

Sorry but I have zero understanding of the code you have given me.

I may have copied this up incorrectly. But this doesnt look to be what I wanted.

Im just trying to get rid of the line .... <a class="category-top catnum299" href="http://www.tidytoys.co.uk/shop/-c-299"></a><br />

and replace it with something that is understood in the coding as being blank line ... is that </br> ?

From what appears to be described, you still have one or more "fake" categories populating your database that were added to give you your "blank" line. What Dr. Byte provided is a substitute for using the "fake" category. Further, the solution provided gives a greater flexibility in formatting than a simple space (<br />) with the extra styling information that was added, it is possible to individually customize each sidebox and on each page displayed.

So to fix your problem, you would need to delete or preferably inactivate the category(ies) that are being displayed with no content. This can be done from the admin panel in the product/categories area, find the category numbered 299 or whatever category number(s) causing trouble, then change the green status indicator to red, and answer the question if asked that yes to disable categories/products below that category...

I have now inactivated (changed to red) the 2 dummy categories (cat nums = 299 and 300) - these I would like to be blank lines.

299 blank
2 A-Z LIST of All Soft Toys
300 blank

I have changed the code to be

stylesheet_cat_sidebox.css ...

#categoriesContent a.catnum299, #categoriesContent a.catnum300 {
padding-top: 10px;
display: inline-block;
}

But instead of blank lines above and below "A-Z LIST of All Soft Toys" the blank lines are no longer there and the categories have closed up.

I then tried applying the code to a.catnum2 - incase the blank line is appended to either before or after an existing category. You did imply I could delete the categories where I would like a blank line, in which case I wouldnt have a category number to use in the given coding.

Im sorry but am Im just not understanding the concept of what this code does or I havent copied it up correctly.

You're close... The category numbers provided above were examples based on the information provided. So, if category 299 and category 300 do not exist, then the number in the.css file will not do anything. As suggested earlier, need to look at the category(ies) that do exist on the page(s), (right click the web page and view source), find the category that is the one above which space is desired... Look at the category number for that category. Use that number in place of 299. If more such spaces are needed, follow that pattern and the example provided above...

In this setup, whatever category number(s) used will cause a 10px margin above that category to exist... Ie, a space. If that space should be increased, then increase the number in the .css file.

Isn't A-Z LIST of All Soft Toys a category? It has a category number if it is. That category number would be what is to be used to replace 299 or whatever number is being used. In Dr. Byte's example: might replace 34.

Maybe Im not explaining myself correctly. Whatever number category I use in this code
nothing at all happens. Isnt the code written to leave a blank line ? I dont know how it is supposed to all connect up because I have no knowledge of CSS, PHP or HTML.

The first piece of given coding makes changes to my source code which I can see by right clicking and viewing the source code ...
<a class="category-top catnum2" href="http://www.tidytoys.co.uk/shop/a-z-list-of-all-soft-toys">A-Z LIST of All Soft Toys-></a><br />

This piece of coding Im guessing, isnt being recognised (nothing is happening, no blank line is being generated).
It simply isnt modifying the catnum that I have given it.

#categoriesContent a.catnum2, #categoriesContent a.catnum299 {
padding-top: 10px;
display: inline-block;
}

I think I might have figured this out ...
The changes appear to show up in when I use Tools, Options, Network, Cached Web Content (clear now) in Firefox.
I havent figured out how to do the same in Chrome.

I started to wonder if there was some sort of delayed reaction when copying up CSS as suddenly when I refreshed my website homepage one of the blank lines appeared although I had removed all the dummy categories.

Unfortunately I am not on a device that allows me to see the css applied to your page, but I do see a gap above the first categorylisting (catnum2). Catnum299 is no longer in the code, so that number won't do anything. You could try 199, as it is still there.

All that said, between changes of the underlying css file code, the browser's cache needs to be cleared, otherwise the change will not be displayed until it expires/is cleared.

Something else that can be tried for peace of mind is to exagerate the expected change. Instead of 10px,you could try 100px, although there are tools for each browser that can tell you the information about the webpage that right now I cannot because my smart phone isn't quite that smart. :)

toyseller:

I think I might have figured this out ...
The changes appear to show up in when I use Tools, Options, Network, Cached Web Content (clear now) in Firefox.
I havent figured out how to do the same in Chrome.

I started to wonder if there was some sort of delayed reaction when copying up CSS as suddenly when I refreshed my website homepage one of the blank lines appeared although I had removed all the dummy categories.

Sorry, missed the post attached here before I posted my previous... Stated the same thing. From a quick internet search, the following instructions were found for chrome:

Click the Chrome menu on the browser toolbar.
Select Tools.
Select Clear browsing data.
In the dialog that appears, select the checkboxes for the types of information that you want to remove.
Use the menu at the top to select the amount of data that you want to delete. Select beginning of time to delete everything.
Click Clear browsing data.

Webpage: https://support.google.com/chrome/answer/95582?hl=en

Thank you both so much for your help. All sorted.
Cant believe that I have to flush Firefox and Chrome before the changes show up !
So pleased I no longer have to live with my workaround and dodgy sitemap entries :-)