Childboards as Dropdown

[SgtMic]

Anyway to change the background color?
Other than the white (for me), it's a great mod.

@SgtMic You can edit the class value to match whatever you're using for your current custom template.  The first <td colspan="3" class="windowbg' values should control that.

Not quite. What he'd actually have to do is assign a class to the select for that td so he could style it to suit. Something like:

Code Select Expand

<select class="child_drops" name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != \'?\' ? 0 : 1);">
<option value="">' . $txt['select_destination'] . '</option>';

And in the style.css something like:

Code Select Expand

select .child_drops
{
    background: #000000;
    color: #FFFFFF;
}

Also just curious, but wouldn't giving the select an id lead to duplicate id validation errors when you had more than one board with child boards? I would have thought they'd be better called as a class, but I may be wrong about this.

I'm using the core default theme. Which way would be the better approach?

[Antechinus]

They're the same approach. You need to assign a class to the select in your template then add the required styling to your style.css.

Also you quoted the same post twice.

[Rumbaar]

@Groundhog Originally I had intended to have this working in the MessageIndex.template.php section as well.  I had it working for 1.1, but for 2.0 and the intermediate nature of the formating in the template files made it a little difficult to implement as I wanted.  So I just went for the BoardIndex.

Yes I think I miss-read what was displaying as 'while' in SgtMic's request.

Also just curious, but wouldn't giving the select an id lead to duplicate id validation errors when you had more than one board with child boards? I would have thought they'd be better called as a class, but I may be wrong about this.

Yes you're probably right with the duplicate ID's, not sure what to do there.  Due to the nature of the javascript and requirement of the fixed name.  In it's previous use it was a single entry dropdown menu.  I'll have to test that a little.

[Antechinus]

Ok. I must admit I know hardly anything about javascript. I'll have to brush up on that a bit.

[Groundhog]

Ok, Rumbaar, thanks for the reply.

but for 2.0 and the intermediate nature of the formating in the template files made it a little difficult to implement as I wanted.

I don't know that much about PHP yet so are you saying that it's impossible? or is it worth me trying to find some way to get it to work? or do you think I would be wasting my time trying?

Thanks again.

[Rumbaar]

No not a waste of time and not impossible, I just got lazy.  Also due to the current RC1 nature of SMF and the changes to all the templates in 2.0 I didn't bother worrying about it yet.  Probably wait for Curves or more consistent layouts for 2.0

[Groundhog]

No not a waste of time and not impossible,

I understand. I for one would appreciate the additional feature if this can be done at some point.

Thanks again for the quick responses. 

Update 22nd March:
I have managed to get it working on my MessageIndex.Template. The code is probably bad but it works.
http://www.hopecentreburundi.com. 

[creepshow77]

Hey there! First off let me just say, beautiful MOD!!
This cleans up my site dramatically [I run a gaming site with sections out the wazoo].

I just have one issue, I've recently switched themes to the custom "XD-Zeda" theme, and can't get this to work. I know you have to change some of the code in the .php but am not exactly sure what to change.

Here is what I have ATM in my "BoardIndex.template.php"...

Code Select Expand


                            // Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)

            if (!empty($board['children']))

            {

               // Sort the links into an array with new boards bold so it can be imploded.

               $children = array();

               /* Each child in each board's children has:

                     id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */

               foreach ($board['children'] as $child)

               {

                     $child['link'] = '<a href="' . $child['href'] . '" title="' . ($child['new'] ? $txt[333] : $txt[334]) . ' (' . $txt[330] . ': ' . $child['topics'] . ', ' . $txt[21] . ': ' . $child['posts'] . ')">' . $child['name'] . '</a>';

                     $children[] = $child['new'] ? '<b>' . $child['link'] . '</b>' : $child['link'];

               }



               echo '<span class="forumlink">

               <span class="smalltext"><b>', $txt['parent_boards'], '</b>: ', implode(', ', $children), '</span>

            </span>';

            }

            // Show some basic information about the number of posts, etc.

            echo '</td>

   <td class="row111" align="center" valign="middle" height="50"><span class="gensmall">', $board['topics'],'</span></td>

   <td class="row111" align="center" valign="middle" height="50"><span class="gensmall">', $board['posts'], '</span></td>

   <td class="row111" valign="middle" height="50" nowrap="nowrap" align="left"> <span class="genmed">';

               

           

            /* The board's and children's 'last_post's have:

            time, timestamp (a number that represents the time.), id (of the post), topic (topic id.),

            link, href, subject, start (where they should go for the first unread post.),

            and member. (which has id, name, link, href, username in it.) */

            if (!empty($board['last_post']['id'])){

            echo $board['last_post']['time'] . '<br />' . $txt['smf88'] . '&nbsp;';

            echo $board['last_post']['link'] . '<br />' . $txt['vb_5'] . '&nbsp;';

            echo $board['last_post']['member']['link'];

            }

               

            echo '</span></td>

  </tr>

  <!-- END forumrow -->';

           

         }

         

      }

     

   }



  echo ' <!-- END catrow -->

        </table>' . $context['XD']['forum_wrap2'];


Not even sure if all of that is needed [new to CSS/PHP but learning fast], but any help would be pure gold to me. Thank you!

[Rumbaar]

There appears to be layout issues with what you've posted, there normally shouldn't be that many spaces between each line.

But you should be able to replace this:

Code Select Expand

                            // Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)

            if (!empty($board['children']))

            {

               // Sort the links into an array with new boards bold so it can be imploded.

               $children = array();

               /* Each child in each board's children has:

                     id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */

               foreach ($board['children'] as $child)

               {

                     $child['link'] = '<a href="' . $child['href'] . '" title="' . ($child['new'] ? $txt[333] : $txt[334]) . ' (' . $txt[330] . ': ' . $child['topics'] . ', ' . $txt[21] . ': ' . $child['posts'] . ')">' . $child['name'] . '</a>';

                     $children[] = $child['new'] ? '<b>' . $child['link'] . '</b>' : $child['link'];

               }



               echo '<span class="forumlink">

               <span class="smalltext"><b>', $txt['parent_boards'], '</b>: ', implode(', ', $children), '</span>

            </span>';

            }
With:

Code Select Expand

// Show the Child Boards as drop-down menu
if (!empty($board['children']))
{
echo '
<tr>
<td colspan="3" class="windowbg', !empty($settings['seperate_sticky_lock']) ? '3' : '', '">
<form action="', $scripturl, '" method="get" accept-charset="', $context['character_set'], '" name="jumptoForm">
<span class="smalltext"><label for="jumpto"><strong>', $txt['parent_boards'], '</strong></label>:</span>
<select name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != \'?\' ? 0 : 1);">
<option value="">' . $txt[251] . '</option>';

// Populate the dropdown with child boards
foreach ($board['children'] as $child)
{
if ($child['new'])
echo '
<option value="?board=', $child['id'], '.0">' , $child['name'] , ' (' , $txt[302] , ')</option>';
else
echo '
<option value="?board=', $child['id'], '.0">' , $child['name'] , '</option>';
}

echo '
</select>&nbsp;
</form>
</td>
</tr>';
}But that uses the class for the default theme for the cell, so you might have to work on that to match your theme.

[Kreator]

Anyway to change the background color?
Other than the white (for me), it's a great mod.

@SgtMic You can edit the class value to match whatever you're using for your current custom template.  The first <td colspan="3" class="windowbg' values should control that.

Not quite. What he'd actually have to do is assign a class to the select for that td so he could style it to suit. Something like:

Code Select Expand

<select class="child_drops" name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != \'?\' ? 0 : 1);">
<option value="">' . $txt['select_destination'] . '</option>';

And in the style.css something like:

Code Select Expand

select .child_drops
{
    background: #000000;
    color: #FFFFFF;
}

Also just curious, but wouldn't giving the select an id lead to duplicate id validation errors when you had more than one board with child boards? I would have thought they'd be better called as a class, but I may be wrong about this.

I'm using the core default theme. Which way would be the better approach?

Can somebody give me  laymans terms, operations for changing the colour of the box from white to green... I`ve tried altering some of the CSS for default (which my forum uses on 1.1.8 ) without success..

many thanks in advance for any help

[SgtMic]

I haven't been able to figure that out either yet. Nor have I really had the time to try.

[Kreator]

nor have I and its annoying for my members as we use green backgrounds with yellow text..... when you have a white background the yellow text is lost/or very hard to read.

[Rumbaar]

You place an inline style for the select option values

Code Select Expand

<option value="" style="background-color: green;color: yellow;">' . $txt[251] . '</option>';

Code Select Expand

echo '
<option value="?board=', $child['id'], '.0" style="background-color: green;color: yellow;">' , $child['name'] , ' (' , $txt[302] , ')</option>';
else
echo '
<option value="?board=', $child['id'], '.0" style="background-color: green;color: yellow;">' , $child['name'] , '</option>';That will change all to green background with yellow text.

But Antechinus's solution should have worked as well.

Defined class in select area, then in style.css

Code Select Expand

select.child_drop
{
font-size: 90%;
font-weight: normal;
color: green;
background-color: yellow;
font-family: verdana, sans-serif;
}

[Kreator]

You place an inline style for the select option values

Forgive me Rumbaar, I am extremely thick but where should this code go.. boardindex.template ?
and wherabouts.

[Rumbaar]

Yes, in the edited code the mod installed into your BoardIndex.template.php file.

The benefit of Antechinus's method is that you can control the style of the box via one area, so you wont have to edit three parts of the template each time.

[Kreator]

well , I tried placing Antechinus's code in the boardIndex.template then the CSS part in and I now have a blank screen on the forum.

So have reverted back to my original boardindex template and CSS

I would very much appreciate it if you could let me know exactly where the parts of the code go
( as like select / add before /add after/ replace with  )

As at the moment it is a bit hit and miss, I am no coder.

[Rumbaar]

The css part goes in your themes style.css, you're putting it in there correct?  You should be able to copy and paste what I posted directly into your.css file.

[Kreator]

Yeah I have the css part in ok copied and pasted ... it is in fact the boardindex.template part that i need in the correct place, surely it does not just go at the bottom or top of the script?

I pasted it here....

Code Select Expand

// Show the Child Boards as drop-down menu
if (!empty($board['children']))
{
echo '
<tr>
<td colspan="3" class="windowbg', !empty($settings['seperate_sticky_lock']) ? '3' : '', '">
<form action="', $scripturl, '" method="get" accept-charset="', $context['character_set'], '" name="jumptoForm">
<span class="smalltext"><label for="jumpto"><strong>', $txt['parent_boards'], '</strong></label>:</span>
<select name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != \'?\' ? 0 : 1);">
<option value="">' . $txt[251] . '</option>';
// My insertion
<select class="child_drops" name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != \'?\' ? 0 : 1);">
<option value="">' . $txt['select_destination'] . '</option>';
//end insertion

[SgtMic]

I've pasted only the .css portion of the code. I installed it the end of the style.css.
Did not work. Does it need to be anywhere specific in that file?

[Kreator]

SgtMic: I think you also need to insert the code for the boardindex.template as well

this bit:               

Code Select Expand

<select class="child_drops" name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != \'?\' ? 0 : 1);">
<option value="">' . $txt['select_destination'] . '</option>';

where it actually goes into the boardindex.template script  is beyond my knowledge!


I noticed that rumbaar used select.child_drop whilst Antechinus uses select.child_drops in the style sheet.

perhaps that may be why it does not work