Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Safari
Who the problem concerns : All members
When the problem appeared : It's just there.
Forum link : http://outcastwarriors.forum-motion.com/forum

Description of problem

Hello!

I have been modifying the layout of my forum's index and have been using this CSS code to make my categories on the main page lay out next to one another:
 

Code:

#index-forum .forabg {
  display:inline-block;
  vertical-align:top;
  margin-top:1px;
  margin-bottom:1px;
  margin-left:15px;
  margin-right:0px;
  width:45%;
}

It works absolutely fine.

However, I was wondering if it was possible if the code could only affect specific categories? As in, only some of the categories line up next to one another, and the others on the same page look like default categories?
Example:
Single Category
Two Categories
Two Categories
Single Category

I have seen this Javascript code I found in this topic (link) used to affect the "Last Post, Post Number, Post Author" tables for only specific categories and I have used it:

Code:

$(function() {
$('div.forabg:contains("TITLE OF CATEGORY") dd.topics, div.forabg:contains("TITLE OF CATEGORY") dd.posts, div.forabg:contains("TITLE OF CATEGORY") dd.lastpost').css('display','none');
});

I was wondering if something similar could be devised for the category layout?

Thank you.

EDIT: I am now worried I may have put this question in the wrong place.

No this is the right place you just have to hold on for a member or a member of our staff to rad your post and help make a code for you.

Hi @longstormicus,

It's possible, you'll just need to use a bit of javascript. Go to Modules > JavaScript codes management and create a new script with the following settings.

Placement : In the homepage

Code:

$(function() {
  var categories = {
    'Clan Territories' : 'clan-territories',
    'The Night Sky' : 'the-night-sky'
  },

  forabg = $('.forabg'), i = 0, j = forabg.length, h2, k;

  for (; i < j; i++) {
    h2 = forabg[i].getElementsByTagName('H2')[0];
    if (h2) {
      for (k in categories) {
        if (k.toLowerCase() == $(h2).text().toLowerCase()) {
          forabg[i].className += ' ' + categories[k];
          break;
        }
      }
    }
  }
});

To apply a class to a specific category you'll need to edit the categories object at the top of the script.

Code:

  var categories = {
    'Clan Territories' : 'clan-territories',
    'The Night Sky' : 'the-night-sky'
  },

To the left of the colon is the category title and to the right is the class name we want applied to it. So to make it simple; 'TITLE' : 'CLASSNAME' pairs, and a comma at the end if there's another pair after it.

Hello Ange Tuteur,

I applied the javascript code but I do not see any change. Is there something else I need to do to get it to take effect?

Thank you!

It looks like you forgot a comma after :

Code:

'Roleplay Resources' : 'roleplay resources'

Here, replace it with this :

Code:

$(function() {
  var categories = {
    'Roleplay Resources' : 'roleplay resources',
    'The Night Sky' : 'the-night-sky'
  },

  forabg = $('.forabg'), i = 0, j = forabg.length, h2, k;

  for (; i < j; i++) {
    h2 = forabg[i].getElementsByTagName('H2')[0];
    if (h2) {
      for (k in categories) {
        if (k.toLowerCase() == $(h2).text().toLowerCase()) {
          forabg[i].className += ' ' + categories[k].replace(/\s/g, '-');
          break;
        }
      }
    }
  }
});

When done you should be able to reference the category via .forabg.roleplay-resources

Well, holy frickin crap, that's AMAZING. It works perfectly! THANK YOU VERY MUCH!!!

I will mark this topic "solved."

You're welcome ^^

Topic archived

If you have anymore problems feel free to open a new topic.