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;}
I've encountered an issue with loading pages via ajax for users with custom URLs. For example, a profile is usually found at http://example.com/users/Dan, but if a user has a custom URL like http://example.com/DansCustomURL, I need to fetch their desi ...
Just starting out in the world of hosting. I have a project that involves: Front end: HTML, CSS, JQuery Back end: Firebase Currently, I am using Firebase to store user data on my website. My goal is to host the site as abc.com However, when I contacted ...
Currently, I am working on creating a responsive text section with a grid-like horizontal line resembling paper, and the challenge lies in aligning the text properly within this grid. While I can achieve this when the font size remains constant, I am curi ...
What are the best ways to improve website optimization and increase page speed? I have already minified JavaScript and CSS, as well as optimized images, but Google continues to penalize our pages. Any suggestions? ...
I am facing an issue with a SVG file that has mix-blend-mode styles defined on certain elements. The blending is working properly for the elements inside the SVG, but not for the background color of the HTML <div>. For instance: <!doctype html> ...
Each page of my website features the following form: <section class="footer-one"> <form action="sendmail.php" method="post" onsubmit="return validateForm()"> <div> <div class="row half"> <div class="6u"> <input type="text ...
Is it possible to customize the text in an Angular Alert service dynamically? I'm looking to make certain words bold, add new lines, and center specific parts of the text. Specifically, I want the word "success" to be bold and centered, while the rest ...
I have a PHP web page that is dynamic. localhost/ctd/index.php Everything is working fine, except when I add a forward slash like this: localhost/ctd/index.php/ The CSS does not load. Is this a CSS bug or PHP issue? Here is the full code of index.php: ...
I have a question I'm eager to find an answer to. Here is the code snippet I'm working with: $('.comment').submit(function(event) { event.preventDefault() Every time I try to submit it, the page reloads instead of submitting th ...
This is an example of my code. It is functioning properly even without passing a value. function displayMessage(text) { alert(text); } <button type="button" id="button" class="btn btn-success" onclick="displayMessage("Hello");"> Click Me </ ...
Having trouble with innerHTML in this scenario, looking to achieve something along these lines: <table width="100%" border="0" id="table2"> <?php include("connection.php"); $sql=mysql_query("select* from b1"); while($res=mys ...
Although I'm new to web development and still learning the basics of html, javascript, etc., I have a problem that seems quite simple. The challenge lies in understanding javascript functions, which I find particularly tough to grasp. Here's what ...
I'm new to JS and trying to create a horizontal slider. Here's the current JS code I have: var slideIndex = 0; slider(); function slider() { var i; var x = document.getElementsByClassName("part"); for (i = 0; i < x.length; i++) { x[i].styl ...
I'm attempting to incorporate dynamic HTML into my code with the following lines: var el = $compile('<a ng-controller=\"tableController\" ng-click=\"open\">...ReadMore</a>')($scope); But I'm encounterin ...
Within my HTML file, there lies a table with an empty tbody that is dynamically filled by jQuery once the document is fully loaded. The content of the table body is generated using a PHP script, where jQuery fetches the data via a simple GET request. Belo ...
Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...
Currently, I am utilizing Material UI version 4 on my website and integrating cards (for more details, click here). https://i.stack.imgur.com/dm2M2.png I am interested in enlarging the overall size of the card so that the image appears larger. As I am si ...
When my application loads into a parent div with a specific class (for example, .my-app), is there a way to add the prefix .my-app to all classes generated by styled-components? For instance, consider a component like this: import React from 'react& ...
Here is the current structure I have: <li class="myclass" ng-class="myAngularClass"> <div> div1 <div> div2 </div> </div> </li> The li element has dynamic dimensions and width. The class "myAngularClass" i ...
I have a div and am utilizing Bootstrap 5. I'd like to have the Description and Length elements on separate lines when the page width is <=1024px. <div class="col-3 col-md-4 col-lg-3"> <div class="card d- ...