Help - Search - Members - Calendar
Full Version: Help Changing Multiple Font Colors
HTMLHelp Forums > Programming > Server-side Scripting
Jabo2531
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
Christian J
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).
Jabo2531


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.

Christian J
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.
Jabo2531
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.
Christian J
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.