Better Categories Contrib & ezpages

wtashby:

With BetterCategories, I can't seem to get the bottom portion of my categories side box to show: See My Site

Notice the bottom image in all the other side boxes, except the categories.

How can I fix that so all the side boxes match?

Thanks.
Not sure if this has anything to do with your problem but the images associated with your bettercategories mod is broken. See in IE6, FF ignores it.

The images are referenced by ```
src="includes/templates/template_default/images//cat_no_sub.gif"

Notice the // It should be /

Assuming you are using overrides and a YOUR_TEMPLATE type directory.
It should be ```
 src="includes/templates/YOUR_TEMPLATE/images/cat_no_sub.gif" 

gilby:

In Your BetterCategoriesEzInfo.css you have tried to comment out a line by using "//" it appears to work in firefox but IE ignores it.

Yep, that did it. Thanks!

gilby:

Not sure if this has anything to do with your problem but the images associated with your bettercategories mod is broken. See in IE6, FF ignores it.

The images are referenced by ```
src="includes/templates/template_default/images//cat_no_sub.gif"

> Notice the // It should be /
> 
> Assuming you are using overrides and a YOUR_TEMPLATE type directory.
> It should be ```
 src="includes/templates/YOUR_TEMPLATE/images/cat_no_sub.gif" 

I'm not worried about the images associated with better categories (I don't want to use them). It is the bottom image that is used with all of the sideboxes, and appears in all of the sideboxes except the better categories. The top (header) image shows, just not the bottom one. In the template css file, it is the image used in .sideBoxContent

wtashby:

I'm not worried about the images associated with better categories (I don't want to use them). It is the bottom image that is used with all of the sideboxes, and appears in all of the sideboxes except the better categories. The top (header) image shows, just not the bottom one. In the template css file, it is the image used in .sideBoxContent

The information box has ```

The more information box has ```

A similar line containing .sideBoxContent that you refer to is missing from the category sidebox.

gilby:

The information box has ```

I'm not sure what you are trying to tell me. All of my sideboxes Except the better categories side box is showing the background images as they are supposed to.

This is the stylesheet.css that adds the bottom image to each sidebox:

.sideBoxContent {
	background-image:url(../images/box002.gif);
	background-repeat: no-repeat;
	font-size: 11px;
        color: #000000;
	line-height: 125%;
	background-position:bottom;
	padding-top: 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 25px;
	}

This is the css code from Better Categories:

A DIV.betterCategories, A:visited DIV.betterCategories {
      background-color: #63859d;
      width: 75%;
      margin-left: 15px;
  	border-top: 1px solid #63859d;
  	padding-top: 2px;
	padding-left: 5px;
	padding-right: 2px;
	padding-bottom: 0px;
	font-size: 11px;
      color: #f1ede7;

For some strange reason, the image box002.gif will not show up at the bottom of the better categories sidebox.

What can I do to make the stylesheet.css and bettercategories.css play nice together?

wtashby:

I'm not sure what you are trying to tell me. All of my sideboxes Except the better categories side box is showing the background images as they are supposed to.

This is the stylesheet.css that adds the bottom image to each sidebox:

.sideBoxContent {
background-image:url(../images/box002.gif);
background-repeat: no-repeat;
font-size: 11px;
color: #000000;
line-height: 125%;
background-position:bottom;
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 25px;
}

> 
> For some strange reason, the image box002.gif will not show up at the bottom of the better categories sidebox.
> 
> What can I do to make the stylesheet.css and bettercategories.css play nice together?

Its not showing up because it is not being used in the category sidebox.
You will need to add this div statement to the category sidebox php file.

That did the trick gilby!:thumbsup:

You made me think a little, but, it worked. I simply copied and pasted the appropriate div class from the origional tpl_categories.php to the better categories one.

Thanks again,

Tom

Hi.

Just put this ins since I think it will help me with a clients site design wants.

They want to have the category lists in alternate colours, something like this.

category 1 = blue background
Sub category 1 = green background
Sub categry 2 = blue background
category 2 = green background
category 3 = blue background
category 4 = green background

Im not a god of CSS and have not got a clue how to work this one out.

Can anyone assist,#

spottedhaggis:

Hi.

Just put this ins since I think it will help me with a clients site design wants.

They want to have the category lists in alternate colours, something like this.

category 1 = blue background
Sub category 1 = green background
Sub categry 2 = blue background
category 2 = green background
category 3 = blue background
category 4 = green background

Im not a god of CSS and have not got a clue how to work this one out.

Can anyone assist,#

Have a look at \includes\modules\product_listing.php
for an example of doing alternating background css for the product listing pages.

You would need to add & edit
\includes\templates\YOUR_TEMPLATE\sideboxes\tpl_categories.php
to add this sort of functionality

good luck

just installed this to my work in progress site (not mine a clients) and would like to know if it can be applied to the More information box as well as the information box, and if so, can you help me figure it out..

Thanks alot guys.

site working on is https://www.spottedhaggis.com/jemima

hey all the css document from the better categgories seems incomplete

the file i have as part of the zip is

stylesheet_betterCategoriesEzInfo.css

this doesnt seem liek the entire thing

any thoughts

by file had the following with it

includes/templates/yourtemplate/css/stylesheet_betterCategoriesEzInfo.css
includes/templates/yourtemplate/images (several of them in here)
includes/templates/yourtemplate/sideboxes/best sellers, categories, document_categories, ezpages, information, more information tpl files

includes/modules/sideboxes/yourtemplate/information and more information php files.

Do a search in the forum for bettercategories and find the one that has loads of postings, there is another download link in there.

Hmmm - how can we tell if it's incomplete if we can't see what you've got? :wink2:

Prellyan:

hey all the css document from the better categgories seems incomplete

the file i have as part of the zip is

stylesheet_betterCategoriesEzInfo.css

this doesnt seem liek the entire thing

any thoughts
You have separated the betterInformation class out and not copied it correctly.
You have```html
.betterInformation a:hover, .betterInformation a:visited
{
display: block;
border-top: 2px solid #ffffff;
padding: 2px;
color: #66CCCC;
}

change it to```html
.betterInformation a, .betterInformation a:visited
{
	display: block;
	background-color: #6DCFF6;
	border-top: 2px solid #ffffff;
	padding: 2px;
	color: #66CCCC;
}

and edit it from here

noooo, thats what I wanted in the first place. Categoreis to have a background but information not to have any background.

I changed it t what you suggested and thats not what I want to achieve, so put it back.

spottedhaggis:

noooo, thats what I wanted in the first place. Categoreis to have a background but information not to have any background.

I changed it t what you suggested and thats not what I want to achieve, so put it back.

It seems to be working as you want now that you have changed

.betterInformation a:hover, .betterInformation a:visited

to```
.betterInformation a, .betterInformation a:visited

i got the css sorted

now the all products is below the first test product line i put in

site is at

https://www.africasgifts.com/theserengeti

any thoughts

thanks

whoa now i got a white space that seems to be permanent on the site

any help?

Hello, just wanted to drop by and say that I really like this contribution! I just installed it on a new ZC 1.3.5. Works and looks great :yes:

I have one question to ask. The images in the blocks (categories)...how can I separate them just a little from the text, as they are "butted" right up against the text and I'd like them slightly away from each other.

Just installed a few days ago, not finished with color arrangements yet, but here's my ZC:
http://ibond2u.com/store/index.php

I believe padding is the answer. I have mine padded ut a little, you can see it here.

https://www.spottedhaggis.com/jemima

My bettercategoris css is as follows

.betterCategories, .betterDocuments, .betterEzpages,
.betterBestsellers {
border-top: 1px solid #ffffff;
padding-bottom: 4px;
padding-top: 4px;
font-size: 12px;
font-family: "Trebuchet MS";
text-align: center;
font-weight: bold;
letter-spacing: 2px;
}
.betterInformation, .betterMoreinformation {
padding: 2px;
padding-bottom: 2px;
color: #FFFFFF;
font-size: 13px;
font-family: "Trebuchet MS";
text-align: center;
font-weight: 500;
}

.betterCategories a, .betterCategories a:visited,
.betterDocuments a, .betterDocuments a:visited,
.betterEzpages a, .betterEzpages a:visited,
.betterBestsellers a, .betterBestsellers a:visited {
display: block;
background-color: #6DCFF6;
border-top: 2px solid #ffffff;
padding: 4px;
color: #ffffff;
font-family: "Trebuchet MS";
font-size: 13px;
font-weight: bold;
}
.betterInformation a, .betterInformation a:visited,
.betterMoreinformation a, .betterMoreinformation a:visited
{
display: block;
border-top: 2px solid #ffffff;
padding: 2px;
color: #84C46F;
font-family: "Trebuchet MS";
font-size: 13px;
text-align: center;
font-weight: bold;
}

.betterCategories a:hover, .betterCategories a:active,
.betterDocuments a:hover, .betterDocuments a:active,
.betterEzpages a:hover, .betterEzpages a:active,
.betterBestsellers a:hover, .betterBestsellers a:active {
background-color: #AAD69B;
color: #FFFFFF;
font-family: "Trebuchet MS";
font-size: 13px;
}
.betterInformation a:hover, .betterInformation a:active,
.betterMoreinformation a:hover, .betterMoreinformation a:active
{
display: block;
border-top: 2px solid #ffffff;
padding: 2px;
color: #666666;
font-family: "Trebuchet MS";
font-size: 13px;
text-align: center;
font-weight: bold;
}

/*
.category-subs-selected, .category-subs-selected a:hover {
font-weight: bold;
text-decoration: none;
}
*/