Solved

CALL CSS THROUGH PHP?

Posted on 2009-04-06
23
1,723 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
  • 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to count occurrences of each item in an array.
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).

840 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