My website consists of various pages named as :
These three pages mentioned above require unique background colors. However, the remaining pages/posts on my site inherit their background-color from the style.css file.
I am facing challenges in applying distinct background colors to the mentioned 3 pages due to Bootstrap 3 causing gaps that inadvertently apply background color from the style.css file. Can you suggest a solution to this issue?
To implement this code in your functions.php file, follow these steps:
add_action('wp_head', 'show_custom_template');
function show_custom_template() {
global $template;
// Define an array of custom template names
//$custom_templates = array('page-X.php', 'page-Y.php', 'page-Z.php');
// Extract the template name without the path
$template_name = str_replace('/', '', strrchr( $template, "/" ));
// Check if the current page is using a specific custom template
if( $template_name == "page-X.php" ) {
?>
<style type="text/css"></style>
<?php
}
}
If you're looking to target the body of various pages in WordPress, look no further than the handy body_class() function. You can easily add it to your template files like this:
<body <?php body_class(); ?>>
For more information, check out the Codex: http://codex.wordpress.org/Function_Reference/body_class
To easily apply CSS, you can target the body class in the source code and find the page's ID.
body.page-id-3938{background:red;}
Alternatively, you can use filters to automatically add classes to specific pages and then assign corresponding styles like .red to them.
//Functions.php
if(is_page('X')){
add_filter( 'body_class', my_class_names($classes, 'red') );
}elseif(is_page('Y')){
add_filter( 'body_class', my_class_names($classes, 'blue') );
}elseif(is_page('Z')){
add_filter( 'body_class', my_class_names($classes, 'green') );
}
function my_class_names( $classes,$myclass ) {
$classes[] = $myclass;
return $classes;
}
// Styles.css file
body.red{background:red!important;}
body.blue{background:blue!important;}
body.green{background:green!important;}
Is it safe to assume that if a property is set to auto, it cannot have the value of none, and vice versa? Or if a property has none, can it not have auto as well? I understand that these values have distinct meanings, but I am curious if this concept has ...
My goal is to dynamically populate an HTML table with data retrieved from a SQL query. The structure of the table, including headings, should adjust based on user selections, reflecting the results of the query. While searching for a solution, I came acros ...
I am currently struggling with a few tasks regarding Bootstrap Dropdown Selection and despite looking for information, I couldn't find anything helpful. Check out my dropdown menu Here are the functions I would like to implement: 1) I want the subm ...
I am in the process of creating a database for video spots, where users can view and modify a list of spots. I am currently working on implementing a cart system that automatically stores checked spot IDs as cookies, allowing users to browse multiple pages ...
Can someone assist me in converting a JSON object for use in CSS? I've attempted to do this using Vue.js, creating a map legend with v-for to generate the legend. However, if there is an alternative method that allows me to take a JSON object and ins ...
I am facing an issue with my Spring MVC application where I cannot get an image to display in a CSS file accessed from a JSP file. The CSS is working fine, but the image just won't show up. It seems like there might be an issue with how I am addressin ...
I am currently working with an element that contains both an image and text. View the Fiddle here Note: To see the full grid, resize the preview accordingly. The CSS I have written is as follows: .gridster .gs-w .item{ position: relative; wi ...
Currently, I am a student focusing on honing my skills by working on an app for a blog post. To kickstart my project, I downloaded the "clean-blog" template from the startbootstrap website. If you are interested, here is the link to the template: My curr ...
I run a website that compiles video clips from various sources, including YouTube. Occasionally, some clips appear as private videos. I am looking to use jQuery to apply the display:none; property to the entire div when the class a.colorbox.cboxElement con ...
My querystring is quite long http://terra.cic.local/web/index.cfm//pm/uebersicht?sucheAufgeklappt=was%2Cwie%2Cwohin%2Cwann%2Cwer&sucheVon=&sucheBis=&sucheIstErsteSeiteAnzahlProdukteErmitteln=false&sucheIDReiseart=26&sucheHotelart=1081& ...
While developing a WordPress plugin for a custom Gutenberg block, I encountered a challenge. I needed to incorporate additional scripts in TypeScript and opted to use "$ tsc --watch" along with a "tsconfig.json" file for compilation. Upon installing @word ...
Is it possible to include PHP code in JavaScript? I have come across information stating that this practice is not recommended: document.getElementById('id1').innerHTML="<?php include my.php?>"; If including PHP directly in JavaScript is ...
I've been attempting to make a simple post request from an HTML page, but when I check the console after the post, it doesn't return anything. I'm confident that I have correctly set up the body parser on the server side. Could there be some ...
<div id="unique-example" class="k-unique-content"> <table id="unique-grid" style="float: left; position: relative"> <thead> <tr> <th width ="410px"data-field="UniqueFileName">Unique File Name ...
Vuetify provides the v-resize directive, which is demonstrated in an example using window size. I am interested in utilizing this directive to monitor the size of a specific component (e.g. v-flex). In the provided codesandbox example, the objective is t ...
I'm working on a project where I need to display three separate articles based on the screen size. Article 1 should only be visible when the screen width is less than 600 pixels Article 2 should be visible between 600 and 900 pixels Article 3 shoul ...
I am currently working on customizing the videojs CSS for the ChapterButton menu in order to make it expand to accommodate varying line lengths without wrapping. Even though I can set it to a fixed width, I require it to be able to adjust to different line ...
I'm having an issue with getting a dropdown to appear in my registration form. Everything else in the form is displaying correctly and functioning properly, but the dropdown remains invisible. After searching extensively, I haven't been able to ...
<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)" aria-selected="undefined"> IPD</a> If I want the button to navigate to the next page when dragged, what code should I write? ...
I have a particular element in my code that looks like this: <div [innerHtml]="htmlContent | sanitiseHtml"></div> The sanitiseHtml pipe is used to sanitize the HTML content. Unfortunately, when the htmlContent includes relative images, these ...