Looks like you've got JavaScript disabled in your browser - you'll get a better site experience if you enable JavaScript

solved Adding right side column to all pages

The Jamroom Network » Forum » Design and Skin Customization » Page » Adding right side column to all pages

Elise
@elise
8 years ago
249 posts

I have ads that used to live on a right hand side column on all my pages on Ning.
I'm trying to make something similar on all my pages, except home/profiles/private notes. I'm trying this on my Groups page (and then move on to forum and blog).

I know this is not easy because each template is different and it would be easier to have a "top banner" ad because I can just modify the header. But I don't like how it looks. It's too intrusive.

So I am making a new template file (on my cloned Ningja skin) to avoid duplicate content and include that in my ad div.

My question is specifically about the css/html structure in the Skin templates, specifically how to use the css colXXX. Keep in mind that I know a little css, but not a lot. Please assume the worst...

I have attached a screenshot of what I want to do.

Right now, the groups template ( http://empathcommunity.eliselebeau.com/group) page has this structure

<div class="block">
    <div class="title">
    <div class="block_content">

I tried

<div class="block">
    <div class="title">
    <div class="block_content">
        <div class="col9">
        <div class="col3">

but that did not work well. See screenshot, the new div is in red.

The problems:
The grey background is yanked out
There no white box for the new div
The text is displayed in a vacuum

What is the structure (including the class names) that would allow me to have 2 columns (col9 and col3, I think) on grey background each with white boxes?

Thanks for your hints!

updated by @elise: 12/16/16 04:01:37PM

@michael
8 years ago
7,692 posts

The colXX is a 12 column structure, col12 is full width of the page, col6 is half width of the page.

so:

<div class="row">
  <div class="col6">this is half the row </div>
  <div class="col6">this is the other half the row </div>
</div>

or 3 rows of 4

<div class="row">
  <div class="col4">first one third</div>
  <div class="col4">second one third</div>
  <div class="col4">third one third</div>
</div>

You CAN have nested rows:

<div class="row">
  <div class="col6">
    // going to add another row in here
 </div>
  <div class="col6">this is the other half the row </div>
</div>

<div class="row">
  <div class="col6">
      <div class="row">
        <div class="col4">first one third</div>
        <div class="col4">second one third</div>
        <div class="col4">third one third</div>
     </div>
 </div>
  <div class="col6">this is the other half the row </div>
</div>

So what I would do is in these templates in the ningja skin, the main content body is defined:
profile_item_detail.tpl
profile_item_index.tpl
profile_item_list.tpl

They set the main body width to col9. If you reduced that to col6 then you would have space for a col3 on the right hand side. You could add the advert there.

@michael
8 years ago
7,692 posts

For that specific page your-site.com/group the controling template is found at:
/modules/jrGroups/templates/index.tpl

Docs: "Altering a Modules template"
https://www.jamroom.net/the-jamroom-network/documentation/jamroom-developers-guide/1051/altering-a-modules-template

It looks like this:

{jrCore_include template="header.tpl"}

<div class="block">

    <div class="title">
        {jrSearch_module_form fields="group_title,group_description"}
        <h1>{jrCore_lang module="jrGroup" id=1 default="Groups"}</h1>
    </div>

    <div class="block_content">
        {jrCore_list module="jrGroup" order_by="_item_id numerical_desc" pagebreak=10 page=$_post.p pager=true}
    </div>

</div>

{jrCore_include template="footer.tpl"}

You could wrap the inner of that in a row.

{jrCore_include template="header.tpl"}

<div class="row">
 <div class="col9">


<div class="block">

    <div class="title">
        {jrSearch_module_form fields="group_title,group_description"}
        <h1>{jrCore_lang module="jrGroup" id=1 default="Groups"}</h1>
    </div>

    <div class="block_content">
        {jrCore_list module="jrGroup" order_by="_item_id numerical_desc" pagebreak=10 page=$_post.p pager=true}
    </div>

</div>

 </div>

 <div class="col3">
   PUT YOUR ADVERT IN HERE
  </div>
</div>


{jrCore_include template="footer.tpl"}

Elise
@elise
8 years ago
249 posts

Ah AH! I was missing th row before the colum. The formatting looks right now.
Thanks!!!

solved Adding right side column to all pages

Tags