Tip: Full Width Blog Page

[Ron]

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.

 

[classic]

Beautiful
Thank you
Possible to see an example of direct?

[Ron]

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

[Patrick Chappelle]

Awesome! Thanks Ron, it works beautifully!

[Ron]

You're welcome Patrick, glad you like it.

[creator5968]

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.

[Ron]

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

[Ceddy J]

Do you have the code for B2/B3?

[Ron]

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

[Ron]

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.

[Kirsten Naughton]

This looks great. Can't wait to try.