Joomla Templates Club 406,261 posts

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#163004

Hello,

the bullets in jateline IV does not place properly.
See the screenshot.

I think there was already a post about this problem but could not find it.

Does anyone know the solution?
Thank you in advance.

---

Attachments:

1. 

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#387265

Open templates/ja_teline_iv/css/template.css and find <blockquote>#ja-sitemap ul li {
background: url(“../images/arrow-l.png”) no-repeat scroll 2px 5px transparent;
}</blockquote>

Change above code to <blockquote>#ja-sitemap ul li {
background: url(“../images/arrow-l.png”) no-repeat scroll 2px 5px transparent;
padding-left:10px;
}</blockquote>

It will fix the bullet alignment in sitemap.

To align bullets in articles, modules etc, in the same template.css find
<blockquote>.ja-moduletable ul li, .ja-module ul li, .ja-content-main ul li {
background: url(“../images/bullet.gif”) no-repeat scroll 20px 6px transparent;
line-height: 1.4;
}</blockquote>

change it to

<blockquote>.ja-moduletable ul li, .ja-module ul li, .ja-content-main ul li {
background: url(“../images/bullet.gif”) no-repeat scroll 20px 6px transparent;
line-height: 1.4;
padding-left: 30px;
}</blockquote>

3 users say Thank You to himangi for this useful post

1. dieudonne
2. onobles
3. akizuki

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#387272

Ok, thanks you very much.:)
This tips is working fine.

Just a little difference from my template.css (‘scroll’ and ‘transparent’ is missing, but appears in firebug …why ?)
Ligne 1008 :
before :
#ja-sitemap ul li { background: url(../images/arrow-l.png) no-repeat 2px 5px; }
after :
#ja-sitemap ul li { background: url(../images/arrow-l.png) no-repeat 2px 5px; padding-left:10px ;}

ligne 88 – 93 :
before :
.ja-content-main ul li {
background: url(../images/bullet.gif) no-repeat 20px 6px;
line-height: 1.4;
}
after :
.ja-content-main ul li {
background: url(../images/bullet.gif) no-repeat 20px 6px;
line-height: 1.4; padding-left: 30px;
}

Thanks you very much for your help.
Sincerelly yours.

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#387279

Hi,

Glad to know that the code worked for you. 🙂

When we define background for something, all the following background properties are applied to that particular object.
# background-color
# background-image
# background-attachment
# background-repeat
# background-position

When we dont define background-color, it is by default considered as transparent and the background-attachment is by default considered as scroll,i f it’s not defined. that’s why you can see them in browser..

1 user says Thank You to himangi for this useful post

1. dieudonne

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#387281

Excellent.:)
Thanks for this explanation.

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#391432

Ok, now I have a problem with the numbered list.

Each time, numbered lists are positioned too much on the left (see screenshot)

for unordered list, it is ok.

Any idea of this problem ?

Thank in advance.

---

Attachments:

1. 

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#391434

Hi,

As you know, we give styling to ul and li when we use unordered list. When you use numbered / ordered list the styling needs to be specified for ol & li.

So to have same space to ordered list as the unordered list, open template.css and find styling given to .ja-content-main ol, .ja-content-main ol li etc. If there is no styling for ol, then add .ja-content-main ol {margin-left:10px;} you can change 10px value as you want. this should solve your problem..

1 user says Thank You to himangi for this useful post

1. dieudonne

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#391469

ok, thank you very much.

I change this in template.css ligne 102 :

.ja-content-main ol li { line-height: 1.4; }

to

.ja-content-main ol li { line-height: 1.4; margin-left:30px;}

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#391476

And where can I put the color code to colorize just the number of the list ?
I made some tests but I didn’t find this.

Thanks in advance.

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#391622

Hi,

I dont think for normal ordered list you can give separate color to the numbers and different color for corresponding text. You will need to search on the internet if that can be done by modifying the ordered list code..

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#391785

ok, thank you for your reply.

& here are some interesting links :
http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/

http://codeasily.com/css/style-ordered-list

http://www.webinventif.fr/creer-de-belles-listes-ordonnees-en-html-et-css/ (in french)

[Author]

Posts