Compilation Errors in CSS

Having some trouble programming my website for OceanGrownFin.com. Specifically, the CSS backgrounds for events, video pop out, and twitter feed are not displaying properly when I scroll through the site. In the .less files, I pointed to the images I wanted to use but they aren't showing up. For example: 

.cbx-event {
    background: url(/assets/img/shows_bg.png)no-repeat center fixed;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    color: #ffffff;
    .cbx-inner {
        .bg-rgba(@black-color, 0.8);
        padding: 11rem 0 11.4rem;
    }

    .cbx-heading {
        h2 {
            i {
                color: @white-color;
                span {
                    background: @white-color;
                }
            }

        }
    }
In my event.less file, this is the code that's being used. I was advised to compile these .less files using Koala and WinLESS. However, when I try to compile them on both programs, I receive an error message: C:\Users.........\themeforest-17690374-musix-music-band-html-template\ogf\assets\less\event.less NameError: variable @black-color is undefined in C:\Users\royal\Desktop\OG FIN WEB\themeforest-17690374-musix-music-band-html-template\ogf\assets\less\event.less:14:17 

13     .cbx-inner {
14         .bg-rgba(@black-color, 0.8);
15         padding: 11rem 0 11.4rem;
Apologies if this is too detailed, just trying to provide all the information I have. I have basic HTML knowledge but may have missed something simple.

htmlcsscompilationless

Answer №1

It is important to note that in order to resolve the error, you must define variables as mentioned and detailed here .

Prior to applying your styles, either at the beginning of the file or in a separate file with the variables that are to be loaded/imported first, specify the colors as follows:

@black-color: #000000;
@white-color: #FFFFFF;

After defining the variables, attempt to compile the files once again.

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

Update the query string to accommodate several values

Having an issue with my query string. Whenever multiple values are selected, my Django search function malfunctions. The URL displays ?Query=value1&Query=Value2, but only the last value is actually searched. I need both values to be searched using an A ...

htmldjangojquery-select2

Checking for the presence of an element prior to moving forward in a selenium and python script

Is there a way to create a loop that runs as long as a specific div element appears on a website? I am trying to navigate through several pages and click the "next" button for each page. The last page does not have the div element I am looking for, so I w ...

pythonhtmlselenium

Is there a way to set up a basic form on my website (cPanel based) that is only accessible during specific time frames?

Every week, I host a conference and I want to keep track of which participants are present. I want attendees to visit my website, input their name, and click "Enter". Then, I want their information to be saved in a database on my website. My website is man ...

phphtmlformscpanel

Tips for creating smoother transition animations with ng-show/ng-hide in AngularJS

Our development team at ServiceNow is currently working on a project that involves incorporating multiple widgets into different tabs on a page. To show and hide these tabs, we are utilizing the ng-show/ng-hide method along with applying some basic transit ...

cssangularjscss-transitionsservicenow

Tips for locating a file within an input element in HTML using jQuery

I attempted to upload a file using jQuery's $.ajax call and formData. To add the file to the formData, I initially tried: var fd = new FormData(); fd.append($('#myFileInput)); However, this method failed. Next, I attempted: var fd = new Form ...

jqueryhtmlfile-io

"Troubleshooting: Issue with Angular ng-click functionality not

I'm struggling with the code below: <div class="row"> <div ng-repeat="stat in stats"> <div class="col-lg-3 col-md-6 col-sm-6" ng-click="hideShow=(hideShow ? false : true); vm.charts(stat.jobId)"> <div cla ...

htmlangularjs

Restore original scale ratio to 1:1 following zoom

I am looking for a way to revert the image back to its original zoom level when a button is clicked using the onclick() event. I require the specific code for the onclick() event function. This is the div element in my HTML: div id="zoom"> ...

javascripthtmljqueryzoomingpan

CSS - The color gray transforms into a crisp white when printed

div { background-color: #dcdcdc; } I've noticed that the gray color of the above code looks nice on screen but turns out white when I try to print it. Any suggestions on how to solve this issue? ...

css

Applying position: absolute in HTML/CSS to lock parent and child elements in

Transform the boxes into concentric circles (circles within each other that share the same center). The outer circle should be black with a size of 300px and the inner circle should be white with a size of 200px. html: <div id="p10"> <div id ...

htmlcsspositioncss-positionabsolute

Is there a way to verify an email address and transfer form data to a different HTML page for printing?

How do I troubleshoot email validity checking issues in my form? It works fine when no characters are entered, but fails when characters are inputted. What could be causing this problem? Additionally, I want to open a new HTML sub-file after form submissi ...

javascripthtmlreactjsforms

Add a new div in Javascript and include an HTML icon inside

This Django project includes a JavaScript function that generates a new div to display certain data. for (var i = 0; i < files.length; i++) { var newDiv = document.createElement('div'); newDiv.setAttribute("class" ...

javascripthtmlcssdjango

Refresh WebPage automatically after a Servlet successfully uploads and processes an image

I have a webpage that includes an image and a button. When the button is clicked, it uploads the image by submitting a form to a file upload servlet. However, after successfully uploading the image, the servlet does not display it in the img tag. Here is ...

javascriptjavajqueryhtmlservlets

Understanding the relationship between CSS height and line-height can help developers create more

Is there a way to use CSS to set the height of a box based on its own line-height or its parent's line-height? This feature would make it much simpler to create text areas that are a specific multiple of lines, for example, displaying exactly three l ...

css

Guide on Implementing CSS Selectors in Selenium WebDriver

I am attempting to locate a specific element within a table in my project. Here is what it looks like: The CSS Path for this element is as follows: #gridForm > div > div:nth-child(2) > div > div > div.divtablerow > div > div.span11.l ...

htmlcssseleniumxpath

Approach to Using Bootstrap 4 with Intl-Tel-Input

I've been attempting to integrate intl-tel-input with bootstrap 4, but I'm facing an issue where the placeholder for the input is not showing up. I've tried various solutions found online, but none of them seem to work. Here's my HTML ...

javascripthtmlcssbootstrap-4intl-tel-input

Encoding URLs in C#

Similar Question: How can I replace spaces with %20 in C#? I'm searching for a URL encoding solution in C#. While I am aware of Server.UrlEncode, I believe it encodes spaces as a + symbol. I vaguely recall another method that encodes spaces as %2 ...

c#asp.nethtml

Utilize HTML5 and JavaScript to calculate the velocity of a device by employing devicemotion and device

Can device speed in km/h be calculated using the devicemotion/deviceorientation HTML5 API? I am interested in determining whether a user is walking, running, or stationary without relying on the geolocation API, which may not be accurate indoors. ...

javascripthtmldevicemotion

In Laravel Blade, the modal content is obstructed by the Modal Backdrop on portrait screen orientation

Within my Laravel Blade, I encounter an issue where a modal pops up in portrait orientation on an iPad Pro, but is obstructed by the backdrop div. The message prompts the user to rotate the screen to landscape mode. However, the modal works perfectly in la ...

javascripthtmlcssbootstrap-4laravel-blade

Is there a way to seamlessly integrate a PDF file into a KnockoutJS template without triggering any warnings from PDF plugins?

I am attempting to embed a PDF document in an HTML view, with the assistance of a Knockout ViewModel that supplies the URL for the document. I understand that the appropriate HTML element for this task is <object>, so my view looks like this: <di ...

htmlknockout.js

What is the best way to elegantly display a block containing background and text using Angular and ngAnimate?

I'm a beginner when it comes to JavaScript and Angular. I am attempting to use ng-show and ng-hide for my background and text elements. However, I am experiencing an issue with my text: It smoothly hides, but when it is shown again, the text appears b ...

javascriptcssangularjsng-animateng-show