The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Secondarytitle

3 posters

Go down

Solved Secondarytitle

Post by sun1994 Thu 26 Jan - 13:45

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

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. Thu 26 Jan - 13:51

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.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Solved Re: Secondarytitle

Post by sun1994 Thu 26 Jan - 14:05

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
sun1994
Forumember

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. Thu 26 Jan - 14:25

Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Solved Re: Secondarytitle

Post by sun1994 Thu 26 Jan - 14:29

Yes! Very Happy
sun1994
sun1994
Forumember

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. Thu 26 Jan - 14:41

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.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Solved Re: Secondarytitle

Post by Guest Thu 26 Jan - 14:42

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); ');
});
avatar
Guest
Guest


Back to top Go down

Solved Re: Secondarytitle

Post by Nera. Thu 26 Jan - 14:45

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

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Solved Re: Secondarytitle

Post by Guest Thu 26 Jan - 14:46

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....
avatar
Guest
Guest


Back to top Go down

Solved Re: Secondarytitle

Post by Nera. Thu 26 Jan - 14:53

Just tried it, works like charm Very Happy
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Solved Re: Secondarytitle

Post by LGforum Thu 26 Jan - 14:59

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 Thu 26 Jan - 15:07; edited 3 times in total
LGforum
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. Thu 26 Jan - 15:00

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

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Solved Re: Secondarytitle

Post by sun1994 Fri 27 Jan - 14:02

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
sun1994
Forumember

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by LGforum Fri 27 Jan - 14:16

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
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Solved Re: Secondarytitle

Post by sun1994 Fri 27 Jan - 14:24

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

Posts : 81
Reputation : 1
Language : dutch

Back to top Go down

Solved Re: Secondarytitle

Post by Nera. Fri 27 Jan - 14:25

Topic Solved & Locked
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Back to top


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