How to left align the text in the item name column please

[angelicdezigns]

Good Afternoon,

I was just wondering if someone could possibly tell me how to left align the item column text in the main listing page please.

Also, I have the text in the description a certain colour, but for some reason when you look at in the main listing it always look black, is it possible to change the colour of it.

Picture attached to explain.

Thankings in advance
Nikki

[webomat]

Good Afternoon,

I was just wondering if someone could possibly tell me how to left align the item column text in the main listing page please.

Also, I have the text in the description a certain colour, but for some reason when you look at in the main listing it always look black, is it possible to change the colour of it.

Picture attached to explain.

Thankings in advance
Nikki

Hi Nikki,

It's controlled by CSS. Or will be, after you define styling for the class you want to affect. "-)

To see what is going on, you should always look at the page in the browser and then "View Source" (how you do that depends on your browser).

In this case, the class assigned to the Product Description is: listingDescription

If you search the Stylesheet.css file you'll find that class is not styled (or at least it isn't in the Classic Template), so you need to do your own or modify the stylesheet:

.listingDescription {
text-align: left;
color: red;
}

... replacing the "red" with your color, of course!

As always, the modified stylesheet should be saved under the override system for your template:

... includes/templates/[your template name]/css/stylesheet.css

If you find this impacts something somewhere else, in a way you didn't expect, you'll have to dig deeper into styling modifications to achieve your purpose.

Hope this helps!

Cheers,

Becky

[angelicdezigns]

Hi Becky,

Thanks very much for that. I will try and do it tommorow :-)

Could I just confirm that the text below is something I have to add myself to the css stylesheet, as I did have a quick browse over the stylesheet but couldnt find the text below anywhere. If I have to add it myself, do you know roughly where abouts I would put it, as I havent really had a lot to do with stylesheets.

.listingDescription {
text-align: left;
color: red;
}

Much Appreciated, and thanks for your time.
Kindest Regards
Nikki

[webomat]

Hi Becky,

Thanks very much for that. I will try and do it tommorow :-)

Could I just confirm that the text below is something I have to add myself to the css stylesheet, as I did have a quick browse over the stylesheet but couldnt find the text below anywhere. If I have to add it myself, do you know roughly where abouts I would put it, as I havent really had a lot to do with stylesheets.

.listingDescription {
text-align: left;
color: red;
}

Much Appreciated, and thanks for your time.
Kindest Regards
Nikki

Not a problem Nikki! :-)

Yes, you have to add the entire block as it is displayed in red in the above post. Except replace the word "red" with the color you want (for instance, black is #000000).

In terms of where you put it, it might be easiest to set up your own "My Additions" section near the top....

body {
   blah blah
  }

/* My Additions */

.listingDescription {
text-align: left;
color: red;
}

If you put that whole red section in beneath the Body tag in your CSS file, it should work for you. There are other schools of thought on how to organize a CSS file, but since this is an addition rather than a modificaton you might as well make it easy to find!

I'll be around tomorrow afternoon, so if you have problems post them here and if I'll be happy to help if I can.

Cheers,

Becky

[angelicdezigns]

Bless you Becky, thanks very much for that, will try it out tommorow afternoon when I get home and hopefully will suss it out. I always keep originals of things so if I mess it up, I will be ok

Kind Regards
Nikki

[angelicdezigns]

Yippeee, thanks becky, that seems to have worked a treat

I couldnt find a styleseet.css, I only had a a choice of stylesheet_new.css and stylesheet_original.css so I edited stylesheet_new.css and saved it to includes/templates/[my template name]/css/stylesheet_new.css Hope this is ok, as it seems to work fine, and has had the desired effect

Once again, Thank you
Kind Regards
Nikki

[maza]

Hello.

I'm trying to do what Nikki did, and couldn't find the .listingDescription thingy. I'm using current ZC.

If I just add the word .listingDescription, the sidebox will touch my product list and I just got stuck there.

Somebody help please? Thanks.

Hi Nikki,

It's controlled by CSS. Or will be, after you define styling for the class you want to affect. "-)

To see what is going on, you should always look at the page in the browser and then "View Source" (how you do that depends on your browser).

In this case, the class assigned to the Product Description is: listingDescription

If you search the Stylesheet.css file you'll find that class is not styled (or at least it isn't in the Classic Template), so you need to do your own or modify the stylesheet:

.listingDescription {
text-align: left;
color: red;
}

... replacing the "red" with your color, of course!

As always, the modified stylesheet should be saved under the override system for your template:

... includes/templates/[your template name]/css/stylesheet.css

If you find this impacts something somewhere else, in a way you didn't expect, you'll have to dig deeper into styling modifications to achieve your purpose.

Hope this helps!

Cheers,

Becky

[maza]

Hope that somebody has some answers on this one. Thanks.

[gjh42]

Try adding

padding-left: 0.5em;

to your .listingDescription and see if that helps. (Adjust the padding as desired.)

[maza]

Again, where is that .listingDescription string? I could not find it in my stylesheet.css