Tip: Personalize your forum module.

[Bernard Lama]

Hi all NCs,

This time, I'm gonna show you a small tip but could be effective. 

There is a continue link  at the bottom of every forum. That continue link is so boring and doesn't look good. That's why I wanted to customize it.

You may want to subscribe to my Pvt. Help Subscription or contact me for  Ning Re-desing at [e-mail]

Instruction for implementation:

Step 1: go to language editor and search Continue and change it to READ MORE and save it.

Step 2: Go to My Network>Settings>Appearance>Advanced>copy and paste this code into it and hit publish button.

The Code

.module_forum a:hover{
text-decoration: underline!important;
}

.xj_expandable,.xj_expandable.continue-link {
background-color: #D14836;
background-image: -webkit-linear-gradient(top,#DD4B39,#D14836);
background-image: -moz-linear-gradient(top,#DD4B39,#D14836);
background-image: -ms-linear-gradient(top,#DD4B39,#D14836);
background-image: -o-linear-gradient(top,#DD4B39,#D14836);
background-image: linear-gradient(top,#DD4B39,#D14836);
color: #fff!important;
width: 65px;
padding: 5px;
margin-top: 5px;
font-size: 10px;
font-weight: bold!important;
border-radius: 3px;
}

 

Live Preview: Click here

Example:

[classic]

Beautiful
Thank you, creator

[Dr Husky (Emalejandro)]

Great!

[solo]

cool beans

[Bernard Lama]

Thanks for the compliment guys...

[Chloe Prince]

I like it, but I am having trouble with it in the blog section.  We keep our Blog Module in the middle column, not the left column like you show in your Live example site.  

The problem I have is #1. What if I don't want it to affect the Blog Module.

And,

#2 If I do use it for the Blog module, the bottom pixels are cut off of the botton because NING pads and spaces the (Margin) of the "Detailed View" of the Blogs, differently than they do the Forums. And that means, the CSS formatting is not going to give you a consistant result in both modules, which, as the code stands, doesn't allow for this to be corrected... see photo attached:


As you can see in the Forum Module below, the READ MORE button looks fine. I added a shadow effect, changed the color and also added a TEXT Alignment Center.  But otherwise, I have not changed much.

Above the Forum Module, is our BLOG module, and you can see the Button appears smaller, and cut off on the bottom.

Question #3 is there a CSS or Java Script to change the spacing and padding for each post between the blogs, so the Continue (READ MORE) button will consistant with the one in the forum module?


Here is the Code I am using:

/* ADD/CHANGE FORUM "CONTINUE" BUTTON" */

.xg_module module_forum a:hover{
text-decoration: underline!important; }
.xj_expandable,.xj_expandable.continue-link {
background-color: #663366;
background-image: -webkit-linear-gradient(top,#581b58,#663366);
background-image: -moz-linear-gradient(top,#581b58,#663366);
background-image: -ms-linear-gradient(top,#581b58,#663366);
background-image: -o-linear-gradient(top,#581b58,#663366);
background-image: linear-gradient(top,#581b58,#663366);
text-align: center;
color: #FFF!important;
width: 65px;
padding: 5px;
margin: 10px;
font-size: 10px;
font-weight: bold!important;
border-radius: 3px 3px 3px 3px;
.shadow
-moz-box-shadow: 0 0 10px #410041;
-webkit-box-shadow: 0 0 10px #410041;
box-shadow: 0 0 10px #410041;}

 

[Dennis Rubio]

So when I got to my language editor section it gives me this?? :/ Doesnt show me anyting on changing "continue"

[Bernard Lama]

You can find this word easily. Contact Ning.

[Mat]

You have to click "English (U.S.) Edit" first

[Bernard Lama]

Remove this code .xj_expandable,  if you don't want it to affect the Blog Module. 

[Chloe Prince]

Thank you - that did it!!!