CODEWITHSUNDEEP
javascriptphp
Kevin
Kevin

Reputation: 928

How to use dynamic CSS

I'm working on a footer generator which looks like this :

enter image description here

When people fill in the data it generates the code and a preview image of what its gonna look like.

enter image description here

For now it only works with the trademark and company name. What i am trying to achieve here is when people fill the field "your color" with some color value, I would like it to change the background color of the preview with the entered color. What is the best way to achieve this. Eventually i would like the entered value to be displayed. I'm not asking for code just a point in the right direction.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="resources/style.css">
    </head>

    <body>

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Footer Generator</a>
                </div>

                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                </ul>
            </div>
        </nav>

        <!-- Customize your footer and submit -->
        <div id="container">

        <form class ="form" method="post">

            <h3>Select your trademark</h3>

                <select class="form-control" name="trademark" action="">

                    <option></option>
                    <option>©</option>
                    <option>™</option>
                    <option>®</option>

                </select>

            <h3>Your company name</h3>

                <input class="form-control" type="text" name="companyName" placeholder="Your company name" />

                <h3>Your Color</h3>

                <input class="form-control" type="text" name="customColor" placeholder="Type in the value of your color e.g #ffffff" />

                <br/>
                <br/>

                <button class="form-control" type= "submit" name= "submit">Generate</button>
        </form>

        <!-- Shows raw code on click -->





        <!-- script for the preview image -->

<?php

function footerPreview ()
{
echo "<h3>Preview:</h3>";
date_default_timezone_set('UTC');
$trademark = $_POST["trademark"];
$company = $_POST["companyName"];       
$date = date("Y");          
echo "<div id='footer_date'>$trademark $date $company </div>";
}


// generate result for the head
function rawHead()
{
$head = htmlspecialchars('<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
</head>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your head tags</h4>$head</pre>";
}



// generate result for the body
function rawBody ()
{
$body1of5 = htmlspecialchars('<div id="footer_date">',ENT_QUOTES);
$body2of5 = $_POST["trademark"];
$body3of5 = date("Y");          
$body4of5 = $_POST["companyName"];
$body5of5 = htmlspecialchars('</div>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your body tags</h4>$body1of5 $body2of5 $body3of5 $body4of5 $body5of5 </pre>";
}

// generate result for the CSS
function rawCSS () 
{
$theCSS = htmlspecialchars('color:#ffffff;
width:100%;
background-color:rgba(0, 0, 0, 0.6);
text-align:center;
padding-top:15px;
height:50px;
font-family: "Raleway", sans-serif;
position:fixed;
right: 0;
bottom: 0;
left: 0;',ENT_QUOTES);
echo "<pre><h4>Put this code in your websites stylesheet</h4>$theCSS</pre>";
}

    // Generate everything

    if(isset($_POST['submit']))

    {
        footerPreview();
        rawHead();
        rawBody();
        rawCSS();
    } 

?>


</div>

<div id="generated_footer_date"> © 2016 Footer Generator </div> 

</body>
</html>

Upvotes: 2

Views: 384

Answers (2)

Sergio Rivas
Sergio Rivas

Reputation: 563

You have two ways to do this:

  1. Generate a new stylesheet file, I mean to create another file, and link this file dynamically

  2. Not use an external stylesheet file and use style inside your page....With this way you can replace your code with dynamic code that comes from DB or another place. So you can modify your rawCSS(); function and inse put something like this

    function rawCSS ($color = '#FF0') 
{
    $theCSS = htmlspecialchars("color:#ffffff;
    width:100%;
    background-color: ${color};
    text-align:center;
    padding-top:15px;
    height:50px;
    font-family: 'Raleway', sans-serif;
    position:fixed;
    right: 0;
    bottom: 0;
    left: 0;",ENT_QUOTES);
    echo "<pre><h4>Put this code in your websites stylesheet</h4>$theCSS</pre>";
}

I changed on purpose single quotes with double to support interpolate strings....

So after that yo have to pull your color from the query string or database and that is it.

Upvotes: 2

Randy
Randy

Reputation: 9819

You could load in the elements dynamically with JavaScript, probably JQuery to make it easier to select and change elements. I've got an example of how to change the color of any element in your page dynamically below:

$('body').on('blur', '#stylemenowcolor', function(){
  $('.stylemenow').css('background-color', '#' + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="stylemenow">
  test
</div>

<input placeholder="(e.g. 00ff00)" type="text" id="stylemenowcolor">

Upvotes: 1

Related Questions