Solved

CALL CSS THROUGH PHP?

Posted on 2009-04-06
23
1,725 Views
Last Modified: 2012-05-06
can u please site me an example in which we can  css through php?
0
Comment
Question by:designersx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 6
  • 4
  • +2
23 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24075137
<?php
include("layout.css");
include("navigation.css");
include("colors.css");
include("hacks.css");
?>
0
 
LVL 36

Expert Comment

by:Loganathan Natarajan
ID: 24075140
You can include the css through php, by echoing the CSS styles.


0
 

Author Comment

by:designersx
ID: 24075246
this is ok

i want to call my css inside href , how can i do this?

<?php
echo "<a href="here i want to call my css file? "> <img src="images/1.jpg" /> </a> ";
?>

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 49

Expert Comment

by:Roonaan
ID: 24075256
Hi,

You can do two things.

With dynamic css, you can output it inside the <head> of your html;

<head>
<style tyle="text/css">
<?php
echo '.class1 {background:red;}';
?>
</style>
</head>

The second options is to create link statements:

<head>
<?php
$myCSSurl = 'css/styles.css';
echo '<link type="text/css" rel="stylesheet" href="'.$myCSSurl.'" />';
?>
</head>

Kind regards

Arnoud
0
 
LVL 36

Expert Comment

by:Loganathan Natarajan
ID: 24075268
try,


<?php
echo "<a href="link" class="css name"> <img src="images/1.jpg" /> </a> ";
?>

Open in new window

0
 

Author Comment

by:designersx
ID: 24075307
logudotcom: i can't write class="css name" because i am generating the dynamic css.


0
 
LVL 36

Expert Comment

by:Loganathan Natarajan
ID: 24075326
Ok, do you want to apply CSS style to the <a tag?
0
 

Author Comment

by:designersx
ID: 24075354
i am applying css style to the image which are dynamic and my css is also dynamic. i am not able to call css on the image click . this is my large large problem, not able to solve since last week.

yogesh
0
 

Author Comment

by:designersx
ID: 24075365
i am applying the css style to a div on the image click but unable to do?  my css and my images both are
dynamic.

this is exactly i want to know from you?


yogesh
0
 
LVL 36

Expert Comment

by:Loganathan Natarajan
ID: 24075373
dynamic css = what do you mean...? you suppose to generate the CSS and to be written on the page <styles></styles> .. then to be applied on the <a tag..

0
 
LVL 49

Expert Comment

by:Roonaan
ID: 24075407
Yogesh,

Can you please explain deeper?

As you noticed (your questions have been unanswered for a week now), the experts just don't seem to be able to understand what you want.

This can be put on the side of the experts, but must partly be based on the shortness of the questions, and comments you make.

Frankly, at this stage, even though I tried to help you in other questions and know some of them, I still have difficulty understanding what you are trying to do. I am making assumptions and wild guesses in the hope it helps you; This is far from optimal and leads to lots of comments on solutions that don't even apply to your situation.

So for starters; What do you mean éxactly by dynamic CSS (your interpretation might differ from ours, causing much confusion).
Do you mean css rules like '.class {color:red;}', or loading a css file (add a <link> to your head on click)?

Am i understanding correctly that when someone clicks an image, you want to change the style for the whole page? Or just for the image clicked?
Do you want to replace styles, toggle styles, or just add new ones?

Kind regards

Arnoud
0
 

Author Comment

by:designersx
ID: 24075431
Respected Sir,

i am really sorry if ever i have made any wrong/rude comments.
i am giving u the complete code. please run it and do let me know.

when u open 2.php file u will see the images on the front end. i want to apply css on that.
[form.php]
 
<form action="file_write.php" method="post" name="form"  enctype="multipart/form-data">
select theme<input name="theme" type="text"><br>
<br>
 
font-family
<select name="font-family">
	<option>arial</option>
	<option>verdana</option>
	<option>Times New Roman</option>
	<option>arial black</option>
	<option>Book Antiqua</option>	
</select><br>
<br>
 
font-color
<select name="font-color">
	<option>red</option>
	<option>blue</option>
	<option>magenta</option>
	<option>brown</option>
	<option>pink</option>	
</select><br>
<br>
 
font-size
<select name="font-size">
	<option>8</option>
	<option>9</option>
	<option>10</option>
	<option>11</option>
	<option>12</option>
	<option>14</option>
	<option>16</option>
</select><br>
<br>
 
 
<input type="file" name="image"><br>
<br>
 
<input type="submit">
</form>
 
 
[file_write.php]
 
 
<?php
//make the image thumbnail and upload/store it in the folder images/tn 
 
if ($_FILES["image"]["size"] < 90000)
  {
	$image_folder="images/";
	$filename=$_FILES['image']['name'];
	$image_to_be_uploaded=$image_folder.$filename;
		
	if(move_uploaded_file($_FILES["image"]["tmp_name"],$image_to_be_uploaded))
	{
		$thumbnail_path="images/tn/";
		$thumbnail=$thumbnail_path.$_FILES['image']['name'];
		list($swidth,$sheight)=getimagesize($image_to_be_uploaded);	
		$largeImage=imagecreatefromjpeg($image_to_be_uploaded);
		$smallImage=imagecreatetruecolor('120','120');
		imagecopyresampled($smallImage,$largeImage,0,0,0,0,120,120,$swidth,$sheight);
		imagejpeg($smallImage,$thumbnail);
	}
  }
 
//to write the css file from php again and again with fopen and fwrite.
$cssFile = fopen('style.css','a');
$cssClass =
'.'.$_POST['theme'].' 
	{ font-family:'.$_POST['font-family'].';
	  font-color:'.$_POST['font-color'].';	
	  font-size:'.$_POST['font-size'].';
	  background-image:url('.$_POST['image'].'); 	
	}';
fwrite($cssFile, "\n". $cssClass);
fclose($cssFile);
?>
 
 
[2.php]
 
<?php
//fetching the images from folder and display on the front end.
$docroot = rtrim('C:/wamp/www/','/');
$images = trim('testing/file_write/images/','/');
$thumbs = trim('testing/file_write/images/tn/','/');
$mask = '*.jp*g';
 
foreach(glob("$docroot/$thumbs/$mask") as $filename)
{
  $filename = basename($filename);
  echo "<a ><img src=\"/$thumbs/$filename\" alt=\"$filename\" /></a>\n";
}         //          ^---Images path for link        ^---Thumbs path for display
?>

Open in new window

0
 

Author Comment

by:designersx
ID: 24075501
i forgot to give u my css file.
[style.css]
 
 
.final1 
	{ font-family:arial;
	  font-color:red;	
	  font-size:8;
	  background-image:url(sunset.jpg); 	
	}
.final2 
	{ font-family:arial;
	  font-color:red;	
	  font-size:8;
	  background-image:url(sunset.jpg); 	
	}
.final3 
	{ font-family:arial;
	  font-color:red;	
	  font-size:8;
	  background-image:url(sunset.jpg); 	
	}

Open in new window

0
 
LVL 49

Accepted Solution

by:
Roonaan earned 300 total points
ID: 24075515
I understand your confusion. From the image name, it is quite hard to find out what the original theme name was that went with it.

An option might be to add the theme name to the image name by replacing the following line:

$image_to_be_uploaded=$image_folder.$filename;

Change to:

$themeNameSafe = preg_replace('/\W/','', $_POST['theme']);
$image_to_be_uploaded=$image_folder.$themeNameSafe.'_'.$filename;

This will cause your images to be named:
folder/theme1_imageName.jpg
folder/theme2_imageName.jpg

Then in your foreach loop at the end, you could extract the theme name from the filename by replacing:
foreach(glob("$docroot/$thumbs/$mask") as $filename)
{
  $filename = basename($filename);
  echo "<a ><img src=\"/$thumbs/$filename\" alt=\"$filename\" /></a>\n";
}  
And change it into:

foreach(glob("$docroot/$thumbs/$mask") as $filename)
{
  $filename = basename($filename);
  if(strpos($filename, '_') !== false) {
    # Image with the new themename mechanism
    list($theme, $originalFileName) = explode('_', $filename, 2);
    echo '<a href="#" onclick="document.body.className=\''.$theme.'\';return false;"><img src="'.$thumbs.'/'.$filename.'" /></a>';
  } else {
    # Old image without the themename mechanism
     echo "<img src=\"/$thumbs/$filename\" alt=\"$filename\" /></a>";
  }
}  



Kind regards

Arnoud
0
 

Author Comment

by:designersx
ID: 24075583
respected Sir, thanks for ur reply.

as u have understood what i want to say and must seen the output, sir now my images are displaying, i want that when i click on the image like sunset.jpg , the css containing that image should be loaded in to another div.

sir, please tell me how to do this? this is what i am saying the phrase   "CALLING THE CSS DYNAMICALLY"  
0
 

Author Comment

by:designersx
ID: 24075829
i am changing my 2.php file as

<?php
//fetching the images from folder and display on the front end.
$docroot = rtrim('C:/wamp/www/','/');
$images = trim('testing/file_write/images/','/');
$thumbs = trim('testing/file_write/images/tn/','/');
$mask = '*.jp*g';

foreach(glob("$docroot/$thumbs/$mask") as $filename)
{
  $filename = basename($filename);
 ?>
  <img src=\"/$thumbs/$filename\" onclick="document.getElementById('try').classname='<?php echo $_POST['image'] ?>'"/>;
<?php
}        
?>

Sir ,please see this line of code
<img src=\"/$thumbs/$filename\" onclick="document.getElementById('try').classname='<?php echo $_POST['image'] ?>'"/>;

have i written this line right??

yogi
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 24075984
Try:

<img src=\"/$thumbs/$filename\" onclick="document.getElementById('try').style.backgroundImage='url(<?php echo $filename;?>)';" />;
0
 

Author Comment

by:designersx
ID: 24076073
sir, is there any problem in this code.
background-image:url(.'$_POST['image'].');       

it is not picking the image from form.php page, it was working earlier but now it is not working
i wrote echo $_POST['image'];exit   in file_write.php file , but    it is not showing any image.
the bg image is not shown in css file.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 24076100
I think you have to use

background-image:url('.$imagefolder.$imagename.');
0
 
LVL 11

Expert Comment

by:level9wizard
ID: 24078418


>>sir, is there any problem in this code.
>>background-image:url(.'$_POST['image'].');    

There absolutely is. This has a great vulnerability. I could post code into that script (http://en.wikipedia.org/wiki/Cross-site_scripting) and it could give me enough control to do some serious damage. Make sure you properly escape anything like this.
0
 

Author Comment

by:designersx
ID: 24103743
yes sir, thanks i got you.
0
 

Author Comment

by:designersx
ID: 24104078
respected roonan sir,

roonan sir u exactly understood my problem, thanks sir for that and posting the code.

by this i am able to associate image name with theme name. now i want to call the corresponding style, how i can achieve that.
please help me regarding that, i would be very thankful to you.

yogesh


0
 
LVL 49

Expert Comment

by:Roonaan
ID: 24108723
When $theme holds your classname, you would use:


<img onclick="document.getElementById('mydiv').className='<?php echo $theme;?>';"  .. etc .. />
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question