The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Secondarytitle

View previous topic View next topic Go down

Solved Secondarytitle

Post by sun1994 on January 26th 2012, 8:45 pm

How can you make different secondarytitle classes in the templates? So you can change the headers one by one differently.

sun1994
Forumember

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. on January 26th 2012, 8:51 pm

Add them next to the existing one with just space in beetween sun?
Like class="newclass secondarytitle"
I'm not getting the question right?

Take a look http://css-tricks.com/multiple-class-id-selectors/

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Secondarytitle

Post by sun1994 on January 26th 2012, 9:05 pm

Well, for example you have two categories: 'General' and 'Game related'.
Then I want to put a different image in the header of 'general' than the one in 'game related. Normally it's not so difficult to change the header, I just take the code:

.secondarytiltle {}

but that one changes ALL the titles in the header, and I don't want that, I want to change them each apart.

sun1994
Forumember

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. on January 26th 2012, 9:25 pm


Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Secondarytitle

Post by sun1994 on January 26th 2012, 9:29 pm

Yes! Very Happy

sun1994
Forumember

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. on January 26th 2012, 9:41 pm

Go to your index_box template and find this:

Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>

Replace it with this:

Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr class="svi">

Than go to your categories title and wrap it with a class like this (every title different class) =>

First categories title:

Code:
<span class=forum1>About the forum</span>

Second title:

Code:
<span class=forum2>Bucket of the forum</span>

And so on for all.

Than add this to your JS:

Code:
$(document).ready(function() {
$('tr.svi:has(".forum1")').css('background-image', 'url(http://images.free-extras.com/pics/g/green_grass-611.jpg)');
$('tr.svi:has(".forum2")').css('background-image', 'url(http://hidefwallpaper.org/wp-content/gallery/sea_06/paul-evans-sea-sparkle-107625.jpg)');
});

For every categories title you'll add a new JS line and change the class in it with yours (the one you added in the categories title).

$('tr.svi:has(".forum2")').css('background-image', 'url(http://hidefwallpaper.org/wp-content/gallery/sea_06/paul-evans-sea-sparkle-107625.jpg)');

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Secondarytitle

Post by Guest on January 26th 2012, 9:42 pm

Or just something like this:
Code:
$(function() {
$('table.forumline tr').has('.secondarytitle').eq(0).attr('style', 'background-image: url(http://hidefwallpaper.org/wp-content/gallery/sea_06/paul-evans-sea-sparkle-107625.jpg); ');
});

Guest
Guest


Back to top Go down

Solved Re: Secondarytitle

Post by Nera. on January 26th 2012, 9:45 pm

Gassy would that add a different image to every categories header mwii ?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Secondarytitle

Post by Guest on January 26th 2012, 9:46 pm

@Nera. wrote:Gassy would that add a different image to every categories header mwii ?
I don't tested if works but I used eq function. Smile
So, 0 will be first category, 1 - second category....

Guest
Guest


Back to top Go down

Solved Re: Secondarytitle

Post by Nera. on January 26th 2012, 9:53 pm

Just tried it, works like charm Very Happy

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Secondarytitle

Post by LGforum on January 26th 2012, 9:59 pm

Code:
<span class=forum1>About the forum</span>

If your setting unique classNames, then you may as well set an ID for optimization. Elements can always be found quicker by ID. Especially when using jQuery.

Then all it takes is this:
Code:

document.getElementById('forum2').parentNode.parentNode.parentNode.style.backgroundImage=URL HERE;

Which is much faster Wink
Pure JS/native JS is often faster than using jQuery.


Last edited by LGforum on January 26th 2012, 10:07 pm; edited 3 times in total

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. on January 26th 2012, 10:00 pm

Thanx for the tip LG, we'll leave Sun to try it out now ;-)

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Secondarytitle

Post by sun1994 on January 27th 2012, 9:02 pm

Thank you all for your help, although I'm a little bit confused now because of the many different ways.. xD

Anyway, it's not working. I tried it all, but no picture is showing. =(
Maybe it is because I also changed the class 'forumline' into 'board'? But I don't see why that should make any trouble. Or am I just messing it up? Which one of the three ways should work best?

sun1994
Forumember

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by LGforum on January 27th 2012, 9:16 pm

Go to the forums management part and set the title of the forum (the one you want to change the background bit on) as this:
Code:
<span id=forum1>About the forum</span>

Then you can add in JS management this:
Code:

$(function(){
document.getElementById('forum2').parentNode.parentNode.parentNode.style.backgroundImage="IMAGE URL HERE";
});
Remember to replace "IMAGE URL HERE" with your actual images url. Thats the fastest method by JS i can suggest.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Secondarytitle

Post by sun1994 on January 27th 2012, 9:24 pm

It worked! Thank you. Don't know what I did wrong earlier. x'D
Solved! Very Happy

sun1994
Forumember

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. on January 27th 2012, 9:25 pm

Topic Solved & Locked

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum