fbpx

Call anytime and leave your contact details and requirements.

Call anytime and leave your contact details and requirements.

Blog

Your go to place for news, tips and tricks!

Joomla JCE Pro - Styling Bullets Points with images

Joomla JCE Pro - Styling Bullet Points with Images

Bullet points are a handy tool in web content. They break down information into digestible chunks, making your content more reader-friendly. Joomla is a popular content management system known for its flexibility, and JCE Pro (Joomla Content Editor Professional) takes content creation to the next level. This blog post will show you how to style bullet points with custom images in Joomla JCE Pro.

Why Style Bullet Points?

While standard bullet points serve their purpose, there are times when you want to add a touch of uniqueness to your content. Maybe you're working on a website with a specific theme, or you simply want to stand out from the crowd. This is where custom bullet point images come into play.

Step 1: Accessing JCE Pro

To get started, make sure you have Joomla and JCE Pro installed as your default editor and your content ready for editing. Now, let's dive into the process:

  1. Open the Text Box: Locate the text box where you want to style your bullet points. This could be within an article, a blog post, or any other content container that uses JCE.
  2. Edit with JCE Pro: Click to edit the text using JCE Pro. This will open up the advanced editor, providing you with more formatting options.
  3. Select the Text: Highlight the text you want to turn into a list with bullet points.
  4. Apply Bullet Points: Look for the Bullet Point icon in the JCE Pro toolbar. Click it, and you'll see a list of bullet point options.
  5. Choose "CIRCLE": From the list of bullet point options, select "CIRCLE." This will apply circular bullet points to the selected text.


Now that you're within the JCE Pro editor, you'll want to find the CSS Style Editor to customize your bullet points:

  1. Find "EDIT CSS STYLE": button option in theJCE Pro editor. 
  1. Select "LIST" and Configure Options: Within the CSS Style Editor, you'll find a "LIST" section. Here, you can customize the appearance of your bullet points. Configure the following options:
    • TYPE: Ensure that you choose the same type that you used earlier for bulleting the text. For example, if you've already chosen "Circle" to bullet the text, select "Circle" here as well. (Note: If you've already chosen "Circle" earlier to bullet the text, you must choose the same option here.)
    • Position: Decide whether you want the bullet points to appear "inside" or "outside" of the text. This choice can affect the spacing and layout of your list items.
    • Bullet Image: We recommend using an image that's 16px or 18px in height for a clean look. This custom image will replace the default bullet points, allowing you to create a unique style for your lists.


Conclusion

Styling bullet points with custom images in Joomla JCE Pro is a creative way to make your content visually appealing and aligned with your website's theme. Whether you're crafting blog posts, articles, or product descriptions, these personalized bullet points can set your content apart.

Remember to maintain consistency in the size and spacing of your custom bullet points to ensure a polished look. Experiment, preview, and fine-tune until you achieve the desired visual effect.

Give it a try on your Joomla-powered website, and let your creativity shine through your content! 

×
Stay Informed

When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.

Optimising Slide Intervals and Transition Speeds i...
Whats the difference between CAT5e, CAT6, CAT6a, C...

Related Posts

Information

For over two decades, we've been helping businesses and individuals with all their Technical Support and Website Service needs - at home and worldwide. And we don't just rest on our laurels - we're always pushing ourselves to stay ahead of the game regarding the latest tech trends. But most importantly, we're committed to providing great service to all our clients - no matter how big or small.

Useful Links

Address

COR Solutions
Repair Center (by appointment only)
52 Walsworth Road
Hitchin
Hertfordshire
SG4 9SX

 

Map