Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1730
  • Last Modified:

CALL CSS THROUGH PHP?

can u please site me an example in which we can  css through php?
0
designersx
Asked:
designersx
  • 11
  • 6
  • 4
  • +2
1 Solution
 
qwerty021600Commented:
<?php
include("layout.css");
include("navigation.css");
include("colors.css");
include("hacks.css");
?>
0
 
Loganathan NatarajanLAMP DeveloperCommented:
You can include the css through php, by echoing the CSS styles.


0
 
designersxAuthor Commented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
RoonaanCommented:
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
 
Loganathan NatarajanLAMP DeveloperCommented:
try,


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

Open in new window

0
 
designersxAuthor Commented:
logudotcom: i can't write class="css name" because i am generating the dynamic css.


0
 
Loganathan NatarajanLAMP DeveloperCommented:
Ok, do you want to apply CSS style to the <a tag?
0
 
designersxAuthor Commented:
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
 
designersxAuthor Commented:
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
 
Loganathan NatarajanLAMP DeveloperCommented:
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
 
RoonaanCommented:
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
 
designersxAuthor Commented:
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
 
designersxAuthor Commented:
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
 
RoonaanCommented:
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
 
designersxAuthor Commented:
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
 
designersxAuthor Commented:
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
 
RoonaanCommented:
Try:

<img src=\"/$thumbs/$filename\" onclick="document.getElementById('try').style.backgroundImage='url(<?php echo $filename;?>)';" />;
0
 
designersxAuthor Commented:
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
 
RoonaanCommented:
I think you have to use

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


>>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
 
designersxAuthor Commented:
yes sir, thanks i got you.
0
 
designersxAuthor Commented:
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
 
RoonaanCommented:
When $theme holds your classname, you would use:


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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 11
  • 6
  • 4
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now