Joomla Templates Club 406,261 posts

[jayatunge Friend jayatungeJoin date: July 2011Posts: 94Downloads:0Uploads:41 Thanks: 16 Thanked: 8 times in 1 posts]

#166422

This template has only one bullet style for Un-Ordered lists and has limited styling options. I would love to create few different bullets in different colors and sizes in gif format and be able to use them. What changes/coding need to be added in order to get this working after saving my custom gif to images directory? Greatly appreciate any help.

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#402031

Hello, to change bullet of un-ordered list please add your image to templates/ja_minisite/images folder and change this code:

.ja-moduletable ul li, .ja-module ul li, .ja-content-main ul li {
background-position: 15px 7px;
}

to

.ja-moduletable ul li, .ja-module ul li, .ja-content-main ul li {
background-position: 15px 7px;
background: url(“../images/bullet.gif”) no-repeat scroll 20px 7px transparent;
}

in templates/ja_minisite/css/template.css. In this case bullet.gif is your image.

[jayatunge Friend jayatungeJoin date: July 2011Posts: 94Downloads:0Uploads:41 Thanks: 16 Thanked: 8 times in 1 posts]

#402166

Hi Thang Ngo,

Thanks for the reply. But I was looking for a different answer. I guess, I haven’t presented my question properly, sorry about that. So, what i really want is to define additional bullets, other than the one we have in the template, not to replace it with my custom bullet. I want to keep that bullet and like to add more bullet options, may be with different UL class sufix….
Like in the attached screenshot.

---

Attachments:

1. 

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#402437

hello, sorry for misunderstanding. To add addition bullet please add “suffix” to your module class suffix and use it to style for your bullet.

Add this code:

.moduletable_slidenews ul li {
background: url(“../images/your_bullet.gif”) no-repeat;
}

Please tell me if you need more help.

Thank you.

[jayatunge Friend jayatungeJoin date: July 2011Posts: 94Downloads:0Uploads:41 Thanks: 16 Thanked: 8 times in 1 posts]

#402537

I think I am completely lost! Why do I need to add “suffix” to my module class suffix? And, where do I add this code? I do not get it. I intend to use bullets in article layout. Hm..m..m.., Sorry, My CSS or coding is nill. :((
Is there any tutorial that has more detail that I can follow?

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#402627

OK Then, Please give me your login information FTP/admin account of your site to your support ticket XGV-578-47287 in http://support.jooomlart.com and give me the article link with un-ordered list. I’ll try a demo for you.

Thank you.

[jayatunge Friend jayatungeJoin date: July 2011Posts: 94Downloads:0Uploads:41 Thanks: 16 Thanked: 8 times in 1 posts]

#402686

Really appreciate your help. Please check you PM, I have sent you the account infomation.

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#402822

Hi. Thanks for giving me the admin account but I also need FTP access as requested. Please provide!

Thank you.

[jayatunge Friend jayatungeJoin date: July 2011Posts: 94Downloads:0Uploads:41 Thanks: 16 Thanked: 8 times in 1 posts]

#402935

Hi thangnn1510,
Sorry about that. Please check check your messages for the FTP information.
Thank you.

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#403229

Thank you very much and sorry for letting you wait in a long time. This is a complete guide for you in the case you want to add addition bullet to JA MINISITE:

1. Login into admin and then go to menu -> main menu -> edit your menu item you want to add the addition bullet (in your case it is “Bullet Demo”).

>> Click to “Parameters (System)” tab and add “_addition_bullet” to “Page Class Suffix” parameter.

2. upload your bullet file to templates/ja_minisite/images/typo (in my case I use bullet_go.png)

3. add this code:


.body_addition_bullet .ja-content-main .article-content ul li {
background: url("../images/typo/bullet_go.png") no-repeat scroll 8px 1px transparent;
}


to the end of templates/ja_minisite/css/template.css. Please do the similar way to replace my code with yours.

This is a demo:

http://www.theaceconsulting.com/etm/index.php?option=com_content&view=article&id=43&Itemid=89

Tell us if you need more help.

Thank you.

[jayatunge Friend jayatungeJoin date: July 2011Posts: 94Downloads:0Uploads:41 Thanks: 16 Thanked: 8 times in 1 posts]

#403336

Dear thangnn1510,

Thanks for all the help, time and effort you’re making to provide a solution for me. I see and understand what you’re explaing. However, still I am not getting what I need. Sorry to be a pain. Here is further explanation:

If I understand correctly, In your method, I can define only one additional bullet per menu item. Is this a true statement? As per my post #3 in this thread, my expectation is to define multiple bullets in one article Please see the attached “expected un-orderd list.png”

Once again, realy appreciate your help.

---

Attachments:

1. 

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#403379

Hello, Thanks for explaining more about your problem. I defined the problem and this is addition solution for you:

1. Go to admin and edit your article (in this case is “un-ordered list demo”). Change its html code to:

<ul class=”go_bullet”>
<li>Solutions</li>
<li>Overview
<ul class=”circle_bullet”>
<li>Timesheet Solution</li>
<li>Overview
<ul class=”square_bullet”>
<li>Integration with MS project and Primavera</li>
<li>Integration with Financial Systems</li>
<li>Integration with Corporate Systems</li>
<li>Integration with MS Outlook</li>
<li>Integration with Mobile Devices</li>
<ol class=”star_bullet”>
<li>Remedy (Help Desk) Mobile</li>
<li>MS Project Mobile</li>
<li>ERP Mobile</li>
<li>Oracle Mobile</li>
</ol></li>
</ul>
</li>
</ul>
</li>
</ul>

As you see in this case I have added class for ul, ol tags (Class=”go_bullet”, class=”square_bullet”, class=”star_bullet”, class=”circle_bullet”).

2. upload your bullet file to templates/ja_minisite/images/typo (in my case I use bullet_go.png, bullet_circle.png, bullet_square.png, bullet_star.png)

3. Replace this code:


.body_addition_bullet .ja-content-main .article-content ul li {
background: url("../images/typo/bullet_go.png") no-repeat scroll 8px 1px transparent;
}


with this code:


ul.go_bullet li {
background: url("../images/typo/bullet_go.png") no-repeat scroll 8px 1px transparent;
}

ul.circle_bullet li {
background: url("../images/typo/bullet_circle.png") no-repeat scroll 8px 1px transparent;
}

ol.star_bullet li {
background: url("../images/typo/bullet_star.png") no-repeat scroll 8px 1px transparent!important;
}

ul.square_bullet li {
background: url("../images/typo/bullet_quare.png") no-repeat scroll 8px 1px transparent;
}


in the end of templates/ja_minisite/css/template.css. Please do the similar way to replace my code with yours.

This is a demo:

http://www.theaceconsulting.com/etm/index.php?option=com_content&view=article&id=43&Itemid=89

In my new guide you could see it don’t use menu class suffix.
Tell us if you need more help.

1 user says Thank You to thangnn1510 for this useful post

1. jayatunge

[jayatunge Friend jayatungeJoin date: July 2011Posts: 94Downloads:0Uploads:41 Thanks: 16 Thanked: 8 times in 1 posts]

#403449

Dear thangnn1510,

Splendid! That is exactly what I was longing for! Thank you! cảm ơn bạn! :-*

This explanation is very helpful and be very usefull in other JA templates too. Once again, thank you so much. 🙂

[Author]

Posts