You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.
Hi
Can someone advise how to change the colour of bullet points form black to red?
Thank you
Jane
Offline
Hi Jane,
I'm not sure if you can use css to change the colour of the point without it changing the colour of the text but you could use an image instead.
list-style-image: url("../media/red-dot.gif");
Nigel
Offline
Hi Nigel
Thank you for coming back to me, I have tried something similar using info gained from the W3schools website, without success, which means I am obviously doing something wrong!
list-style-image: url("../media/red-dot.gif");
just to clarify what do i put in place of the 'url' and is there any other folders i need to put before "media'
Thanks and regards
Jane
Offline
Hi Nigel
Just had a thought, where would this expression/string be placed?
-In the description editor of a category
or
-In the Css directory?
Thanks you
Jane
Offline
Hi,
look through your css file and see how other image links are generated, it might be slightly different to the example I gave. Then upload the image to the appropriate folder.
Do you have a link to the page where you want the bullets?
Nigel
Offline
Hi Nigel
Please find link as follows
http://www.kidcatering.com/ecom-catshow … n-hob.html
Thanks and regards
Jane
Offline
Hi Jane,
this should make it look a bit neater. You can obviously change the padding etc. as required.
ul
{
list-style-image: url("../media/red-bullet-point.gif");
padding-left:20px;
margin:0px;
}
ul li
{
padding:0px;
}
Nigel
Offline
Hi Nigel
Not to sound dim but where will i place this expression string?
Thanks and regards
Jane
Offline
Hi Jane,
skins/kidcater/css/all.css
Nigel
Offline
Hi Jane,
in your all.css file look for:
td.cptbl_cat
{
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
vertical-align: top;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dedede;
}
then underneath it add:
td.cptbl_cat UL {
list-style-image: url("../media/red-bullet-point.gif");
padding-left:20px;
margin:0px;
}
Nigel
Offline
Hi Nigel
Thank you very much for your help, very much appreciated, I am learning as I go, I knew I was frustratingly close to resolving it and that I was missing the vital ingredient.
I had looked in the Css file, but sadly I wasn't sure as to what I was looking for, I'd seen the table formulas and I had dismissed them as being irrelevant as I was thinking lists not tables, so thank you!
Can this formula be adapted for a product description?
Thanks and regards
Jane
Offline
Hi Nigel
It doesn't appear to work, this is what is in my css file
table.cptbl_cat {
margin: 0px 0px 10px 0px;
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
}
td.cptbl_cat {
padding: 5px 0px 0px 0px;
vertical-align: top;
border-bottom: 1px solid #DEDEDE;
}
td.cptbl_cat UL {
list-style-image: url("../media/red-bullet-point.gif");
padding-left20px;
margin:0px;
}
td.cptbl_cat a {
font-weight: bold;
}
td.cptbl_cat_blank {
display: none;
}
Regards
Jane
Offline
td.cptbl_cat UL { list-style-image: url("../media/red-bullet-point.gif"); padding-left20px; margin:0px; }
isn;t in your all.css file here:
http://www.kidcatering.com/ecom-catshow … ss/all.css
in addition you have entered css style that are not wrapped in style tags:
<meta name="description" content="Modular Units ul { list-style-type:none; padding:3px; margin:0px; } ul li { background-image:url("../media/red-bullet-point.gif"); background-repeat:no-repeat; background-position:-1 px -1px; padding-left:14px; } These Stylish, Space Saving induction hobs are ideal for kitchens, front of house situations and outside catering Induction Hobs are energy saving thanks to heating efficiency and no need to heat up No flame means safe operation and pots stay cleaner Extremely easy to use and to clean Graduated digital controls Only uses electricity when the pan is on the hob The hobs can be lined up to create a modular cooking suite " /> <meta name="robots" content="index,follow" />
Offline
Thank you, for this Zenart, will check it out
Offline