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
Related
I have a basic webpage made up of a few PHP pages and a few CSS stylesheets. One of these stylesheets is style_common.css which is used by all pages on the website to provide a constant theme. I am having a bit of trouble with this file. I currently have only 2 PHP pages which reference this common CSS file.
The home page (index.php) references the CSS file fine, and the stylesheet styles it as you would expect. I copied the entire contents of index.php and pasted it into a second PHP file, then changed a few minor details such as the heading caption. This new page however, doesn't link to the CSS stylesheet.
My code is below:
style_common.css:
body {
background-color: #32BEED;
}
.header {
text-align: center;
padding: 0px;
}
index.php:
<!DOCTYPE HTML>
<html>
<head>
<title>324 SQN Canteen Manager</title>
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_common.css"/>
</head>
<body>
<div class="header">
<img src="images/logo.png" class="aafclogo">
<h3> Canteen Manager</h3>
<h6>Designed by Me</h6>
</div>
<div class="buttonContainer">
<a href="addstock.php"><div class="button">
<p>Add Stock</p>
</div></a>
<a href="sellitems.php"><div class="button">
<p>Sell Items</p>
</div></a>
<a href="recordstocktake.php"><div class="button">
<p>Record Stocktake</p>
</div></a>
</div>
The second page which I copied from index.php and changed a few minor fields:
<!DOCTYPE HTML>
<html>
<head>
<title>324 SQN Canteen Manager</title>
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_addstock.css"/>
</head>
<body>
<div class="header">
<img src="images/aafclogo.png" class="aafclogo">
<h3>Add Stock</h3>
</div>
<div class="buttonContainer">
<a href="index.php"><div class="button">
<p>Home</p>
</div></a>
</div>
Just to give you an example, the background colour of the second page is white, not the colour specified in the CSS file.
Where am I going wrong? Thanks.
You are having the problem because you never linked
style_common.css
to the second page. Instead you have
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_addstock.css"/>
FIX:
add
<link type="text/css" rel="stylesheet" href="style_common.css"/>
to the second page.
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 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>
I think this is an encoding problem(?), but not really sure.
When I view my generated source (in both FF and IE) I see funky paths from my js and css files like: <script type="text/javascript" src="http://www.domain.com/wp-content/themes/dudical/js/ce.f4195499d3cfc40ae09588aae02ff2dc.jquery,oeasing,omin,l.js"></script>
Also, several of the js/css files are actually being transcluded, i.e I don't see references to the external files, but instead the content of those files are being shown in the source inside of <script> and <style> tags respectively. I've never seen this type of behavior before and am pretty baffled.
Here is how my header.php file begins:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_front_page() ) {
bloginfo('name');
} elseif ( is_category() ) {
single_cat_title(); echo ' - ' ; bloginfo('name');
} elseif (is_single() ) {
single_post_title();
} elseif (is_page() ) {
single_post_title(); echo ' - '; bloginfo('name');
} else {
wp_title('',true);
} ?>
</title>
<?php if(get_option('favicon')) { ?>
<link rel="shortcut icon" href="<?php echo get_option('favicon'); ?>" type="image/x-icon" />
<?php }else{?><link rel="shortcut icon" href="<?php echo system32_url; ?>/favicon.ico" type="image/x-icon" /> <?php } ?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/css/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css" />
<!-- Jquery and Easing-->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.capSlide.js"></script>
Here is what I see output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=en lang=en>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1"/>
<title>Surf Hatteras</title>
<link rel="shortcut icon" href="http://www.surfhatteras.com/wp-content/uploads/2010/10/surf-icon.gif" type="image/x-icon"/>
<style>body { outline:none;}
.postoptions { padding:0px; padding-top:0; }
.postoptions select,
...
</style>
<style>/* CSS for WP-Testimonials */
#sfstest-form label {
float: left;
width: 200px;
font-weight: bold;
}
...
</style>
<script type='text/javascript' src='http://www.surfhatteras.com/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<link rel=EditURI type="application/rsd+xml" title=RSD href="http://www.surfhatteras.com/xmlrpc.php?rsd"/>
<link rel=wlwmanifest type="application/wlwmanifest+xml" href="http://www.surfhatteras.com/wp-includes/wlwmanifest.xml"/>
<link rel=index title='Surf Hatteras' href='http://www.surfhatteras.com/'/>
<meta name=generator content="WordPress 3.0.1"/>
<style>/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
...
</style>
<link rel=stylesheet type="text/css" href="http://www.surfhatteras.com/wp-content/themes/dudical/ce.51cd742ab6418eec6131ff2cf43b61c4.style,s.css"/>
<!-- Jquery and Easing-->
<script type="text/javascript" src="http://www.surfhatteras.com/wp-content/themes/dudical/js/ce.9e936b27d8d0e4e07ebef242d7c6e2cc.jquery-1,o4,omin,l.js"></script>
<script type="text/javascript">(function($) {
$.fn.capslide = function(options) {
var opts = $.extend({}, $.fn.capslide.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
...
})(jQuery);</script>
<link rel=stylesheet type="text/css" href="http://www.surfhatteras.com/wp-content/themes/dudical/colors/ce.d47db6d7bbcb1f0192576f60ffa27ec9.white,s.css" media=screen />
<!-- Slider CSS-->
<style>/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
#coin-slider { margin-left:20px;}
...
</style>
<link rel=stylesheet type="text/css" media=screen href="http://www.surfhatteras.com/wp-content/themes/dudical/css/cc.224c1b363a793961fc7bc2e428d6ce58.nivo-slider,s+superfish,s.css">
Can't figure what is happening to my paths, or why some external files are getting treated as such...
EDIT
List of plug-ins I am using:
Category Posts Widget
Contact Form 7
Contact Form 7 to DB Extension
Get Post Image
Get The Image
Resize At Upload Plus
Widgets Reloaded
WordPress Hashcash
WP-DBManager
WP-Mail-SMTP
WP Show IDs
WP Wunderground
(The caching plugin I was using is Quick Cache)
Contents of my functions.php file
It's not a big deal.
Just because you have using Goolge Page Speed extension mod.
I basically use php variables to store the value of the title and the body's ID.
This last one is a technique to have my button (pressed) in the navigation according to which section of the page the user is (in this case the user will know he is currently at "home").
Beginning of my index.php:
<?php
$title = "New Project";
$body = "home";
include("common/header.php");
?>
<div id="content">
<div class="container">
<div id="tagline">
Beginning of my header.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="styles/slimbox2.css" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
<link rel="stylesheet" type="text/css" href="styles/contact.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/slimbox2.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="<?php echo $body; ?>">
<div id="header">
<div class="container">
<div id="topbar">
<h1>wider design</h1>
<ul id="lang">
<li>English</li>
<li>Español</li>
<li>中文(繁體)</li>
<li>中文(简体)</li>
</ul>
<ul id="nav">
<li class="home">home</li>
<li class="products">products</li>
<li class="about">about</li>
<li class="contact">contact</li>
</ul>
To let the user know in which section he/she is:
#home li.home a, #products li.products a, #contact li.contact {
color: #999;
}
is there a simpler way of doing this?
Am I using unnecessary those PHP variables?
Yes, what you're doing is fine. I do something similar with a PageTemplate class. In addition to setting the title and navigation, it allows navigation links to appear based on user authentication, allows javascript and css to be added to the head section, etc.
What you're doing is very common. There are a million ways to do it, but they'll all require setting some variables.
janoChen,
I use the following method:
// get the url
$url= $_SERVER['PHP_SELF'];
// add a class on the menu item
<ul id="lang">
<li><a href="index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?>>English</a></li>
//with css I set a style for the class active
li a.active {
color: #990000;
}
But you method also works.
Or else use an MVC framework like CakePHP
This works, but you should consider using a template engine such as Smarty instead.