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
search bar
51 minutes ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ liked Rosas † Negras's discussion Ning 3.0 - if you want to stylize your status-container these are CSS
6 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"This one supposedly makes text glow:
glow { font-size: 80px; color: #fff; text-align: center;…"
14 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"Thank you :)
I found some decent css this morning, that works with our DS from jigsy.com which is a…"
14 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"That is sorta what I mean, but had forgotten the codes for these things, I have not themed with css…"
14 hours ago
Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"So let's say you want to add  an image on hover to the nav buttons, you could add it like this…"
yesterday
Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I will try that txt file on one of my sites to check it"
yesterday
Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"Share that glow code you like and I will show you how to get it to work on Ning.
 
That is easy…"
yesterday
Rosas † Negras replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"you have to work on... .navbar a {, if you want the results on the navigation bar"
yesterday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ liked Bizz's discussion Tip: Adding a plus media button to your activity feed
yesterday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ liked Bizz's discussion Tip: Adding add content links to your activity feed
yesterday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"Still can not import an exported file back in, and I have css added now."
yesterday
More…

Meanwhile, you can check our social media channels