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

NC for Hire

Hello again,

Here's another tip for you NCs/admins and specifically for bloggers/writers, making your blog pages full width! I recall that this has been requested a while back by some NCs so why not give it a shot.

The solution below looks tricky but it is quite simple. By manipulating and copying 'key' style classes to your full width Page layout format, we can achieve the same full width layout with the blog pages using Javascript and jQuery. So below we do the trick by adding and removing classes.

Layout A1 and A4

  1
 x$(".xg_widget_profiles_blog_show .xg_last").remove();
  2
 x$(".xg_widget_profiles_blog_show .xg_span-16").addClass("xg_span-21");
  3
 x$(".xg_widget_profiles_blog_show .xg_span-16").removeClass("xg_span-16");

 

Layout B1 and B4

  1
 x$(".xg_widget_profiles_blog_show .xg_last").remove();
  2
 x$(".xg_widget_profiles_blog_show .xg_span-14").addClass("xg_span-21");
  3
 x$(".xg_widget_profiles_blog_show .xg_span-14").removeClass("xg_span-14");

 

Layout B2 and B3

  1
 x$(".xg_widget_profiles_blog_show .xg_span-7").remove();
  2
 x$(".xg_widget_profiles_blog_show .xg_span-14").addClass("xg_span-21");
  3
 x$(".xg_widget_profiles_blog_show .xg_span-14").removeClass("xg_span-14");

 

This tip is for the commonly used Design Studio. Code tested working on our test network (screencap below).

 


Example: Static Page here

Installation: Copy the code line by line, make sure to enclose it with the <script>tags or just download the attachment codes below and paste it to your custom code box.

Hope you'll find it useful.

 

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

  • Beautiful
    Thank you
    Possible to see an example of direct?

    • NC for Hire

      I see you got my link. good day my friend--

  • Awesome! Thanks Ron, it works beautifully!

    • NC for Hire

      You're welcome Patrick, glad you like it.

  • I have been trying to get this to work, and it's not working for me. I am using the B1 format. What could I be possible doing wrong? I ensured the code is wrapped in the script tags.

    • NC for Hire

      Hi there, not sure what's wrong but I think there might be some conflicting code on your part.

  • Do you have the code for B2/B3?

    • NC for Hire

      Hi Ceddy J, not yet this is just for the right side column layouts. will post when I get a chance..

    • NC for Hire

      Ceddy J, For a follow-up on the B2/B3 code, use the B1/B4 code I posted above and replace .xg_last with .xg_span-7

      Let me know if that works.

  • This looks great. Can't wait to try.

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

Scott Bishop liked Marly's discussion Ranking my Site in Google
31 minutes ago
⚡JFarrow⌁ replied to Marly's discussion
Ranking my Site in Google
"I'll send you my contact info... happy to help.... ive been organically ranking ning sites since…"
1 hour ago
Marly posted a discussion
Hello,   I've owned my Ning site for about 7 years now. All this time, I've neglected to rank my…
3 hours ago
Scott Bishop posted a discussion
I was removing a content element off my Home page and I must have hit the wrong delete button. I…
16 hours ago
Franke Lauria is now a member of Ning Creators Social Network
yesterday
Rhye updated their profile photo
yesterday
Scott Bishop replied to Scott Bishop's discussion
Shrinking Logo in Sticky Header
"Yes! 
Where do I go to see/change the html in the header? Also of those 3 parts where do you paste…"
Wednesday
Scott Bishop replied to Anastasia_Ning_Support's discussion
View counter feature is live
"Yes it does from the main Photo page but let's say someone wants to show off their surf trip to…"
Wednesday
Bizz replied to Scott Bishop's discussion
Layout Columns in a Forum Searched Page
"Scott here is the code for the blog classifieds page.
First create a new blog page and name it…"
Tuesday
Bizz replied to Scott Bishop's discussion
Number of Views
"If you want the views to be bigger you can do this with css, change the font size for bigger or…"
Tuesday
Bizz replied to Anastasia_Ning_Support's discussion
View counter feature is live
"Does not the search box on the photo page itself ( not the one at the top of the site ) find what…"
Tuesday
Scott Bishop replied to Anastasia_Ning_Support's discussion
View counter feature is live
"Oh wow! Thanks for pointing that out. This will be great for some small projects but wouldn't…"
Tuesday
More…

Meanwhile, you can check our social media channels