Remove the default CSS styling from Django CMS

When using Django CMS' text plug-in, I've noticed that the text is hardcoded with its own CSS, specifically within the p tags. Is there a way to remove this default styling? I would like for the text to inherit the styles defined in the theme I am currently using. Unfortunately, I haven't been able to find an option to do this in the GUI, and the documentation for the text plug-in doesn't mention a solution either. docs for the text plug-in.

Answer №1

Upon examining the template utilized by the text plugin, one can observe that it essentially displays the content of TinyMCE (or any other WYSIWYG editor in use), indicating that the markup visible is most likely from there, and not the template itself.

To customize this template, one can create a text.html file within their templates folder (e.g. /templates/cms/plugins/text.html) and include a surrounding div:

<div class="cms-text-plugin">{{ body|safe }}</div>

Subsequently, CSS can be applied to target the elements:

.cms-text-plugin p{ ... }
.cms-text-plugin h1{ ... } 

Answer №2

To customize the template for individual CMS plugins, simply replicate the directory structure and file name in your templates directory. This allows you to have full control over the markup. This process mirrors the idea of overriding templates from external sources in Django, such as overriding admin templates.

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 effectively sizing a logo within a Bootstrap navbar

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link ...

Creating the Perfect Layout: Unveiling the Secrets of Bootstrap 4

Currently in the process of working on a website, I have encountered a particular challenge regarding the layout design using Bootstrap 4. (Highlighted in Red) https://i.sstatic.net/k8bKv.png The issue at hand is that the first column is a col-md-7 and t ...

Creating interactive web forms in Django can be made more efficient by implementing a single

Currently, I am facing a unique challenge that involves two pages displaying data from the same source using data tables, each with an "edit" button that directs users to a form to edit object details. However, I am struggling with redirecting back to the ...

Exclusive Design for Progress Bar in HTML and CSS

I am currently working on creating a unique progress bar with numbers at both ends, where the left number represents the current value and the right number represents the maximum or target value. Although I have managed to display the two numbers, I am fac ...

Tips for aligning a menu that expands from the side to the center

I'm trying to center the menu on my webpage, but the issue is that it's stretching from the sides. Here's a sample image of the menu layout: I'm struggling to figure out how to fill the empty space on the left side of the menu. ...

Steps to create a button that moves along with a div slider using toggle functionality

I have successfully created a navbar that toggles when a button is clicked. However, the button remains fixed in one position and I would like it to move along with the sliding navbar. How can I achieve this? $(document).ready(function() { $("#flip"). ...

Scrolling triggers Navbar Hover for all links

Currently, I am utilizing a free html5 theme as a foundation for a website project, but I require assistance with the Navbar Hover function. If you wish to see the original html5 theme, you can visit The theme was initially designed as a one-page layout, ...

Avoiding uib-popover from getting clipped by uib-carousel

I have a small widget with a popover that works fine when placed inside a div, but gets clipped when inserted into a carousel. Here's an example to illustrate what I mean: (The top image shows the widget in a div without clipping) https://i.sstatic. ...

Hiding overflow when navigating back a page in Safari

I need help finding a solution to this issue. On my website, the results page works perfectly fine until I navigate to a product's details page and then return to the results using the "page before" button. At that point, the overflow becomes hidden, ...

Adjusting the Aspect Ratio of an Embedded YouTube Video

<!DOCTYPE HTML> <head> <style> body { overflow: hidden; margin:0; } </style> </head> <body> <iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&sh ...

Enhancing PrimeNG Components with Custom CSS Styles

I have embarked on a project to develop a sleek user interface utilizing Angular 4, Angular Materials, and PrimeNG components. The most recent challenge I am facing involves the MultiSelect Component from PrimeNG: https://www.primefaces.org/primeng/#/mu ...

Tips on using Bootstrap 4 containers within a container-fluid and ensuring text stays within a container at all times

What is the best way to incorporate a Bootstrap 4 container within a container-fluid? how can we ensure that text is always contained within the blue section? ...

Click to position custom text on image

Is there a way to adjust the position of text on an image after it has been clicked? I have included an image below to demonstrate how I would like it to appear: https://i.stack.imgur.com/unmoD.png function revealContent(obj) { var hiddenText = obj. ...

Creating a Circular Design with Text at the Center Using CSS

I'm facing a challenge with this https://i.sstatic.net/zQiF8.png The alignment of the icon is off. I would like to adjust it slightly upwards for better presentation. Below is my HTML (angular): // Icon component <div> <i><ng-c ...

When the direction is right-to-left (rtl), the floating labels in Bootstrap slide towards the center

Seeking to implement floating labels in Hebrew using bootstrap v5.2, I encountered a challenge. When switching the direction to rtl and clicking on the input box, the label slides towards the center. Here is my code snippet: <div class="form-f ...

Adjust vertical dimension using rich text editor tag

I am currently using JSF with RichFaces version v.3.3.1.GA. I am trying to decrease the height style of the rich:editor tag (using TinyMCE), but for some reason it does not seem to be changing. <rich:editor id="transactionResult" style="height: 10px;" ...

What is the best way to differentiate between several elements inserted via JavaScript in my HTML code?

I'm attempting to replicate the image below using HTML and JavaScript: https://i.sstatic.net/kvmqk.jpg So far, this is what I have: https://i.sstatic.net/8iHfB.png Here's my JavaScript code: function createLink(text, parentElement) { var ...

Access limited to viewing rights in the administrative dashboard

After reading through this post on , I found myself stuck at step 3. The author mentions adding "get_view_permission" to the default model class. But which class exactly is the default model class? I tried following the instructions but encountered the fo ...

Making the toggle button functional on the navbar

Trying to customize my navbar for tablet and mobile devices is proving to be a challenge. I am looking for a way to make the dropdown button take up the entire page when clicked on. It seems like JavaScript might be the solution, but I'm not quite sur ...

Which is more effective: coding with just plain JavaScript and CSS, or utilizing frameworks?

As a student, is it more beneficial to focus on utilizing pure JavaScript & CSS or frameworks? And which approach is best suited for the professional field? ...