Unnoticed Joomla CSS modifications

I've been trying to make changes to the CSS of the Joomla Solarsentinel template, but some of my modifications are not showing up at all!

The website in question is labmond.sism.org and I have embedded my CSS code in the header. Here it is:

// Custom Styling for Introduction
div.bodycontent {
    font-family: 'book antiqua', palatino;
    line-height: 1.4;
    font-size: 1.3em;
    background: url('".$this->baseurl."/templates/".$this->template."/images/labmond-bkg.jpg') no-repeat center;
    background-attachment:fixed;
}

div.full-article h3 {
    color: #ff0000;
}

div.full-article h5 {
    font-size: 1em;
    font-weight: bold;i
}

.csscolumns section.paragrafo {
    -moz-column-count: 2;
    -moz-column-gap: 50px;
    -moz-column-rule: solid #DBDBDB 1px;
    -webkit-column-count: 2;
    -webkit-column-gap: 50px;
    -webkit-column-rule: solid #DBDBDB 1px;
    column-count: 2;
    column-gap: 50px;
    column-rule: solid #DBDBDB 1px;
}

div.full-article section.paragrafo{
    margin-bottom: 3em;
}

// Subscriber Table
table.iscrizioni{width: 100%; border-collapse:collapse;}
table.iscrizioni tr.head td, table.iscrizioni tr.data td{ border: 2px solid}
table.iscrizioni tr.number td{font-weight:bold; color: blue}";

I'm puzzled as to why my styles are getting overridden! Even when I inspect div.bodycontent, I can't see my styles being inherited or overridden.

Can anyone assist me with this issue?

Answer №1

Switch // Formattazione Introduzione to /* Formattazione Introduzione */

The invalid comment will cause all the style declarations after it to fail.

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

Experience a slick sliding animation upon hovering with the mouse

One interesting feature I've added to my video list is a div called "infobox" that slides from the bottom when the mouse hovers over a thumbnail. This is the script: <script> $(document).ready(function(){ $('ul.vlist li').mousee ...

Tips for adjusting the font color of user-provided text within an input box using HTML and CSS

HTML code:- <p><input type="text" placeholder="Enter your username"></p> CSS code:- .main-header input { width: 90%; padding: 1rem; margin: 20px 0px; border: none; border-bottom: 4px solid #5f5fb0; ...

Menu Table displaying errors in layout

I've been struggling to align the menu table to match the homepage, but so far I haven't had any success. It seems like the main index.php page is using its own CSS for some unknown reason. Check out lcrisq.com Here is the desired design: Take ...

What methods can I use to identify my current page location and update it on my navigation bar accordingly?

My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of de ...

How can I align an image and text alongside another image using HTML and CSS?

Having some trouble positioning an Image and Text next to another Image. Check out an example here: I attempted using floats, but it doesn't seem to be working. Here is the code I have: .left {float: left;} .right{float: right;} <div class="left ...

The process of altering a grid in HTML and adding color to a single square

I am facing a challenge that I can't seem to overcome. I need to create a game using HTML, CSS, and JS. The concept involves a grid where upon entering a number into a text box, a picture of a cartoon character is displayed in a square which turns gre ...

What can I do to ensure my text appears closer to the top of the page?

To achieve the desired outcome of displaying "(även uppfinnare)" at the top row, you can use the following HTML: <div class="data-box"> <div class="personName"><strong> 3. Kee Marcello&nbsp; </strong>< ...

Adjust the Column Alignment Without Affecting the Entire Row or Table

My inquiry revolves around altering the sort direction of a particular column within a Telerik RadGrid. Utilizing Firebug, it is possible to identify and modify the sorting direction of a table (either master or detail). However, there seems to be no desig ...

Styling Vue.js router links with the CSS property

I need help changing the default CSS properties for text within a router-link tag. Currently, the text is purple with an underscore and I want to modify the font, size, and color but I'm not sure where to focus in my CSS. I have already attempted usin ...

Is there a way to implement a confirmation form within the properties_list view to ensure the user intends to delete the property

Is there a way to modify the code below so that instead of directly deleting the property, a confirmation form (such as a modal) is displayed for the user to decide whether to proceed with the deletion or not? views.py def property_list(request): proper ...

Choose an element for styling only if it contains a child element with a particular class

Looking to adjust padding based on specific child class <div class="container page-content"> </div> The page-content class typically includes padding: .container.page-content{ padding-top: 160px; } However, there is a special case wher ...

How can you use JavaScript/jQuery to scroll to the top of a DIV?

When a link is clicked, I have a <div> popup that appears. This popup contains scrollable content when there is overflow. If the same link is clicked again, I want the <div> to be positioned at the top of the scrollable area. While this functi ...

Using jQuery to gradually fade out my sidebar (div)

I have written the following code to hide my sidebar when the screen width is less than 1024 pixels, but it doesn't seem to be working. It worked fine on a previous website, so I'm not sure what the issue is here. Any help would be greatly apprec ...

Apply a static style to every rendered component just one time

Is there a way for me to individually style each card image only once? For example, I want to apply a transform style via a function in CSS; I want the image to maintain its original value, but when a new component is rendered, that card should have a di ...

CSS text links have an oversized click area in Chrome and Safari

It seems like there might be an issue in the CSS code that is causing Chrome and Safari to enlarge the hover areas on text links. This behavior is not occurring in Internet Explorer or Firefox. Any pointers on what could be wrong with the CSS? The mouse cu ...

What is the best way to fit the text into a DIV row as efficiently as possible?

Looking for a solution to prevent a span from dropping down to the next line when text is too long within a fixed width and height row. The row consists of three elements, two with fixed widths and the third containing a span and text. Constraints include ...

``When you click, the image vanishes into thin

Could you please explain why the image disappears once I close the lightbox? Access with password: chough ...

Converting a data type into a CSS format

Currently, I am in the process of creating a table and would like to implement a 4-color scheme randomly selected from a pool of 10 schemes. Below is my CSS/PHP code: <?php header('Content-type: text/css'); // 0 grey $color00 = '#95 ...

css absolute positioning and setting the height of a repeating background

I am facing a challenge with a container that contains a repeating image and I want it to fill 100% of the available height. However, some inner divs have their :after pseudo elements absolutely positioned to achieve the desired borders, which is causing a ...

What is the best way to split <hr> tags into different sections?

I'm striving to create a design similar to this - https://i.sstatic.net/hcaST.png Initially, I attempted to use a hr tag and modify it for my purposes. However, my efforts have not yielded the desired outcome. Any assistance in understanding this co ...