Solved

CALL CSS THROUGH PHP?

Posted on 2009-04-06
23
1,715 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now