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.
Related
I am Developing a code using php . In which I am importing two files (header.php and footer.php) in another php file index.php.
Now I want that header.php and footer.php should be fixed while scrolling horizontally. can you suggest me the code. I am using the following code
Header.php
code here
footer.php
code here
index.php
<?php include("header.php"); ?>
welcome to index file
welcome to index file
welcome to index file
<?php include("footer.php"); ?>
In this file index.php, I want that header and footer should be fixed while scrolling horizontally and others css should also not be disturbed.
try this.,
<div id="header">
<?PHP include_once('header.php');?>
</div>
<div id="wrap">
welcome to index file
</div>
<div id="footer">
<?PHP include_once('foo.php');?>
</div>
css:
#header{position:fixed;top:0px;}
#footer{position:fixed;bottom:0px;}
or
header.php
<div id ="header"></div><div id="content">
footer.php
</div><div id="footer"></div>
index.php
<?PHP include_once('header.php');?>
content here.,
<?PHP include_once('footer.php');?>
Your solucion is ok.
only i recomend use something like this:
<div id="header">
<?PHP include_once('header.php');?>
</div>
<div id="wrap">
here is my html content
</div>
<div id="footer">
<?PHP include_once('foo.php');?>
</div>
the use of include_once is for not repeat the include of some file
and with a good css obtains a excelent layout
use HTML5 and use include_once
<header>
<?PHP include_once('header.php');?>
</header>
<div id="wrap">
here is my html content
</div>
<footer>
<?PHP include_once('foo.php');?>
</footer>
Here is just a sample FIDDLE DEMO
html,body{
margin:0;padding:0;
}
header{
background:Green;
height:50px;
}
footer{
position:absolute;
width:100%;
bottom:0;
background:Red;
height:50px;
}
In your css, just put the following attribute:
position:fixed; and that should do the trick.
I have made a static blank page that also shows my website's header/sidebar/footer in it. Now what i am trying to do is get rid of the 'style' that my wordpress template css is forcing me to have on the page i am trying to create.
Here is my code:
<?php
/*
* Template Name: My own page!
* Description: I made a page!
*/
require (dirname(dirname( __FILE__ )).'/wp-load.php');
get_header(); ?>
<div id="main-content" class="main-content">
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<!-- MY CONTENT!!! -->
Hello2.
<h1> hello.</h1>
<p>hello</p>
<input type="submit" name="connect" value="CONNECT" style="height:52px ; width:136px"/>
<p>hi</p>
<!-- -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<?php
get_sidebar();
get_footer();
Any help appreciated.
You will need to overwrite the styles which are already in the theme. For example, you can give an id to your submit button like <input type="submit" name="connect" value="CONNECT" id="submitbutton"> and then style it according to your needs using CSS, for example:
input#submitbutton {
height: 52px;
width: 136px;
background: blue;
color: white;
}
Same goes for the <h1> tags. Give an <id> to your <h1> tag like <h1 id="hello"> hello.</h1> and then style it according to your needs using CSS, for example:
h1#hello {
color: black;
font-weight: bold;
font-size: 20px;
}
Use of Developer Tools over here will help you quite a lot in order to see how an element would look with your desired styles before actually making any changes to its CSS.
you will need to use something like
get_header('custom-header');
And use a custom header file to only load the stuff you want. You may need to create a custom function to override the scripts included by the theme...
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;}
I have created a few php files Following are their names:
standard_head.php (which contains basic standard html code)
header.php
navbar.php
sidebar.php
footer.php
standard_footer.php (which contains closing html tags)
Page content will vary in every page and would also include html content.
I am trying to create a lot of php pages which will use all of the above pages directly.
Now I can use them directly using include statement for each of them, but I was wondering if it was possible to include all of them together with one just statement ?
<?php include('../includes/standard_head.php'); ?>
<?php include('includes/header.php'); ?>
<div id="wrapper">
<?php include('includes/nav.php'); ?>
<div id="content">
<!-- my page content -->
</div> <!-- end #content -->
<?php include('includes/sidebar.php'); ?>
</div> <!-- End #wrapper -->
<?php include('includes/footer.php'); ?>
<?php include('../includes/standard_footer.php'); ?>
You could so this (note that this is a very basic example and that I wouldn't use this myself without taking into account meta tags, page titles etc.)
template.php
<?php include('../includes/standard_head.php'); ?>
<?php include('includes/header.php'); ?>
<div id="wrapper">
<?php include('includes/nav.php'); ?>
<div id="content">
<?php echo $content; ?>
<!-- my page content -->
</div> <!-- end #content -->
<?php include('includes/sidebar.php'); ?>
</div> <!-- End #wrapper -->
<?php include('includes/footer.php'); ?>
<?php include('../includes/standard_footer.php'); ?>
Then, on a page (say index.php, for example):
index.php
<?php
$content = '<h1>Welcome</h1>';
include 'template.php';
?>
P.S: If you go down this route, make sure that you check out the Output Control Functions first.
Just create a PHP file that has a list of them i.e.
<?php include("this file");
include("the other file");
?>
And then just add that file.
Not really an answer to your question, but you could use a template engine like Twig.
http://twig.sensiolabs.org/
Try using more complex template system like Smarty or some MVC framework like Zend (this is not required but would allow you to create complex sources more easily) and then build script like this:
<?php include('../includes/standard_head.php'); ?>
<?php include('includes/header.php'); ?>
<div id="wrapper">
<?php include('includes/nav.php'); ?>
<div id="content">
<?php echo $menu->getCustomEntries(); ?>
</div>
Where $menu will be your custom object containing methods for displaying menus and submenus...
There is no straight way to include multiple files, as include / require functions except only one argument. though you can use following logic.
`#include_all_files.php
include('../includes/standard_head.php');
include('includes/header.php');
...
use above file in other files
include('includes/include_all_files.php');
`
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;
}