Incorporate custom styles into Joomla articles

Is there a way to apply custom styles to articles in Joomla without them getting deleted by the editor?

<style>
    span{
        color: #0099ff;
    }
    img{
        float: right;
    }
</style>
<div>
    <h3>
        <span>
            <strong>
                <em>Water Innovation through Dissemination & Exploitation of Smart Technologies</em>
            </strong>
        </span>
    </h3>
    <img src="/images/home/ict4water_projects_logos.png" alt="ICT4Water projects logos" width="400" height="225"/>
</div>

Answer №1

To save an article temporarily, you have the option to disable the editor in the global settings or configure a list of permitted tags in the editor settings.

Answer №2

Whenever feasible, it is recommended to steer clear of utilizing embedded CSS. Perhaps consider integrating your custom CSS into the template.css file of your template (or a custom.css file if available)?

If not, following Victor Yuoshev's recommendation should suffice. However, keep in mind that any future modifications to that specific article will require the editor to be disabled. Otherwise, the embedded CSS will be removed once you attempt to save the changes.

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

Tips for creating a cohesive group of HTML elements within an editable area

Imagine having a contenteditable area with some existing content: <div contenteditable="true"> <p>first paragraph</p> <p> <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-s ...

Sticky positioning and outline effects

I have been working on creating a scrollable list with "sticky" headers. The functionality seems to be in place, but there are some visual glitches that I've encountered. The list itself is structured using a ul element styled with the Bootstrap 5 cl ...

Is there a way to conceal the scrollbar in the mobile view (on a mobile device or emulator) in a React application without disrupting the scrolling functionality?

I am looking to conceal the scrollbar on mobile devices throughout my app while still allowing users to scroll. I have attempted to hide the scrollbar using CSS properties like scrollbar, scrollbar-thumb, scrollbar-thumb:hover, and scrollbar-track. This ...

Make the header stretch to the top of the page using CSS rounded edges

I'm trying to eliminate the white space above my blue header on a webpage with rounded corners. The header is at the top of the wrapper, but there's some empty space before it starts. Is there a way to make the header start right at the top edge ...

Contact form script malfunctioning, showing a blank white page

Encountering a white screen when trying to submit my contact form with fields for Name, Email, Subject, and Message. I am looking to receive emails through my website. I have double-checked all variable names and everything seems to be correct. Since I am ...

Displaying an image within a textarea using JS and CSS

Could someone help me create a form with textareas that have small images on them? I want clicking on the image to call a function fx(). Can anyone code this for me using JavaScript/jQuery/CSS? In the image below, clicking on "GO" will call Fx() I attemp ...

What is the best way to ensure that custom JavaScript and CSS files in Sphinx are always loaded with the most recent changes

Within the configuration file conf.py for Sphinx, I have specified the following: html_css_files = ['css/custom.css'] html_js_files = ['js/custom.js'] However, any alterations made to custom.js or custom.css do not immediately appear i ...

To prevent the page focus from shifting, make sure to force click on a blank link

My question involves an empty link: <a href="#" id="stop-point-btn">+ add stop-point</a> This link is connected to a JavaScript function: $("#stop-point-btn").bind("click", addStopPoint); The JS function simply inserts content into a specif ...

Unable to generate a menu with bootstrap

Hey there, I've been experimenting with creating a responsive menu using Bootstrap, but I'm struggling with the implementation. My vision is to have a logo on the left side and a menu on the right side. Below is the concept for my menu design. ...

Creating a Collage with Varied Image Sizes

Hey there, I'm trying to achieve something that seems simple, but I can't quite figure it out. What I want to do is query a table and display the results in two separate divs on my webpage. Here's an example of the HTML structure I have: &l ...

How can you spot the conclusion of different lines that refuse to remain in place?

Currently, I am facing a jquery issue that has left me stumped. The website I am working on is structured as follows: <div class="Header"></div> <div class="main"><?php include('content.html'); ?></div> <div clas ...

Beautiful prompt interface for HTML

I'm attempting to create a sweet alert using the HTML option: swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true }); Instead of just text, ...

How to Create a Compact JavaFX ComboBox

I'm attempting to create a more compact version of the ComboBox, but no matter what I try, the space between the text and arrow button remains consistent. When using the following CSS: .combo-box-base > *.arrow-button { -fx-padding: 0 0 0 0; ...

CSS animation triggers filter transition malfunction in Google Chrome

My HTML contains several <a> tags that have different images as backgrounds. I want these <a> elements to move across the page in an animated manner and have a grayscale filter applied to them. When hovered over, they should return to their ori ...

In Javascript, swap out a particular colored region in an image with a different image

I've been scouring the internet in search of a solution to my problem, but it seems like I might not be looking in the right places. Imagine this image below, how can I replace the blue area with an image uploaded by the user? I'm struggling to ...

Guide to center-aligning ElementUI transfer components

Has anyone successfully incorporated ElementUI's transfer feature inside a card element and centered it? https://jsfiddle.net/ca1wmjLx/ Any suggestions on how to achieve this? HTML <script src="//unpkg.com/vue/dist/vue.js"></ ...

The CSS outline has a soft, rounded appearance rather than a sharp

https://i.sstatic.net/Mkb8Z.png Is there a way to prevent my outline from having rounded corners as it expands during the animation? Note: The issue seems to be present on Linux and MS Edge, but works fine on Mozilla Firefox. Any solutions for MS Edge us ...

Combining the jquery-UI slider functionality with the canvas rotate() method

Is there a way to rotate an image using html2canvas plugin and jQuery UI slider? I am new to programming and need some guidance on how to achieve this feature. Here is my current progress: http://jsfiddle.net/davadi/3d3wbpt7/3/ ` $("#slider").slider({ ...

Add a hyperlink alongside every row in the table

My table comprises three columns in each row, and I am looking to include a link next to each row. <table> <th> Name: </th> <th> Price: </th> <th> Description </th> ...

Error arising from CSS positioning with dynamically generated images

My challenge is displaying dynamic images from a database alongside details like color, name, and size, with a hover effect that shows a border. Whenever I hover over one image, the other images shift to the right or left. I want them to stay in place. T ...