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

NC for Hire

Around this time last year I posted a tip for how to add text effects to your imported Google Fonts and this seemed to be helpful for other NCs looking to add a little flare to their fonts.  But what about those who just want to style their headers and titles but are not importing google fonts?  That's what this tip is for.  Furthermore, this is mainly geared towards NC's who have sites with darker backgrounds, but will also work on lighter backgrounds as well.  This will be a simple tip for those who are even slightly familiar with CSS and how it works on Ning networks.

First I will show you a little table I whipped up which on the left shows the HTML for actually placing the text in the page and on the right you see the CSS which styles the text, giving it the effect we are going for.  This method uses no images or javascript.  There are a couple of effects in this list which use SVG and may require a bit more understanding (great article here) but if this is confusing to you don't let it deter you from trying out the others based purely on CSS.  I have a codepen set up over here to use as a playground.

HTML Corresponding CSS
<h2 class="text text_anaglyphic">anaglyphic</h2>
<h2 class="text text_embedded">embedded</h2>
<h2 class="text text_embossed">embossed</h2>
<h2 class="text text_neon">neon</h2>
<h2 class="text text_fire">fire</h2>
<h2 class="text text_retro">retro</h2>

<h2 class="text text_blurred">
<svg width="100%">
<text class="text_blurred_svg" font-size="60" font-family="Roboto, "Gill Sans", "Gill Sans MT", Calibri, sans-serif" x="300" y="80" text-anchor="left">Blurred</text>
<filter id="textFilter">
<feGaussianBlur stdDeviation="5" />
</filter>
</svg>
</h2>

<h2 class="text text_gradient">
<svg width="100%">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#5e5e5e;stop-opacity:1" />
<stop offset="100%" style="stop-color:#a3a3a3;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad1)" font-size="60" font-family="Roboto, "Gill Sans", "Gill Sans MT", Calibri, sans-serif" x="300" y="100" text-anchor="left">Gradient</text>
</svg>
</h2>

<h2 class="text text_golden">
<svg width="100%">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f9d400;stop-opacity:1" />
<stop offset="48%" style="stop-color:#f89c00;stop-opacity:1" />
<stop offset="53%" style="stop-color:#f89c00;stop-opacity:1" />
<stop offset="100%" style="stop-color:#f9d400;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad2)" font-size="60" font-family="Roboto, "Gill Sans", "Gill Sans MT", Calibri, sans-serif" x="300" y="100" text-anchor="left">Golden</text>
</svg>
</h2>

<div class="container">
<h2 class="text text_stitched">stitched</h2>

</div>
<h2 class="text text_3d">3-d effect</h2>
.text {
font-size: 60px;
margin: 40px 300px 0;
text-transform: uppercase;
}

.text_anaglyphic {
color: #f9689a;
text-shadow: -4px -4px 0 #77caff;
}

.text_embedded {
color: #111111;
text-shadow: -1px 1px 1px #3e3e3e;
}

.text_embossed {
color: #603624;
text-shadow: -1px -1px 0 #5d5d5d;
}

.text_neon {
color: #f5f5f5;
text-shadow: 0 0 3px #f5f5f5,
0 0 15px #7deaec,
0 0 30px #7deaec;
}

.text_fire {
color: #f5f5f5;
text-shadow: 0 -1px 1px #f4eba1,
0 -2px 2px #f0df72,
0 -3px 3px #e2be3a,
0 -10px 20px #b57400,
0 -20px 30px #7d4217;
}

.text_retro {
color: #7d4217;
text-shadow: 3px 2px 0 #333333,
6px 4px 0 #999999;
}

.text_blurred {
height: 80px;
margin: 40px auto;
text-align: center;
}

.text_blurred_svg {
fill: #a7a7a7;
filter:url(#textFilter);
}

.text_gradient {
height: 80px;
margin: 40px auto;
text-align: center;
}

.text_golden {
height: 100px;
margin: 40px auto;
text-align: center;
}

.container {
display: inline-block;
padding: 13px;
margin: 0 0 0 300px;
background: #555555;
-webkit-box-shadow: 1px 1px #111111;
-moz-box-shadow: 1px 1px 3px #111111;
box-shadow: 1px 1px 3px #111111;
text-align: center;
}

.text_stitched {
display: inline-block;
padding: 25px 37px;
border: 3px dashed #777777;
margin: 0;
text-align: center;
color: #dddddd;
background: #555555;
}

.text_3d {
color: #b50e00;
text-shadow: 1px 0 0 #510300,
2px 0 0 #510300,
3px 0 0 #510300,
4px 1px 0 #510300,
5px 2px 0 #510300,
6px 3px 0 #510300,
8px 4px 0 #510300,
9px 5px 0 #510300,
10px 6px 0 #510300;
}

Now For Applying These Effects to Headers and Titles Within your Ning Network

If you look at this page from Ning indicating the CSS selectors to use when specifying styles, you will see that, for example, if you grab the CSS above for the Fire Text:

.text_fire {
color: #f5f5f5;
text-shadow: 0 -1px 1px #f4eba1,
0 -2px 2px #f0df72,
0 -3px 3px #e2be3a,
0 -10px 20px #b57400,
0 -20px 30px #7d4217;
}

and add  the selector for Page Title which is h2.module-name

you'll have this (note the comma between selectors):

h2.module-name, .text_fire {
color: #f5f5f5;
text-shadow: 0 -1px 1px #f4eba1,
0 -2px 2px #f0df72,
0 -3px 3px #e2be3a,
0 -10px 20px #b57400,
0 -20px 30px #7d4217;
}

Add this to your advanced CSS in Design Studio and all of your page titles will be set on fire!

Feel free to ask any questions you might have and as always you can reach out to me if you need help with design or development on your Ning network.

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.
 

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

Steve C posted a discussion
 I want to put ads above individual groups.Jen showed me how to put text above forum categories…
25 minutes ago
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"I don't use file manager for photos, so if it's a photo I'm not interested even if after I close…"
5 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I agree with you, but I want it rounded, on the square it gives no problem,this is an impossible…"
20 hours ago
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"It's because you are using the ridge as a border, to create the ridge the border property adds the…"
20 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I don't want to go below 13 px I know all would be ok but it's too logical"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"#xg_masthead /*Top Image*/ {margin: auto;display: block;height:600px;width: auto…"
yesterday
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
" show the css you have used for the border"
yesterday
Rosas † Negras posted a discussion
yesterday
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"OH MY GOD!!!! :D :D :D It worked!!!
 
I am so pleased. Thank you Bizz and Rosas for your help. I…"
yesterday
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"Thank you Rosas and Bizz.
I am afraid I do not understand these instructions.
I will see if I can…"
yesterday
Anam and Rosas † Negras are now friends
yesterday
Pam Givens replied to ⚡JFarrow⌁'s discussion
TIP: 😳Friendly Reminder for Visitors Who Copy Your Content in 3 Easy Steps
"Hi Bizz where do I put that code?  I will use the one about copying from my whole site.  That will…"
yesterday
More…

Meanwhile, you can check our social media channels