I'm a newbie on css and html and even coding. I'm currently making my own start page with a local path, which loads my bookmark on an html file. The background-image control passes through the style.css file. I've googled some solutions as to creating a php script to load random pictures over css and html, and I've tried various solutions, however it doesn't seem to work for me. So here we go:
the index.html file for passing the background-image:
<link rel="stylesheet" href="style.css" type="text/css" />
and the style.css:
body {
background-image: url("Wallpaper01.jpg") ;
}
I don't know how to change it since I downloaded the code. Also the .jpg file is in the same directory as the html and css.
Can someone please help me out to have a random image with this?
Please provide the code to do it, place to insert it, or whatever I need to, that will help a lot more than just telling me what to do.
Many, many thanks if someone can help me. Thanks!
You can try something like:
<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
CSS (in the head)
<html>
<head>
<title></title>
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
</head>
<body>
<!-- website -->
</body>
</html>
Edit (user's comments)
<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<html lang="en">
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Start Page</title>
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
</head>
<body>
<div id="one">01 <div class="title">General</div>
<div class="links"> Google
</div>
</div>
</body>
</html>
Related
I'm trying to create an upload system similar to YouTube.
But in PDF. When you upload a video to YouTube, you create a page.
I already have a code for the page that would be the pdf. But I needed to know how I could create a page that does the upload and modify the html by changing the pdf link
* pdfListView.loadPdf ("/ upload / ebooks / 1.pdf"); *
Follow the code below
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Demo of pdfListView</title>
<style>
.page-container {
margin: 10px auto;
}
.page-view canvas {
box-shadow: black 0px 0px 10px;
}
</style>
<!-- File from the PDF.JS Library -->
<script type="text/javascript" src="external/compatibility.js"></script>
<script type="text/javascript" src="external/pdf.js"></script>
<script type="text/javascript">PDFJS.workerSrc = 'external/pdf.worker.js';</script>
<!-- Leave out the following two files if you don't need a textLayer -->
<link rel="stylesheet" href="src/TextLayer.css">
<script src="src/TextLayerBuilder.js"></script>
<!-- Leave out the following two files if you don't need an annotations layer -->
<link rel="stylesheet" href="src/AnnotationsLayer.css">
<script src="src/AnnotationsLayerBuilder.js"></script>
<!-- Core pdfListView file -->
<script src="src/PdfListView.js"></script>
</head>
<body>
<div id="main" style="position: absolute; top:0px; bottom:0px; left: 0; right: 0; overflow:scroll">
<!-- The pageContainers go here !-->
</div>
<script type="text/javascript">
window.pdfListView = new PDFListView(
document.getElementById("main"),
{
// Comment out the next line to get a listView without textLayer.
textLayerBuilder: TextLayerBuilder,
annotationsLayerBuilder: AnnotationsLayerBuilder,
logLevel: PDFListView.Logger.DEBUG
}
);
pdfListView.loadPdf("http://playofthegame.me/ebooks/A_HIST%c3%93RIA_SECRETA_DA_MA%c3%87ONARIA_E_ORDEM_ROSACRUZ_-_por_Jakim_Booz.pdf");
</script>
</body>
</html>
I have a php file called shtype_porosine.php and also an external css file style.css. The php file I use to login to the web site and it has three different div tags. For the first one (div id="container_dyte") the body backgraound color must be white, but for the two others that are included include('include/administrator_index_nsp.php'); and include('include/login_forma.php'); the body color must be black.
I am not sure if a can use the body tag three times in the same php document, if so than the problem is solved (with body class="" i founded in the previous question "how-to-css-if-else-to-change-body-background-color"), but if not than which would be the solution?
Below is the code of the php file shtype_porosine.php
Thank you
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>website</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
session_start();
// this is for an administrator
if(isset($_SESSION['auser'])){
?>
<div id="container_dyte">
<span>Something here...</span>
</div>
<?php
}else{
// these is for a user
if(isset($_SESSION['p_user'])){
include('include/administrator_index_nsp.php');
}else{
// this is the login form to apear if fails the adminstrator and the user
include('include/login_forma.php');
}
}
?>
</body>
</html>
Check if $_SESSION[ 'auser'] is set, if it is, make a body with a white background-color.
Otherwise make a body with a black background-color.
Like this:
<?php
session_start();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>website</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<?php
if(isset($_SESSION['auser'])){ ?>
<body style='background-color:white'>
<?php } else { ?>
<body style='background-color:black'>
<?php }
if(isset($_SESSION['auser'])){
?>
<div id="container_dyte">
<span>Something here...</span>
</div>
<?php
}else{
// these is for a user
if(isset($_SESSION['p_user'])){
include('include/administrator_index_nsp.php');
}else{
// this is the login form to apear if fails the adminstrator and the user
include('include/login_forma.php');
}
}
?>
</body>
</html>
<body class="<?= isset($_SESSION['auser']) ? 'white' : 'black';?>">
<body style="background-color:<?= isset($_SESSION['auser']) ? 'white' : 'black';?>">
You don't have to change any "body". Just set the background-color css property for each of the div:
<div id="container_dyte" style="background-color:white">
In file include/administrator_index_nsp.php
<div style="background-color:black">
In file include/login_forma.php
<div style="background-color:black">
Easy way:
Give the divs diferent ID names and use CSS.
HTML
<div id="the_id">
CSS
#the_id {
background-color:white;
}
Medium way:
Make a container div with a specyfic ID or CLASS and set up a CSS.
CSS
#container div {
background-color: black;
}
#container:first-child {
background-color: red;
}
#container:last-child {
background-color: white;
}
Hard way:
If you have a css specyfic for this page you can select the div number by style property.
body:nth-child(1) { background-color: black; };
body:nth-child(2) { background-color: red; };
body:nth-child(3) { background-color: white; };
If the css is ment for other pages do not use this answer.
In order to solve this issue, include a custom css, which will apply a required background color to the <body> tag. For example:
if (mode=='mode1')
{
echo "<div id='div1'></div>";
echo "<style type='text/css'> body { background-color:red } </style>";
}
if (mode=='mode2')
{
echo "<div id='div2'></div>";
echo "<style type='text/css'> body { background-color:yellow } </style>";
}
if (mode=='mode3')
{
echo "<div id='div3'></div>";
echo "<style type='text/css'> body { background-color:blue } </style>";
}
So using this logic, you can set the background color of the body, according to the divs showed
So I have some PHP stuff inside my html doc, and I'm fairly new to web stuff so I'm kinda confused. The code in question is:
<style type="text/css">
body{
background: url(<?php include 'background.php';
echo "$selectedBg"; ?>) no-repeat center center fixed;
background: url(images/1.png)
background-size: cover;
}
</style>
The rest of the file works seamlessly, I've tried putting that little bit in all sorts of different tags, and even changing the file to a php file instead of an html one. I've verified that php is installed and my path is correct. background.php exists in the same directory as seen here, this and this are the sites I referenced when creating it. The only other info I can think to provide is that I'm viewing it through the live preview in Brackets.
Changing the file to a php file fixed it. The whole file now looks like.
<html>
<?php include 'background.php';?>
<title>Yay</title>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<style type="text/css">
body {
background: url(<?php echo $wall;?>);
}
</style>
</head>
<body>
</body>
</html>
where background.php is
<?php
$bg = array('1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png');
$i = rand(0, count($bg)-1);
$selected = "$bg[$i]";
$wall = "images/$selected";
?>
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
i'm building a multiple language (Spanish/English) site with PHP & CSS.
I have this piece of code in my common.php file to point to different css files depending on the language the user defines:
<?php
if ($_GET['lang'] == 'en')
$cssFile = 'english.css';
elseif ($_GET['lang'] == 'es')
$cssFile = 'espanol.css';
?>
This is an example of how my english.css file looks:
#rightHome h3 {
padding-top: 20px;
text-indent: -999px;
background: url(images/latestworkTitle.png) no-repeat;
background-position: 0 20px;
}
And my espanol.css file looks like this:
#rightHome h3 {
padding-top: 20px;
text-indent: -999px;
background: url(images/latestworkTitleES.png) no-repeat;
background-position: 0 20px;
}
Also my index looks like this:
<?php
include_once 'common.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jimena Contreras | Film Scoring Composer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="alternate" type="application/rss+xml" title="Jimena Contreras's News Feed" href="http://www.jimenacontreras.com/news.xml" />
<link rel='index' title='Jimena Contreras | Film Scoring Composer' href='http://www.jimenacontreras.com/' />
<link rel='prev' title='Biography' href='http://www.jimenacontreras.com/biography' />
<link rel='next' title='Resume' href='http://www.jimenacontreras.com/resume' />
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="Jimena Contreras is a film scoring composer based in Mexico City specialized in feature films, short films, documentaries, spots & TV Series." />
<meta name="keywords" content="film scoring, composer, compositora, bandas sonoras, feature films, short film, TV Series, peliculas" />
<meta name="robots" content="INDEX, FOLLOW" />
<link href="styles.css" rel="stylesheet" />
<link href="menuprueba.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="<?php echo $cssFile; ?>" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/contact-form.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>
</head>
<body>
<div id="container">
<?php
include ("header.php");
// Define our array of allowed $_GET values
$pass = array('home', 'biography', 'resume', 'filmography', 'contact', 'compositions- performed-or-broadcasted', 'resume2', 'resume3', '1015', 'i-laugh-not-to-cry', 'with-2-of-sugar', 'feminine-lips', 'crumbs-of-venus', 'pito-the-movie', 'the-mapuche-nation', 'creando-conciencia', 'building-unam', 'monsivais-honoris-causa', 'mexico-68-olympic-games', 'the-mexican-people', 'raining-colors', 'eyes-of-paradise');
// If the page is allowed, include it:
if (in_array($_GET['id'], $pass)) {
include ( $_GET['id'] . '.php');
}
// If there is no $_GET['id'] defined, then serve the homepage:
elseif (!isset($_GET['id'])) {
include ('home.php');
}
?>
<?php
include ("footer.php");
?>
</div>
</body>
</html>
And my lang.en.php file looks like this:
<?php
/*
------------------
Language: English
------------------
*/
$lang = array();
define('HEADING_NEWS', 'Latest News');
define('TEXT_NEWS1', '<span class="date">04.24.2011 </span>| <span class="news">Festival Tour <br /><br /></span>Wishing the best of lucks for my last work "Crumbs from Venus", shortfilm of Maira Bautista Neumann being sent to various festivals around the world.<br /><br />Good luck!');
define('TEXT_NEWS2', '<span class="date">02.26.2011 </span>| <span class="news">NYU! <br /><br /></span>Ready to start the adventure in NY in the ASCAP Workshop at NYU, will be taught by Sean Callery (24, La Femme Nikita).');
define('TEXT_NEWS3', '<span class="date">02.26.2011 </span>| <span class="news">New Project <br /><br /></span>Working on the soundtrack of P.I.T.O The Movie, a film by Fer Ortega, production by Yenin Escotto<br /><br />Click here to go to the official website.');
?>
Now the thing is that in my home page when you toggle between english & spanish everything works fine (meaning that text & images change), but when you click to go to another page e.g. biography the text is translated but the image remains the same, so my question is, what am i doing wrong?
To view the site working you can go to http://www.jimenacontreras.com
Any help is much appreciated, i hope i'm clear enough and that my question is easily understandable.
Thanks in advance.
J.C. Chávez S.
You don't have '?lang=es' or '?lang=en' part on any pages except for the title one.
Hence GET returns nothing.
I will personally recommend using folder structure for different languages instead of trying to use the same url.
Like: http://www.jimenacontreras.com/ and http://www.jimenacontreras.com//es instead of what you are doing.
You can have text in english and spanish stored in the db and have language setup in the include configs file (there will be a separate config file for each language folder.
If you want to stick with this you can set a session variable for cssFile and check it on top of every page.
Something liek this:
<?php
if (isset($_GET['lang'])){
if ($_GET['lang'] == 'en'){
$cssFile = 'english.css';
}
elseif ($_GET['lang'] == 'es'){
$cssFile = 'espanol.css';
}
$_SESSION['lang '] = $cssFile;
}elseif(isset($_SESSION['lang'])){
$cssFile = $_SESSION['lang '];
}
?>
Also having a bunch of different css and javascript files is a horrible idea speed-wise.
Add a lang attribute to the body tag (or where it applies), it's quite a universal one, so many HTML tags have it.
In CSS you can then create selectors that only match a specific language, so to choose the right background images for example. This is done with the attribute selector.
With this way you can seperate data (the language information) from the style (graphics).
body[lang=en] #header { your engish graphic }
body[lang=es] #header { your spanish graphic }
Depending on the support of CSS version, there is also the CSS 2.1 :lang pseudo class.
Ref: Designing a Bilingual Website: A Quick Case-Study