Ok, based on the answer here by traitadmin (scroll down) I am trying to display different CSS for my front page and one for all other pages.
Previously, my body tag looked like this:
<body <?php body_class() ?>>
Now, I have edited it to look like this:
<body <?php if (is_home()) { ?> id="home"<?php } else { ?> body_class()<?php } ?> >
Also I have put new stylesheets in my enqueue, and all styles for the homepage now have #home in front of them.
However, there is no style at all now and my site broke down entirely, for all pages.
I think I may need body_class() also for the homepage. But how I can edit this code so that it works?
Easiest would actually be this:
<link rel="stylesheet" href="main.css">
<?php if (is_home()) {
echo '<link rel="stylesheet" href="home.css">'
} ?>
Rules in home.css should have a high priority than main.css. So with this if main.css has this:
body { background-color: white; }
and home.css has this:
body { background-color: blue; }
Since home.css is linked after main.css the rule in home.css will take priority and the background will be blue. This way you can only overwrite the styles you need to and all the other styles will still apply.
In your case after your other wp_register_style() just add an if test and then register another style.
if (is_home()) {
wp_register_style('home-style',get_stylesheet_directory_uri().'/stylesheets/home.css');
}
Looks like a wordpress code so here goes:
In the head:
<?php if (is_home()) {
// loading the stylesheet if it is the homepage
echo '<link rel="stylesheet" href="home.css">'
} else {
// loading the other stylesheet if it is not the homepage
echo '<link rel="stylesheet" href="other.css">'
} ?>
By default, WordPress adds two classes to the body tag: on the front page (is_front_page()) the home class is added, and on the home page (is_home()) the blog class is added. So, in your main CSS file, you can use the body class as follows:
#mydiv {background:green;}
.home #mydiv {background:blue;}
.blog #mydiv {background:red;}
Related
Hi everybody I have this Wordpress website that I want to transform into an AMP website, one of the challnging task is to rewrite the css in inline.
So in the wordpress framework we have this functions.php file and inside we have the wp_enqueue_style function.
/**
* Proper way to enqueue scripts and styles
*/
function wpdocs_mytheme_styles() {
wp_enqueue_style( 'style', get_stylesheet_uri() . '/css/style.css' );}
add_action( 'wp_enqueue_scripts', 'wpdocs_mytheme_styles' );
Basically Wordpress will give us this line on out front end pages
<link rel='stylesheet' id='style' href='Path_to/css/stle.css' type='text/css' media='all' />
Can I change this display mechanism to make Wordpress display the registered styles in **INLINE this way :**
<style amp-custom>
<!-- The content of the style.css -->
<!-- .... -->
</style>
Yeah basically i have a lot of these files and I don't want to make a static change by opening each one and copy/pasting content n the header any idea?
You could do like this:
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
OR,
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
Reference : AMP-DEV
You need to add the styles directly to the page head using wp_head()
add_action('wp_head', 'my_custom_styles', 100);
function my_custom_styles()
{
echo "<style>*{color: red}</style>";
}
is there any specific reason why you want to make use of inline styling?
My File names:
1.) about.php
2.) styles.css
The same stylesheet is also applied to index.php .
I want to style the section part of the page. I tried it by styling the [Eg.], .section-info{color:#555;}
but it didn't helped. Also should I change the stylesheet name to styles.php?
Thanks In Advance.
<?php
/* Website Header */
include ("include/header.php");
?>
<!-- Website Page-2 Main Content -->
<div class="wrapper">
<section>
<div class="section-info">
<h2>About Us</h2>
<p>blah...blah...bllah....</p>
</div>
</section>
</div>
<?php
/* Website Footer */
include ("include/footer.php");
?>
Try to give it different class or inline style.
I had a similar problem. I created a function here which I use.
Then I use $page = getPage("ab") which would return about and then you can check what page is in use using the below:
<?php
$page = getPage("ab");
if ($page == "about") { ?>
<style type="text/css">
.section-info {
background: #f00;
}
</style>
<?php } ?>
Put this code inside the <head> of your about.php page. This will apply whatever code you want to that page.
I am attempting to change some css to display:none; when the user is logged in.
It's just a "Sign In / Register" link. ( so when the user is logged on they wont see it)
<span class="hide-this-class-when-logged-in">Sign Up / Register</span>
I have copied my _header.php file into my child theme, and replaced
<body <?php body_class(); ?>>
with this
<body<?php echo (is_user_logged_in() ? ' class="logged-in"' : ''); ?>>
thinking that this would provide an additional .class for logged in users, so I could then
.class {display:block}
.class .logged-in {display:none}
but the body got all screwed up,( everything got a float left; ) and I am back to the drawing board.
Any input on this topic, or how to use body_class() with x theme would be really appreciated. thanks.
Use this in your header.php file.
<body <?php body_class(); ?>>
This built in function already tracks user status, as well as a number of other useful states like page template, page id, etc.
Example of output:
<body class="home page page-id-403 page-template page-template-page-home logged-in admin-bar no-customize-support custom-background group-blog">
https://codex.wordpress.org/Function_Reference/body_class
SOLVED!!!
<body
<?php
if ( is_user_logged_in() ) {
body_class('logged-in');
} else {
body_class('logged-out');
}
?>
>
goes in your _header.php file
.logged-in{whatever;}
.logged-out{whatever;}
try this
//create two variables
$user_loggedin_class = "loggedin";
$user_notlogin_class = "notloggin";
// add css like this
<style type="text/css" >
.loggedin{
display: none;
}
.notloggin{
display: display:block;
}
</style>
// your span tag should like this
<span class="<?php echo ( (is_user_logged_in())?$user_loggedin_class:$user_notlogin_class ); ?>">Sign Up / Register</span>
I have built a Wordpress plugin that requires to me to add CSS styles through the plugin's PHP file.
Is there a better way of doing this? I can see this getting out of hand if not done properly.
function flags() {
<style type="text/css">
<?php if(get_option('display')=='Vertical') { ?>
<?php if (get_option('language_option')=='specific') { ?>
#flags {display:none !important; }
<?php } ?>
p.hello { font-size:12px; color:darkgray; }
<?php } ?>
</style>
<?php }
}
If there isn't much CSS, a better way is to add body classes that allow you to target your selectors only when they are present:
<body class="display-vertical">
...
And move the CSS from inline to the stylesheet:
.display-vertical #flags{
...
}
I'm working on a website where the homepage has a dark background, yet all the other pages have a white background.
I am using pho to include a header file to show the logo, navbar, telephone details etc on every page.
As the home page has a dark background, the logo has white text, yet the logo use on the other pages has dark text.
I'm looking for a way of using php, so that I include a single header file on every page. If the homepage has a class of "home" the logo image with white text is shown and on all other pages the logo image with dark text is shown.
something along these lines:
if (body class="home") {
<img src="images/logo-with-white-text" />
else {
<img src="images/logo-with-dark-text" />
};
Is this possible?
Any help or advice would be greatly appreciated :)
I'm assuming your homepage currently looks something like this:
<html>
<head>...</head>
<body class="home">
...
<?php include 'header.php'; ?>
...
You could make the class a variable, and reference this variable from the included header file:
<?php $class = 'home'; ?>
<body class="<?php echo $class; ?>">
...
<?php include 'header.php' ?>
...
In header.php:
<?php if (isset($class) && $class == 'home'): ?>
<img src="images/logo-with-white-text" />
<?php else: ?>
<img src="images/logo-with-dark-text" />
<?php endif; ?>
You could check whether you are on the homepage (Depending on your exact implementation) with a snippet like this:
if (basename($_SERVER['SCRIPT_NAME']) == 'index.php') {
// home page
}
else {
// some other page
}
$_SERVER['SCRIPT_NAME'] contains the actually loaded file relative from the host until the query-string:
http://example.com/my/folder.php?a=b => /my/folder.php
For more information have a look at basename in the PHP manual.
$_SERVER['REQUEST_URI'] contains the current page url (after the domain). You could check instead that the page has the homepage url with that.
Depending on your setup you'd have something like
<?php if ($_SERVER['REQUEST_URI'] == '/') : ?>
<img src="images/logo-with-white-text" />
<?php else: ?>
<img src="images/logo-with-white-text" />
<?php endif; ?>
You don't need PHP for this if you use an image replacement technique to display the image.
Basically, you use an <h1> or something for your logo, with text, then use negative text-indent to hide the text, set a height and width, and use a background image for the logo. Example:
http://jsfiddle.net/nwNbb/
<h1 id="logo">My Website</h1>
#logo {
text-indent:-999px;
background:url(/path/to/logo.png);
height:100px;
width:500px;
}
Then, in your CSS, you can change the background image based on the body class:
body.home #logo {
background:url(/path/to/alternate-logo.png);
}
You can actually do image replacement on images as well:
http://jsfiddle.net/nwNbb/3/
img {
/* 500x100 replacement image */
background:url(http://lorempixum.com/500/100);
/* hide original image */
width:0;
height:0;
/* use padding to set width/height of replacement */
padding:50px 250px;
}