Including new styles in CKEDITOR.stylesSet that pertain to multiple elements

My idea involves creating a unique bullet list style with two specific features:

a. A blue arrow image replacing the standard list icon

b. Very subtle dotted borders above and below each list item.

I am looking to incorporate this design into CKEditor through CKEDITOR.stylesSet, allowing users to easily select this custom list style from a drop-down menu without the need to manually code it.

Although I have made progress in applying a specific class to the list (and styling it accordingly), I am facing challenges because using multiple backgrounds via CSS3 is the only way to achieve both the dotted line and blue arrow effects. Unfortunately, this method does not work in Internet Explorer 8 or older versions.

If I were to introduce some DOM manipulation (such as wrapping the text of each list item in a span), I could potentially style it as desired. However, it seems that CKEDITOR.stylesSet only allows for setting one element per style - either ul or li, but not both together.

Unless there is a workaround that I am unaware of? While considering resorting to JavaScript for a solution, I am also open to alternative suggestions for accomplishing my goal.

Any advice would be greatly appreciated!

csscross-browserckeditor

Answer №1

Avoid using background images for the arrow or dotted line by utilizing CSS instead. Simply apply a class to the <li> with CKEditor and then use CSS code like this:

.styled li {
    border-top: dotted 1px black;
    border-bottom: dotted 1px black;
}
.styled
{
    list-style: square url('http://www.wcb.ny.gov/site_images/blueArrow.gif')
}

For a complete example, visit http://jsfiddle.net/jwynveen/ZhjCK/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTML element <a> can have both a href attribute and a onclick attribute

I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...

javascriptjqueryhtmlcss

How to retrieve the value of an element within a facebox div with jquery

On my page, I have two div tags displayed below. Whenever I try to retrieve the value of the itemName element using $('#itemName').val();, it always returns the value of the element in the first div (which is blank). Is there a way to access the ...

javascriptjquerycss

What is the best way to split a semicircular border radius in two equal parts?

Is there a way to halve the yellow line or remove it from above the red box, while keeping it below? Can this be achieved using just HTML and CSS, or is JavaScript necessary? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 1 ...

javascripthtmlcsscss-animations

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

javascriptcssreactjsmaterial-uinext.js

Style your content using PHP and CSS to format text with multiple selectors

My HTML code looks like this: <div id="main"> <aside class="readableCenterAside left"> ## Content 1 ## </aside> <aside class="readableCenterAside right"> ## Content 2 ## </aside> </div> Here is my CSS: .readableCe ...

htmlcsscss-selectors

Arranging particular placement

How can I position my links to the right of the second photo (opus1) and slightly below the first photo (coverPhoto)? I've tried various methods but haven't found a simple solution yet. <!DOCTYPE html> <html lang="en"> <head ...

htmlcss

Ways to append each list item from one unordered list to the end of another based on their unique styles

I am in the process of making a website responsive and I am faced with the task of combining two different menus. In order to achieve this, I need to transfer all list items (li) from one unordered list (ul) to another. Provided below is a simplified vers ...

javascriptjqueryhtmlcss

Unusual conduct exhibited by jQuery's css() function for setting the width

My goal is to retrieve the width of the initial .imagen element and apply it to the img within .imagen. HTML: <div class="imagen"> <div class="normal"> <img> </div> <div class="hover"> <img> ...

jqueryhtmlcss

Listen up, Javascript keyboard input recorder

I am aiming for the search bar to pop up when you type. The code below is functioning, but I am facing an issue where the search bar pops up even when typing in a different input field, such as the comment input. Is it feasible for the search bar not to ...

javascriptjqueryhtmlcss

Can you provide me with instructions on how to change the background image?

Having trouble with the CSS code I wrote for a background-image. It's not showing up when I set it in my CSS stylesheet. I tested it and found that it only works when written in the body... <body background="Tokyo.png"> ...but not in the styl ...

csshtml

What is the method for toggling background URLs?

Currently, I am utilizing flaunt.js by Todd Moto for my navigation system. My goal is to seamlessly switch the hamburger image with another image when the mobile-menu is shown and hidden. Check out the demo here. For a detailed tutorial, visit this link. ...

javascriptjquerycsstoggleclass

What is the method for placing a title in the initial column with the help of v-simple-table from Vuetify.js?

I am interested in using the v-simple-table UI component from Vuetify.js to create a table similar to the one shown below. After creating the code in codesandbox and previewing the output, I noticed that the title is not aligned properly. HTML↓ < ...

javascriptcsstypescriptvue.jsvuetify.js

The CSS linear gradients rainbow wheel is missing a few sections, only displaying part of its 12

I've almost got everything working, but I'm facing a challenge in displaying all 12 sections of the rainbow wheel. I know it's probably something very simple (Occam's razor). I've been following this amazing tutorial on CSS linear ...

htmlcss

A step-by-step guide on adding a table with colored icons (red, green, and blue) to an HTML page using jQuery

I'm working on a project that requires designing an HTML page with three tables containing images, along with a compare button. Initially, only two tables are visible upon page load, but when the user clicks the compare button, the third table should ...

jqueryhtmlcss

What's the best way to arrange my containers for optimal placement?

I'm attempting to create a Thymeleaf template for rendering a printable PDF. Here is what I currently have: <html xmlns:th="http://www.thymeleaf.org" > <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...

htmlcssthymeleaf

When taking a vertical picture on my iPhone, my Vue component does not function properly

Having trouble with displaying recently uploaded images on a form. If the image is taken from a phone, it may have an exif property that browsers do not handle correctly, causing the picture to appear flipped or sideways. Upside down photo To fix this is ...

javascripthtmlcssvue.jsexif

Preserve the video's aspect ratio within a fixed height and width layout by utilizing CSS styling

I am currently in the process of developing a web application with a fixed height layout that does not utilize flexbox and is also limited by width constraints. My goal is to divide the screen in half both vertically and horizontally, around 50% for each ...

csshtmlvideoresponsive-design

Struggled to Find a Solution for Code Alignment

Is there a tool or software that can align different types of codes with just one click? I've tried using the Code alignment plugin in Notepad++, but it hasn't been effective. For example, when aligning HTML code using tags, I couldn't find ...

javascriptphphtmlcss

Ways to reach the standard look

Check out this follow-up to a previously posted issue. Click here to view it I am currently facing an issue with the code below, where I am unable to make the second button inherit the default border and padding styles. Any assistance would be greatly app ...

jquerycsshtmljquery-animate

Elements in Internet Explorer become unresponsive after being hidden or shown using jQuery

One issue I'm encountering is with a group of tabbed divs that I'm using jQuery hide() and show() to toggle the visibility. This method functions perfectly in most browsers, but unfortunately in Internet Explorer (IE), the hidden tabs become unre ...

jqueryhtmlcssinternet-explorer