Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Server-side Scripting _ Help Changing Multiple Font Colors

Posted by: Jabo2531 Aug 31 2019, 03:40 AM

So I have a somewhat simple problem I cant figure out.

I have a super simple web application that works.
I want to change it so that when a user enters a color like RED it outputs the word RED but in red text. Same goes with blue, green etc.

I understand that php doesn't do any formatting in regards to color, background fonts. etc. thats all with CSS/HTML.

Here is the output page

CODE
<?php
$your_name = $_POST['yourName'];
$your_color = $_POST['yourColor'];
$colors = [

?>


<!DOCTYPE html>

<html>
<head>
    <title>Practice</title>
    <link href="stylesheet2.css" rel="stylesheet" type="text/css" />
    <style>

    </style>
</head>

<body>
    <div id="content">
        <h1>This is the Second Page</h1>
        <p> Hello <?php echo $your_name; ?></p>
        <p> Your Favorite Color is <?php echo $your_color; ?>
        
        <p><a href="first.html"> Go Back</a></p>
    </div>
</body>
</html>



Here is the CSS snippet for the form

CODE
#content {
    width: 450px;
    margin: 0 auto;
    padding: 0px 20px 20px;
    background: red;
    color: blue;
    border: 2px solid navy;
    

}


I have been wracking my brain on this problem for a better part of a week and Im certain it needs an inline style via
CODE
<span></span>
but cant figure out how to merge the two.

Thanks in advance

Posted by: Christian J Aug 31 2019, 02:09 PM

QUOTE(Jabo2531 @ Aug 31 2019, 10:40 AM) *

I want to change it so that when a user enters a color like RED it outputs the word RED but in red text. Same goes with blue, green etc.

What if the color name does not exist?

QUOTE
I understand that php doesn't do any formatting in regards to color, background fonts. etc. thats all with CSS/HTML.

You can let PHP generate the HTML and CSS. For example:

CSS
CODE
span.sample {color: <?php echo $your_color; ?>;}


HTML
CODE
<p> Your Favorite Color is <span class="sample"><?php echo $your_color; ?></span>


A few notes though:

- Users may type in incorrect color values.

- Users may inject their own HTML through the form, unless you limit what they're allowed to submit. PHP's htmlspecialchars() function is one way to avoid that.

- If the user chooses the same color as the background, the resulting text will be invisible.

You can avoid all the above problems by only allowing a whitelist of predefined colors, and comparing the user's input with the list. In addition you can offer the user a list a color names in e.g. a list of radio buttons (but such a list should always be double-checked on the server-side).

Posted by: Jabo2531 Aug 31 2019, 09:53 PM



CSS

CODE
span.sample {color: <?php echo $your_color; ?>;}


HTML
CODE
<p> Your Favorite Color is <span class="sample"><?php echo $your_color; ?></span>


This is what I was looking for something really simple, but alas it doesn't want to work. which by all accounts it should. CSS changes the color via referencing the variable then with the output it prints out the text in the color the user is choosing. It is out putting correctly with what you have written but its not doing the color change.


Posted by: Christian J Sep 1 2019, 04:46 AM

Make sure that there's no other CSS rule with higher specificity affecting the color. You can override that with e.g. an "!important" keyword:

CODE
span.sample {color: <?php echo $your_color; ?> !important;}

If it still doesn't work, please post the CSS and HTML that the PHP has generated.

Posted by: Jabo2531 Sep 5 2019, 02:00 AM

QUOTE(Christian J @ Sep 1 2019, 05:46 AM) *

Make sure that there's no other CSS rule with higher specificity affecting the color. You can override that with e.g. an "!important" keyword:

CODE
span.sample {color: <?php echo $your_color; ?> !important;}

If it still doesn't work, please post the CSS and HTML that the PHP has generated.



Thanks for the help, your solution was working for me. My issue was I was putting all the CSS into a external file instead of doing it within the HTML document itself. got it all sorted now and it works correctly.

Posted by: Christian J Sep 5 2019, 04:49 AM

QUOTE(Jabo2531 @ Sep 5 2019, 09:00 AM) *

My issue was I was putting all the CSS into a external file instead of doing it within the HTML document itself.

That should work as well.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)