Current status of the Ning Platform is always available on the Ning Status Blog.

9624884100?profile=RESIZE_584xADD INTO APPERANCE  CSS

color generator. body {
margin: 0;
padding: 0;
display: grid;
place-items: center;
height: 0vh;
font-size: 20px;
}

.main {
height: 200px;
width: 190px;
background: #800000;
border-radius: 10px;
display: grid;
place-items: center;
color: #fff;
font-family: verdana;
border-radius: 15px;
}

#colorPicker {
background-color: none;
outline: none;
border: none;
height: 60px;
width: 80px;
cursor: pointer;
}

#box {
outline: none;
border: 2px solid #151515;
border-radius: 50px;
height: 40px;
width: 120px;
padding: 0 10px;
}
.container > div {
margin: 2em 0;
}

textarea {
padding: 1em;
overflow-y: auto;
resize: none;
border-radius:4px;
}

button {
width:100%;
~ button {
margin-top:4px;
}
}

 

 

ADD HTML

 

<div class="main">
<p><!-- To select the color --><br />
Color Themes: <input type="color" id="colorPicker" value="#6a5acd" /></p>
<p><!-- To display hex code of the color --><br />
Hex Code: <input type="text" id="box" /></p>
</div>

 

 

SCIPT ADD CUSTOM CODE

 

<script>
function myColor() {

// Get the value return by color picker
var color = document.getElementById('colorPicker').value;


// Take the hex code
document.getElementById('box').value = color;
}

// When user clicks over color picker,
// myColor() function is called
document.getElementById('colorPicker')
.addEventListener('input', myColor);
</script>

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • This reply was deleted.
This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Rosas † Negras posted a discussion
 textarea.input-full { border: 2px groove #FFF;padding:border: 0px solid rgba(100, 100, 100, 1);…
5 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I got my buttons coding going and changed on most layouts now. I like it when things glow lol "
20 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I thought you may be an NC for Hire as well? My bad. You could probably be one tho if you wanted to…"
20 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"i added the perfect css thanks for making the remark"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"status-container {border: 2px groove #eed255;padding: 10px;border-radius:…"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"I don't copy codes, the first person who created this is jen ,you have never had this css since I…"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"thank you my Master Bizz "
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"⚡JFarrow⌁ 
we all miss you brother. creators in need of your codes,let's make this place alive…"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
".status-container {border: 2px groove #eed255;padding: 10px;border-radius:…"
yesterday
⚡JFarrow⌁ replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"took the words out of my fingers..."
yesterday
Bizz replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"The above code you added is wrong, it has a curley bracket at the start and not one at the end of…"
yesterday
Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I will add my profile themes back onto my demo site as this will give you some idea of just how…"
yesterday
More…

Meanwhile, you can check our social media channels