The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help Changing Multiple Font Colors
Jabo2531
post Aug 31 2019, 03:40 AM
Post #1





Group: Members
Posts: 3
Joined: 31-August 19
Member No.: 26,977



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 31 2019, 02:09 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jabo2531
post Aug 31 2019, 09:53 PM
Post #3





Group: Members
Posts: 3
Joined: 31-August 19
Member No.: 26,977





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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 1 2019, 04:46 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jabo2531
post Sep 5 2019, 02:00 AM
Post #5





Group: Members
Posts: 3
Joined: 31-August 19
Member No.: 26,977



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 5 2019, 04:49 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 02:48 AM