Redesigning the Top Area of forum

[C4G-TK]

Ok, so I thought I would jump into not being fearful of trying things out on my own.  I've deleted the random news and search area from the top portion of the forum and the very to forum header. 

Now, I'm trying to change where the menu buttons appear.  I want the row to show at the very top of the forum, but the font size is larger and possibly looks like the font itself is different.  Since all I did was move the code in the index.template.php file, I figured it would stay the same.  (You can notice that I haven't deleted the original menu bar, yet from the code.) 

What do I need to do to make it appear the same as the lower menu, but in the new area where I now have it at the top of the forum?  Am I right in thinking that I need to do something in style.css?


pic attached

SMF 2.0 RC1-1
default

[Gary]

Yeah. You'll need to make a few edits to style.css, just search for one of the images and you'll find the classes that you'll need to change.

[C4G-TK]

Is it in the same place as the     menu_active_first.gif and such?   Because I don't see that in the style.css file.   Or, am I completely looking for the wrong part!?  LOL

[Gary]

Okay. It's in index.css for 2.0. Look for the #main_menu classes.

[C4G-TK]

Thank you, Sir!

Can't wait to start moving and shaking on this!

[C4G-TK]

OK, I got the menu bar to where I want it and it looks correct.

My current problem is that my other tabs don't seem to look correct as the pics show below...

Are these errors all coming from the same file or would it be multiple files?  They appear when looking at a profile, in Admin area, in looking at a post, so it isn't just one spot.

[twood]

If you run Firefox there's an add-on called Firebug that is very helpful for finding these errors. It looks at the HTML and the CSS of a web page and shows how the two are linked.

[C4G-TK]

I saw a post where you could make the Newsfader stay at a certain max height, but the code was for SMF1.1.8  I've tried locating the similar code in SMF2.0 RC1-1, but can't find it.  Can anyone help as to what you would change for this version?

I just want to keep the newsfader from changing sizes between fades, so was going to have it a certain height.



This was the thread that had it for 1.1.8:

http://www.simplemachines.org/community/index.php?topic=308953.0

[Antechinus]

Same thing will work for SMF 2. You can use either of max-height or min-height or both. Be aware that Internet Explorer might ignore this, but all other browsers should be fine.

[C4G-TK]

I figured it would work, but I don't see that code in my BoardIndex.template for 2.0.

[Antechinus]

Use your imagination. 

This is the code from 1.1.x:

Code Select Expand

         <td valign="middle" align="center" height="60">';

      // Prepare all the javascript settings.
      echo '
            <div id="smfFadeScroller" style="width: 90%; padding: 2px;"><b>', $context['news_lines'][0], '</b></div>


This is the code from 2.0:

Code Select Expand

<div id="smfNewsFader"', empty($options['collapse_news_fader']) ? '' : ' style="display: none;"', '>
<div id="smfFadeScroller"><span>', $context['news_lines'][0], '</span></div>
</div>

Now, logically, if you are going to change the 1.1.x code to this:

Code Select Expand

         <td valign="middle" align="center" height="80">';

      // Prepare all the javascript settings.
      echo '
            <div id="smfFadeScroller" style="width: 90%; padding: 2px; overflow: hidden; max-height: 60px;"><b>', $context['news_lines'][0], '</b></div>


..what do you think you might possibly do with the 2.0 code?

[C4G-TK]

  LOL!!!!!!!!!!!!!!!!!!!!

I kinda gathered that much from the link that I posted!  But, I figured out my problem of not being able to find the smfFadeScroller code!  The reason that I couldn't find it was because it isn't in my BoardIndex.template.php file...

Why?

Because I forgot that I placed it into my Index.template.php file in order to get the NewsFader to show up on ALL my pages!  D'OH!!!!  LOL!

I did learn one thing though.  MAKE NOTES IN THE ORIGINAL CODE WHEN YOU REMOVE SOMETHING FROM NOW ON!   


BTW, Thanks for trying to help me!

[C4G-TK]

Ok, I obviously didn't make the correct choice in changing my code.

I changed it to the following:

Code Select Expand

<div id="smfNewsFader"', empty($options['collapse_news_fader']) ? '' : ' style="display: none;"', '>
         <div id="smfFadeScroller" style="width: 100%; padding: 2px; overflow: hidden; height: 150px;"><span>', $context['news_lines'][0], '</span></div>
</div>

I wanted a fixed height of 150px.  This code works fine in Firefox, but the scroll is not working at all in IE8.  It just stays with the first news item and doesn't scroll.  What is the reason that the above code would break the scroll from performing?

[Antechinus]

Try overflow: auto;

Either that or try not using IE.

[C4G-TK]

Believe me, I've tried to get people to use Firefox, but unfortunately getting all members to switch isn't going to happen.  Maybe, we could figure out a way to automatically install Firefox on their computer and delete IE as a mod!!!!! 

[C4G-TK]

Nope, that didn't work.  The fader is still stuck on one news item and isn't fading to the next news item in IE.

[Antechinus]

Hang on: exactly what are you saying here? Is is the fader code that is messing up in IE8 or is it the scrolling? The text will only scroll if the amount of text exceeds 150px in height. This has nothing to do with fading from one item to the next.

[C4G-TK]

Let me preface by saying that I went ahead and added the following code to the index.template.php file in order to get the Newsfader to appear on every page of the forum.  (At the time, the code below did not have the addition made today.)

Code Select Expand

// Show the news fader?  (assuming there are things to show...)
if ($settings['show_newsfader'] && !empty($context['fader_news_lines']))
{
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// Create the main header object.
var smfNewsFadeToggle = new smfToggle("smfNewsFadeScroller", ', empty($options['collapse_news_fader']) ? 'false' : 'true', ');
smfNewsFadeToggle.useCookie(', $context['user']['is_guest'] ? 1 : 0, ');
smfNewsFadeToggle.setOptions("collapse_news_fader", "', $context['session_id'], '");
smfNewsFadeToggle.addToggleImage("newsupshrink", "/collapse.gif", "/expand.gif");
smfNewsFadeToggle.addTogglePanel("smfNewsFader");
// ]]></script>
<div class="tborder marginbottom">
<div class="rborder">
  <div class="tl"></div><div class="tr"></div>
<h3 id="newsfader" class="catbg headerpadding">
<a href="#" onclick="smfNewsFadeToggle.toggle(); return false;">
<img id="newsupshrink" src="', $settings['images_url'], '/', empty($options['collapse_news_fader']) ? 'collapse.gif' : 'expand.gif', '" alt="*" title="', $txt['upshrink_description'], '" align="bottom" />
</a>&nbsp;', $txt['news'], '
</h3>
<div id="smfNewsFader"', empty($options['collapse_news_fader']) ? '' : ' style="display: none;"', '>
         <div id="smfFadeScroller" style="width: 100%; padding: 2px; overflow: auto; height: 150px;"><span>', $context['news_lines'][0], '</span></div>
</div>
<div class="bl"></div><div class="br"></div>
</div>
</div>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// The fading delay (in ms.)
var smfFadeDelay = ', empty($settings['newsfader_time']) ? 5000 : $settings['newsfader_time'], ';
// Fade from... what text color? To which background color?
var smfFadeFrom = {"r": 0, "g": 0, "b": 0}, smfFadeTo = {"r": 255, "g": 255, "b": 255};
// Surround each item with... anything special?
var smfFadeBefore = "<b>", smfFadeAfter = "</b>";

var foreColor, foreEl, backEl, backColor;

if (typeof(document.getElementById(\'smfFadeScroller\').currentStyle) != "undefined")
{
foreColor = document.getElementById(\'smfFadeScroller\').currentStyle.color.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};

backEl = document.getElementById(\'smfFadeScroller\');
while (backEl.currentStyle.backgroundColor == "transparent" && typeof(backEl.parentNode) != "undefined")
backEl = backEl.parentNode;

backColor = backEl.currentStyle.backgroundColor.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeTo = {"r": eval("0x" + backColor[1]), "g": eval("0x" + backColor[2]), "b": eval("0x" + backColor[3])};
}
else if (typeof(window.opera) == "undefined" && typeof(document.defaultView) != "undefined")
{

foreEl = document.getElementById(\'smfFadeScroller\');

while (document.defaultView.getComputedStyle(foreEl, null).getPropertyCSSValue("color") == null && typeof(foreEl.parentNode) != "undefined" && typeof(foreEl.parentNode.tagName) != "undefined")
foreEl = foreEl.parentNode;

foreColor = document.defaultView.getComputedStyle(foreEl, null).getPropertyValue("color").match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};

backEl = document.getElementById(\'smfFadeScroller\');

while (document.defaultView.getComputedStyle(backEl, null).getPropertyCSSValue("background-color") == null && typeof(backEl.parentNode) != "undefined" && typeof(backEl.parentNode.tagName) != "undefined")
backEl = backEl.parentNode;

backColor = document.defaultView.getComputedStyle(backEl, null).getPropertyValue("background-color");//.match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeTo = {"r": parseInt(backColor[1]), "g": parseInt(backColor[2]), "b": parseInt(backColor[3])};
}

// List all the lines of the news for display.
var smfFadeContent = new Array(
"', implode('",
"', $context['fader_news_lines']), '"
);
// ]]></script>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/scripts/fader.js"></script>';
}
}

The fader would change from one news item to the next news item in both IE and Firefox.  But, the box itself would increase or decrease which I didn't want to happen. 

I wanted the height to be at a fixed height which I chose above to be 150px which I thought would be the addition of this specific code which is in the above portion:

Code Select Expand

  <div id="smfNewsFader"', empty($options['collapse_news_fader']) ? '' : ' style="display: none;"', '>
         <div id="smfFadeScroller" style="width: 100%; padding: 2px; overflow: hidden; height: 150px;"><span>', $context['news_lines'][0], '</span></div>
      </div>

This DOES make the box stay at a fixed height in Firefox and allows the Newsfader to still go from one news item to the next, but it does not work in IE.  In IE, it just stays on one news item and doesn't fade to the next item.

I'm talking about the Newsfader box and not the box which shows one news item.  (That particular box I deleted since I have the Fader appear on all pages.)

[Antechinus]

Ok. The code looks fine so I can't see why the addition of the styling would stop things in IE. What you could try, as an option that doesn't make real sense but wont do any harm, is removing the styling from the template and putting it in the stylesheet.

Css/forum.css comes with this code in standard form:

Code Select Expand

#smfFadeScroller
{
padding: 2em;
font-size: 1em;
text-align: center;
}

You could try:

Code Select Expand

#smfFadeScroller
{
font-size: 1em;
text-align: center;
        padding: 2px;
        overflow: hidden;
        height: 150px;
}

with the template code reverting to:

Code Select Expand

<div id="smfFadeScroller"><span>', $context['news_lines'][0], '</span></div>

[C4G-TK]

OK, I'm wondering if this is an IE8 error or something else?  This is what I get from the bottom of the page on IE8 when I click on the exclamation point that refers to errors on page.  I've not made any changes to the script at all, so maybe you'll understand this better than me.

Webpage error details

Message: 'smfFadeContent.length' is null or not an object
Line: 25
Char: 2
Code: 0
URI: http://www.channel4gaming.com/c4g/Themes/default/scripts/fader.js


Line 25 is if (smfFadeContent.length <= 1) in the code below.

Code Select Expand

// Divide by 20 because we are doing it 20 times per one ms.
smfFadeDelay /= 20;

// Start the fader!
window.setTimeout('smfFader();', 20);

// Main fading function... called 50 times every second.
function smfFader()
{
if (smfFadeContent.length <= 1)
return;

// A fix for Internet Explorer 4: wait until the document is loaded so we can use setInnerHTML().
if (typeof(window.document.readyState) != "undefined" && window.document.readyState != "complete")
{
window.setTimeout('smfFader();', 20);
return;
}