The base.css file for the Plone site is no longer loading, resulting in a messed up layout

A few days ago, we activated ploneFormGen on our website. Since then, the layout of the page has become distorted, with portlet columns displaying headers and items in different widths. I have a backup copy of the site where the layout was perfect, but the content is outdated. Therefore, I am trying to troubleshoot and fix the current site instead.

After extensively comparing the current site with the backup, I noticed that although the main template and custom.css files are identical, the current site (the one with layout issues) appears to only be applying custom.css based on Firebug's analysis, while the backup was also utilizing base.css.

At this point, I'm feeling a bit lost as I am unsure where to look to understand why base.css is no longer being applied. Does anyone have any insights or suggestions? The website in question is .

Thank you for any help!

Answer №1

An issue seems to be causing the file to return empty. It is possible that there may be a problem with portal_css. You can try toggling the development mode on/off or verifying if there is an empty base.css file in portal_skins/custom.

Answer №2

If you want to check if base.css is enabled, go to the Zope Management Interface (ZMI) and look for portal_css.

It's worth noting that in development mode, each CSS file is served individually, whereas in production mode, they are combined and compressed into one file. The URLs of the merged resources are determined by the first CSS file included in the bundle. Therefore, a URL ending with custom-cachekey1234.css might still contain base.css. You can verify whether resources have been merged in the portal_css tool by checking the checkbox at the top of the page.

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

disable the button border on native-base

I'm attempting to enclose an icon within a button, like so: <Button style={styles.radioButton} onPress={() => { console.log('hdjwk'); }}> <Icon ...

How can you achieve text wrapping and responsiveness while making an image float to the right with Bootstrap?

I'm currently utilizing Bootstrap to create a web page showcasing an article with multiple images. The images that float left are working as expected. However, I am facing an issue when trying to make the image float to the right. I have attempted th ...

Guide to setting up Docker Nginx to work with an Express and React application on a Windows

After finding tutorials about CSS, React, and Node, I realized none of them combined all three. My goal is to learn how to deploy react websites on my domain for testing purposes. However, the learning process has been overwhelming with the cascade of new ...

HTML text replaces itself auto-magically

When I try to insert plain text as HTML using AJAX (jQuery) into a div, the text ends up rewriting itself. I'm not sure if sharing all my code would be helpful, but maybe someone has encountered this issue before and can offer some guidance. My setu ...

Document.querySelector failing to execute the if statement properly

Currently, I am working on implementing a hamburger menu functionality. The basic setup involves creating a menu that transforms into a cross icon when clicked, and this part is functioning correctly. function drop(){ let bars = document.querySelector(" ...

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

I am trying to dynamically change the style of a div element in the master page from my child page. This is the code I am using: protected void ShowMsgText(int MsgID) { HtmlGenericControl MsgInner; MsgInner = ((HtmlGenericControl) ...

Creating a table with multiple rows condensed into a single row (Using Material-UI/CSS)

Here is the array structure I am working with: const sample = [ { name: 'apple', detail: [{'a', 'b'}]}, { name: 'banana', detail: [{'a', 'b'}]}, ]; In order to create a table similar to the ...

Hiding an image when pressing on a navbar icon: Tips and tricks

How can I toggle the visibility of an image when the bars icon is pressed on smaller screens, using CSS without JQuery or JavaScript? I have attempted to hide the image with visibility: hidden; in CSS but it does not work as intended. Please run this cod ...

Excessive space above and below content while navigating on mobile devices

I'm in the process of creating a new website and I want the navbar to stay fixed at the top when scrolling. The issue is that on mobile devices, there is white space either at the top or bottom when scrolling. The problem arises because I have a side ...

Create a Django website feature that enables a button to direct users to another application

I'm working on creating a customized button that will redirect users to another app when clicked. Interestingly, this code snippet is functional: <a href="{% url 'ridesharing:ride-list' %}" target="blank">Find a ride</a> How ...

What is the best way to create divs that can close and hide themselves when clicked from inside the div itself?

I have a situation in my code where clicking a link reveals a div, and then the same link must be clicked again to hide it. However, I want to modify this so that any link within the div can also hide it when clicked. I currently have eight divs set up lik ...

What could be the reason my spin animation is only triggered once upon button press?

Every time the submit button is clicked, I want all the images to spin. However, this rotation effect only works the first time the button is pressed, until the page is refreshed. I have used jQuery to add and remove a class from the images when the button ...

What is the best way to align the navigation menu in the center?

<nav> <a href="/C:\Users\Emily O\Documents\WebDevelopment\JamminJava/index.html">Home</a> | <a href="/C:\Users\Emily O\Documents\WebDevelopment\JamminJava/menu.html">Menu</a> | ...

Customize Bootstrap breadcrumbs with Font Awesome icon divider using SASS

Looking to customize the default breadcrumb style using SASS. Following the guidelines from Bootstrap 4 beta 3 documentation, I made changes in the custom.scss: $breadcrumb-divider: "\f105"; //using FontAwesome icon for fa-angle-right However, setti ...

I'm looking to showcase the list in a navigation bar by clicking on the hamburger menu. I want to include the 'home' and 'about' text specifically

Having trouble implementing the hamburger menu functionality in my HTML/CSS project. When clicked on a shrunken screen, I want the 'Home' and 'About' text in the nav to appear stacked on top of each other. JS is causing me some difficul ...

Achieving a customized CSS ribbon that displays exclusively on specific images sourced from a Django database

I am currently utilizing the Django framework for my project. I have implemented a CSS that applies a ribbon to an image, but I only want this ribbon to appear on certain images stored in the database. Within the HTML file for displaying product details, I ...

Encountering a vast expanse of empty white void

Attempting to create a scrollbar within my content div instead of the entire window seems to be causing a large white space in the content box, and I'm struggling to understand why. Can someone take a look and help me identify the issue? You can view ...

Creating a navbar that sticks to the top of the page

I've been working on some code to create a sticky navbar that remains fixed as I scroll down, but unfortunately, it's not working. I suspect the issue might lie in the CSS, as the HTML and javascript seem fine. Interestingly, this same code has w ...

Modify the attributes of a CSS class according to the chosen theme (selected within the user interface) in Angular 8

I have a custom-built application with Angular 8 where users can switch between two unique themes in the user interface. I have a specific div class that I want to change the background-color for each theme, but unfortunately I am having difficulty achievi ...

Using CSS absolute/relative positioning in a flyout menu: Utilizing specific parent properties (such as left, top, width, vertical/horizontal alignment) while disregarding others

I recently encountered a common issue in CSS involving flyout menus with sub-menus that are shown on hover. When attempting to position the sub-menu directly below the parent list item, I used position:relative; on the parent item and position:absolute;top ...