Replacing a CSS class using PHP? - php

I'm building the backend to a web application, where it is possible to change the design of a page. Once the user has setup the design the way they like it, they should be able to save it and the new design would be written to the specific file.
For this reason, I will need to replace all the characters between { and } after a certain string, which would be the name of the class.
So a very simple concept, say the following class was in a seperate file which I load as a view, style.php. I would need to go from:
from
<style>
.bonus {
bottom: 6px;
left: 247px;
}
</style>
to
<style>
.bonus {
bottom: 20px;
left: 450px;
}
</style>
Could someone recommend me on the best way to
a) find a string in a file,
b) when that is found, replace everything between two strings right after the first string.
Thank you.

I don't like the concept of the user making changes to the actual file very much. There are a lot of safer methods by which a user could create and maintain a custom template without them actually making changes to a PHP file.
What about storing the user's CSS in a field in a database? Then you'd simply need to do something like:
<?php
$css = getCSSByUserId($userId); //function runs query on DB to get user-specific CSS
/* $css = ".bonus {
bottom: 20px;
left: 450px;
}" */
?>
<style>
<?php echo $css; ?>
</style>

If you really want to edit the actual file, you'd do it something like this:
<?
$file = "/path/to/file.php";
//The user's replacement CSS
$replace = '.bonus {
bottom: 20px;
left: 450px;
}';
$str = file_get_contents($file);
$str = preg_replace('/\.bonus \{.*\}/U', $replace, $str);
$res = fopen($file, 'w');
fwrite($res, $str);
fclose($res);
?>
I checked the regex here http://www.quanetic.com/Regex and it works.

Related

PHP How to Echo Across the Whole Page

I have created a skin switcher and it is working great, but the code is messy.
I save a cookie and then for some defined css classes, I append '-userDelectedColourFromTheCookie' to the end of the css class to apply it on the page.
So far, I am adding a short php line to the end of every instance of these classes in the html code and as I have said, it is working.
I would prefer to run the php code just once across the whole page and update all occurrences of an array containing the required classes to append the class as above.
I have this at the top of my page:
<?php
$classList = array("theme-1","theme-2","theme-3","theme-4","theme-5","theme-6","theme-7","theme-8","theme-9","theme-10","theme-hover","theme-heading","theme-drop-content","theme-container","theme-banner-text");
if ((isset($_COOKIE["Theme"])) && in_array($_COOKIE["Theme"], array("Blue","Red","Grey","Ochre","Mauve"))) echo $classList."-".strtolower($_COOKIE["Theme"]);
?>
<!DOCTYPE html>
... etc
I am defining an array of css classes, then reading the user colour from the cookie and appending it to the css class.
As and example, the default class might be 'theme-3' but of the user selects the blue skin, then this class becomes 'theme-3-blue' and so on.
But it's not working.
Any help would be appreciated.
Don't mess with the element class lists. Use CSS files to apply the colours you want.
Start with a basic CSS design file:
p {
margin-left:10px
font-size: 12pt;
}
h1 {
font-size: 24pt;
}
div {
margin: 10px;
padding 20px;
}
Then create CSS colour files with different colour selections:
blue.css
p {
color:blue;
}
h1 {
color: darkblue;
background-color: lightblue;
}
red.css
p {
color:red;
}
h1 {
color: maroon;
background-color: pink;
}
default.css
p {
color:black;
}
h1 {
color:white;
background-color:black;
}
Then load the colour theme you want
<?php
if (isset($_COOKIE['theme'] && in_array($_COOKIE['theme'], ['red','blue'])) {
$themeCSS = '<link rel="stylesheet" href="'.$_COOKIE['theme'].'.css">';
} else {
$themeCSS = '<link rel="stylesheet" href="default.css">';
}
Then echo $themeCSS in your <head> just like any other <head> element
** I've used standard HTML elements here to illustrate, but any CSS selectors should work.
I believe you want to change the class names inside the $classList variable by appending the selected color theme from the cookies.
You may use the array_map function to modify all elements of your $classList array.
$classList = array("theme-1","theme-2","theme-3","theme-4","theme-5","theme-6","theme-7","theme-8","theme-9","theme-10","theme-hover","theme-heading","theme-drop-content","theme-container","theme-banner-text");
$themeColor = $_COOKIE["Theme"]; // blue
$classList = array_map(function($val) use ($themeColor) { return $val.'-'.$themeColor; }, $classList);
Once you use the array_map function, all elements of the $classList array will be appended with the "-blue".
You can execute and see the output here
http://sandbox.onlinephpfunctions.com/code/6051282e00be1eb7bb7e6a086de20bbcfe9bcc9f
Several good ways to do it. It's a little more complicated with the array of classes but you should be able to adjust this if you need it (not sure why the syntax highlighting is wonky).
Use output buffering and replace at the end:
<?php
ob_start();
?>
<html>
<head></head>
<body>
<div class="theme-1"></div>
</body>
</html>
<?php
$themes = array("Blue","Red","Grey","Ochre","Mauve");
if ((isset($_COOKIE["Theme"])) && in_array($_COOKIE["Theme"], $themes)) {
echo preg_replace('/class="(theme-[^"]+)"/', 'class="$1-' . $_COOKIE['Theme'] . '"', ob_get_clean());
}
With the array of classes, just do it the same way with output buffering but replace like so:
$replace = array_map(function($v) { return "{$v}-{$_COOKIE['Theme']}"; }, $classList);
echo str_replace($classList, $replace, ob_get_clean());

How to scan all available SCSS files ans parse the comments to create informations into an array?

I have many SCSS files and want to make a style guide (a library with all components like buttons, forms, ...). This style guide should work automatically, so that when you create a new stylesheet it should automatically scan the comments and put the data into an array to create a dynamic information page about the new component.
At example:
/**
* #title title1
* #description description1
* #author author1
*/
.list {
li {
overflow: hidden;
border-bottom: cornflowerblue;
margin: 0 0 4px 0;
}
a {
text-decoration: none;
}
}
Now I want to parse this comment and want to get the word(s) after a.e. the #title Tag. So in this case I would like to get the word "title1" and automatically save it into an array.
My try was following:
$source = file_get_contents("mysite/examplestyles.scss");
$tokens = token_get_all($source);
$comment = array(
T_COMMENT,
T_DOC_COMMENT
);
foreach ($tokens as $token)
{
if (!in_array($token[0], $comment))
{
continue;
}
$txt = $token[1];
}
How should I change my code sample to get the informations I would like to have?
It would be great if somebody can help me. I think it would be understandable if the ouput is the information I would like to get (title1, description1, author1) so a code sample would be nice to have.
If you have any questions you can ask me.
Thank you!
You're basically trying to re-invent SassDoc, but it is much better to use this solution

PHP truncate preg_replace URL

Need some suggestions for the methodology to achieve the following:
My current script gets text and if it has URL(s) then it replaces them. The issue is I want to truncate the URLS(s) so they do not break the width of a table or unsightly line break to fit them.
$text = file_get_contents("temp.txt");
$link = preg_replace('#(https?://([-\w\.]+)+(:\d+)?(/([-\w/_\.]*(\?\S+)?)?)?)#', '$1', $text);
echo $link;
I am concerned that if I substr() the $link then it won't work if multiple URLs are found. Can you PHP the $1 in the replacement? Any alternatives?
Use preg_replace_callback to modify the match and replacement. This returns the first 10 characters as an example:
$link = preg_replace_callback('#(https?://([-\w\.]+)+(:\d+)?(/([-\w/_\.]*(\?\S+)?)?)?)#',
function($m) {
return ''.substr($m[1], 0, 10).'';
},
$text);
This kind of problem can also be solved on client side using css (I assume you are speaking about the html element table in your question).
To do that, you have to give your cell a fixed size and to set the display property to inline-block. Then you can define the behaviour of the cell when a word is too long using the white-space, overflow and text-overflow properties.
Example:
<html>
<head>
<style>
.mytable td:nth-child(2) {
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table class="mytable">
<tr><td>abcd</td><td>www.smallurl.jp</td><td>efgh</td></tr>
<tr><td>ijkl</td><td>www.a-giant.url/larger/than/the/cell/width</td><td>mnop</td></tr>
</table>
</body>
</html>

PHP Check filenames

I've created a simple PHP script which reads .txt files (1.txt, 2.txt etc which each contain dummy text: "Test~Test test test test test test") and produces a html output of each file's content with a little html formatting.
<html>
<head>
<style type="text/css">
body {background-color: #80B2FF; font-family: arial,sans-serif;}
.content {background-color: #ffffff; margin: 35px auto; max-width: 75%; padding: 35px;}
</style>
</head>
<body>
<?php
for ($number = 3; $number>=1; $number--){
$article = $number.".txt";
$data = file_get_contents($article); //read the file
$convert = explode("~", $data); //create array separate by new line
echo '<div class="content">'.$convert[0].'<br/><br/>'; //write value by index 0
echo $convert[1].'<br/><br/>'.'</div>'; //write value by index 0
}
?>
</body>
</html>
This currently works just fine. The problem is that if I was to create the file 4.txt, I would have to hard code the $number variable to 4.
I have tried to automatically initialise $number to the highest number.txt. I need help creating a loop which would use the file_exists() function to test if a file x.txt exists, if it does then increment x and test again. If it doesn't exist, the loop should instead break out and hence I could just say $number=x.
I hope this explanation is clear enough, thank you for your time.
Use glob(), your method is pretty bad:
http://php.net/glob or http://www.w3schools.com/Php/func_filesystem_glob.asp
What you want to do is $arr = glob("*.txt"); and then loop through that array.

extract css classes and ID's from source with php

I thought this was going to be pretty simple, but I've been struggling with it now for a while. I know there are CSS parser classes out there that can acheive what I want to do... but I don't need 95% of the functionality they have, so they're not really feasible and would just be too heavy.
All I need to be able to do is pull out any class and/or ID names used in a CSS file via regex. Here's the regex I thought would work, but hasn't.
[^a-z0-9][\w]*(?=\s)
When run against my sample:
.stuffclass {
color:#fff;
background:url('blah.jpg');
}
.newclass{
color:#fff;
background:url('blah.jpg');
}
.oldclass {
color:#fff;
background:url('blah.jpg');
}
#blah.newclass {
color:#fff;
background:url('blah.jpg');
}
.oldclass#blah{
color:#fff;
background:url('blah.jpg');
}
.oldclass #blah {
color:#fff;
background:url('blah.jpg');
}
.oldclass .newclass {
text-shadow:1px 1px 0 #fff;
color:#fff;
background:url('blah.jpg');
}
.oldclass:hover{
color:#fff;
background:url('blah.jpg');
}
.newclass:active {
text-shadow:1px 1px 0 #000;
}
It does match most of what I want, but it's also including the curly brackets and doesn't match the ID's. I need to match the ID's and Classes separately when conjoined. So basically #blah.newclass would be 2 separate matches: #blah AND .newclass.
Any ideas?
===================
FINAL SOLUTION
I wound up using 2 regex to first strip out everything between { and }, then simply matched the selectors based on the remaining input.
Here's a full working example:
//Grab contents of css file
$file = file_get_contents('css/style.css');
//Strip out everything between { and }
$pattern_one = '/(?<=\{)(.*?)(?=\})/s';
//Match any and all selectors (and pseudos)
$pattern_two = '/[\.|#][\w]([:\w]+?)+/';
//Run the first regex pattern on the input
$stripped = preg_replace($pattern_one, '', $file);
//Variable to hold results
$selectors = array();
//Run the second regex pattern on $stripped input
$matches = preg_match_all($pattern_two, $stripped, $selectors);
//Show the results
print_r(array_unique($selectors[0]));
[^a-z0-9][\w]+(?=\s)
I changed your * to a + match
It works fine in RegEXR - an awesome regex development tool: http://gskinner.com/RegExr/ (See bottom right of window to download the desktop version)
This version is based on nealio82's, but adding pseudo-selectors:
[^a-z0-9][\w:-]+(?=\s)
/(?<!:\s)[#.][\w]*/
some thing like this? excludes the #FFFFFF color stuff...
The solution posted by OP works, though it didn't work for me with CSS classes that had hyphens. As such, I've amended the second pattern to work more effectively:
$pattern_two = '/[\.|#]([A-Za-z0-9_\-])*(\s?)+/';

Categories