Updating the background color and adjusting the main content background on a WordPress site

After spending nearly an hour searching for a solution to my problem with no luck, I've come to the conclusion that most YouTube videos are not helpful at all. My website is built on WordPress and I am attempting to change the background color and main content on specific pages.

Below is the code that I attempted to implement in the Custom CSS box:

.page-id-2
{
background: #FFFFFF
}

.page-id-2 .content {
background: #FFFFFF
}

Unfortunately, this code did not produce the desired result.

You can visit my website here: www.graspdating.com

javascripthtmlcsswordpress

Answer №1

Here's a helpful tip for you. Make sure to use the correct selector, which should be an ID (#) instead of a Class (.)

UPDATE

.page-id-2 #content, 
.page-id-2 #content article,
.page-id-2 #content #search-2,
.page-id-2 #content .enl-widget-title,
.page-id-2 #content #secondary,
.page-id-2 #content .arc-entry-meta { background-color: #FFFFFF }

By implementing this code, it will completely change the background color of the content area to white. Feel free to adjust or remove elements if you want different colors for specific parts.

Answer №2

To override the current class properties, you will need to make use of other class properties. There are several methods available for overriding properties. For instance, if you have the following defined for your .site-content:

.blog .site-content { background: #eeeeee;}

Any of the following examples could be used to override it:

.blog .site-content { background: red !important;}
body .blog .site-content { background: red;}
.page-id-2 .blog .site-content { background: red;}
body.page-id-2 .blog .site-content { background: red;}

The first one achieves priority through the use of !important; a direct approach... The others achieve priority by their selector specificity;

In summary, properties can be overridden based on selector specificity (https://www.w3schools.com/css/css_specificity.asp) and/or by utilizing the !important declaration (https://css-tricks.com/when-using-important-is-the-right-choice/)

Answer №3

An effective way to achieve this is by utilizing dependencies, for example:

body .page-id-2 { background: #FFFFFF; }

You can also implement a similar approach like:

body.page-id-63 #content { background: #FFFFFF; }

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

AngularJS ng-view is a directive that views the application

I am currently struggling to create an angular js menu. I have been working on my code, but the pages are not loading as expected. Do you think I missed something or did I forget to include all the necessary scripts? I am fairly new to angular and could us ...

javascriptjqueryangularjs

Javascript Calculator with Dual Input Fields

I have been given a task to create a calculator by tomorrow using Javascript. Unfortunately, I am currently taking a distance course and Javascript has just been introduced in this assignment. While I am familiar with HTML and CSS, Javascript is something ...

javascripthtmlcss

The map feature is not working on the imported Obj file

After my previous question here, I'm attempting to give each side of this obj a different texture. However, despite applying everything in the correct order, nothing is showing up and there are no console errors. It seems like a simple task but I&apo ...

javascriptthree.js

Tips for transferring input values between two PHP pages

I need to save various input values in a MySQL database, such as first name, last name, phone number, and mobile number. With a select query, I can retrieve all the entries from the database and display them on a single webpage. When a user clicks on a sp ...

phpmysqlhtmlcss

Utilizing Tween for camera animation

Currently, I am attempting to smoothly adjust the camera's rotation in order to focus on a specific object within a graph. Up until now, my implementation includes: fourd.render_loop.push(() => TWEEN.update()); fourd.intersect_callback = functio ...

javascriptthree.jstween.js

Filling HTML5 Datepicker Using Information from a Model

Currently, I am in the process of developing a basic scheduling application for a project. To simplify the task of selecting start and end times/dates for our events, we have included a simple DateTime picker in the source code: <input type="datetime-l ...

javascriptasp.net-mvchtmlrazor

Tips for running a function at regular intervals in NodeJS

I've experimented with the setInterval() method before. While it seemed ideal, the problem I encountered was that it didn't start the first call immediately; instead, it waited for X seconds before producing the desired value. Is there an alterna ...

javascriptnode.js

Switching the Cart loop to the Order loop in WooCommerce for generating PDF invoices

I'm currently utilizing woocommerce along with the "Print Invoices & Packing lists" extension found at "". To show the total savings on the woocommerce cart and checkout pages, I have implemented the following code which is functioning perfectly: ...

phpwordpresswoocommerceordersinvoices

The efficiency of Testing Library findBy* queries is optimized when utilized alongside async/await functionality

After reviewing the documentation, it was noted that queries made using findBy return a Promise. Interestingly, utilizing these queries with Promise.prototype.catch() seems ineffective in comparison to pairing them with async/await + try...catch. An insta ...

javascripttesting-library

The dynamic php form features a single set of buttons labeled Next and Before for easy navigation

I am in the process of creating a dynamic form using a single PHP file that displays and saves data from an SQL database. I now want to add two buttons, NEXT and BEFORE, but I have been having difficulty getting them to display or navigate to the next/prev ...

phphtmlsqlbuttonsubmit

Automatic parsing and formatting of JSON object keys

My form is populated automatically using a script. Whenever the user selects an option from a dropdown, an AJAX request is triggered to an external file (which retrieves data from a database using json_encode) and populates the form fields. Here is the sn ...

javascriptjqueryjsonajax

Looking for a jQuery Gantt Chart that includes a Treeview, Zoom functionality, and editing capabilities?

I am in need of integrating a dynamic Gantt Chart tool into a room booking solution using jQuery. The Gantt chart should be highly interactive, allowing for drag-and-drop functionality, a tree view on the left to group tasks, and a zoom feature for adjusti ...

javascriptjquerychartsgantt-chart

Looking to deactivate the entire keyboard with JavaScript? Make sure that the start key is not disabled, not even Ctrl

Despite my efforts to disable the entire keyboard using JavaScript, I have encountered some limitations. The Windows Start key and Enter key are not being disabled by my script. <script type='text/javascript'> document.onkeydown = functi ...

javascriptjquery

Function wrapper intended for axios

How can I create a wrapper function for axios? I am looking to create a function that can return axios, allowing for easy substitution with another fetch API in the future. This is what I have attempted so far: import axios from 'axios' expor ...

javascriptreactjsaxios

Display the length of an array using AngularJS

Hey there, I'm currently having an issue with printing a list where each entry is supposed to follow the format "element X of TOTAL". However, instead of displaying the total value, it appears as blank text. It seems like a simple mistake, but for som ...

javascriptangularjs

Width and left values don't play well with absolute positioning

I am encountering an issue where a div with absolute positioning, which is a child of another absolute positioned element, is not behaving as expected. Despite setting width:100%; left:1px; right:1px on the child element, it extends beyond its parent. < ...

htmlcss

Connecting buttons to JavaScript functions that interact with MySQL database entries

I am working on a task involving rendering a database table using XMLHttpRequest in JavaScript to a PHP page. My goal is to display each entry from the table as an HTML row/cell with two buttons within each "entry". These buttons should trigger specific Ja ...

phpjavascriptmysqlhtmlajax

Setting up WebPack for TypeScript with import functionality

A tutorial on webpack configuration for typescript typically demonstrates the following: const path = require('path'); module.exports = { ... } Is it more advantageous to utilize ES modules and configure it with import statements instead? Or is ...

javascriptreactjstypescriptwebpackconfiguration

Ways to implement a space above the navigation bar in Bootstrap 4 to accommodate text or buttons

I am trying to add a greeting message above the navigation bar, like: Welcome Sarah! Take a look at the image below to see what I currently have: https://i.sstatic.net/4v2Fd.png As shown in the image, I want to display "Welcome Sarah" above the Login | ...

csshtmlnavigationbootstrap-4

Utilize AngularJS to create a custom tag with a directive included

I've been working on creating a custom tag for a reusable component in a web page, but I seem to have hit a roadblock. It's not functioning as expected, and I feel like I might be overlooking something. If anyone could provide some guidance or p ...

javascripthtmlangularjsangularjs-directive