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

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

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

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

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. :unsure:

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

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

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. :unsure:

.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

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

Kind Regards
Nikki

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

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 :D

Once again, Thank you
Kind Regards
Nikki

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.

webomat:

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

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

Try adding

padding-left: 0.5em;

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

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

there are quite a few divs that are in the template but may not be in use, if your css file doesn't have
.listingDescription then just add it to the bottom of the file

.listingDescription {
padding-left: 0.5em;
}

Thanks for the tip, I did it, but the text is still centered aligned. Probably its my BetterCategories mods that clashes with it?

maybe, do you have a link we can see? I'm not sure what IDs and classes are used by that mod

Yes sure. It's https://www.radiomeal.com -> go to Connectors categories.

.centerBoxContentsProducts
{
text-align: left;
padding: 5px;
}
will left justify everything, if you just want the text (not the name/link)
then

.listingDescription
{
text-align: left;
padding: 5px;
}

will do it
make the padding whatever you want, but you'll need *something *in there to keep the text from riding up on itself

it does work in firefox when I put it in the stylesheet.css file
if its not coming up for you, clear the browser cache?

Yes, it works great! :clap:

Thanks :bigups:

glad I could help