Topic: Title bar problem with some themes

[genimac]

We have moved our forum to a SMF 2.0R C4 with SimplePortal 2.3.3.
Now I want to try some themes and have problems in the title bars. The extrange thing is that the problem appears with some themes not with all of them.
I show you what happens with Analysys from Crisp as I think it's the better one to see the problem.
The first attachment is what the forum shows with the theme just instaled.
After searching for similar problems I copied the portal.css to the theme css folder and get the second attachment.
So, it seems the problem is with left background image.
What do I need to change to get it show properly?
Thanks.

[AngelinaBelle]

Please copy portal.css from the default theme into the css folder of each problem theme, and see if that fixes it.
If not, there are some small changes you can make to catbg to make this work, in most cases.
 
 

[genimac]

I have the portal.css and portal_rtl.css on the theme css folder. Same problem as on pass2.
The code generated to the browser is:

<td id="sp_center">
   <h3 class="catbg"><span class="left"></span>
      <a class="sp_float_right" style="padding-top: 7px;" href="javascript:void(0);" onclick="sp_collapseBlock('7')"><img id="sp_collapse_7" src="http : //my.domain/smf/Themes/analysis205/images/collapse.gif" alt="*" /></a>
      Novedades
   </h3>
   <div id="sp_block_7">
      <div class="windowbg">

         <span class="topslice"><span></span></span>
         <div class="sp_block">
                        <h2 style="text-align: center;">Portal de pruebasl!</h2>
         </div>
         <span class="botslice"><span></span></span>
      </div>
   </div>
   <br />

"http : //my.domain" is typed withou the spaces.

I tried to modify portal.css (on the theme css folder) to this so I can change the background image:

/* ************************************* */
/* Compatibility styles                  */
/* ************************************* */
h4.catbg span.left, h4.catbg2 span.left, h3.catbg2 span.left, .table_list tbody.header td span.left
{
   float: left;
   display: block;
   width: 9px;
   height: 31px;
   background: url(../images/theme/main_block.png) no-repeat 0 -160px;
}

/* added for left problem */
h3.catbg span.left
{
   float: left;
   display: block;
   width: 9px;
   height: 31px;
   background: url(../images/theme/main_block.png) no-repeat 0 -160px;
}

h4.titlebg span.left, h3.titlebg span.left
{
   float: left;
   display: block;
   width: 9px;
   height: 31px;
   background: url(../images/theme/main_block.png) no-repeat 0 -200px;
}

and get as the new attachment. I can't found where to change the leftmost image on the title bar.

Can you tell me what can I try with the catbg? in wich .css file?
Thanks again.

[AngelinaBelle]

If you give me a link, I'll show you how to narrow this down a bit.

[genimac]

This is the address of the test forum, http://38.100.22.35/smf/. You can see some themes added, the ones with the wrong left part are, Analysis, Skm light and Skm Night.
Analysis is the default theme and the one of the attached images. I'm shure the problem is the same for all of them.

Thanks.

[AST3R1X]

In portal.css
Find  (around line 576)

Code: [Select]

h4.titlebg span.left, h3.titlebg span.left
{
float: left;
display: block;
width: 9px;
height: 31px;
background: url(../images/theme/main_block.png) no-repeat 0 -200px;
}

Replace with

Code: [Select]

h4.titlebg span.left, h3.titlebg span.left
{
float: left;
display: block;
height: 31px;
background: url(../images/theme/main_block.png) no-repeat 0 -200px;
}


[genimac]

Thanks, but don't worked. It keeps at the pass2 attatchment.
First a rectangle and then the left curve. Also, if I comment out all the "Compatibility styles", at the final part of portal.css, I have the tittle bar without the left side curve.

[AngelinaBelle]

Your theme is not very compatable with SimplePortal.
 
This means you are going to have to make some changes in portal.css for improved compatability. This is pretty fiddly work.
 
I recommend using firebug for firefox, or IE developers tools (which come with IE7 and IE8).  This will help you figure out which part of the CSS is causing you the problem, and will even let you "check" and "uncheck" parts of CSS, or change inline styles on the fly.
 
Once you figure out what you need to do, you make the changes in portal.css.
 
 
One other possibility is not to fool with the CSS, but to change the blocks template.
Something like the advice I gave in http://simpleportal.net/index.php?topic=7540.msg42650#msg42650
 
Please - try this on a test forum first!

[genimac]

...
 
One other possibility is not to fool with the CSS, but to change the blocks template.
Something like the advice I gave in http://simpleportal.net/index.php?topic=7540.msg42650#msg42650
 
Please - try this on a test forum first!

That link helped to get the problem near fixed.
I don't have the "<div class="cat_bar">" so I added it. My portal.template.php on the default theme now looks like this:

Code: [Select]

function template_block_curve($block)
{
global $settings;

if (empty($block['style']['no_title']))
{
echo '
       <div class="cat_bar">
       <h3 class="', $block['style']['title']['class'], '"', !empty($block['style']['title']['style']) ? ' style="' . $block['style']['title']['style'] . '"' : '', '><span class="left"></span>';

if (empty($block['force_view']))
echo '
<a class="sp_float_right" style="padding-top: 7px;" href="javascript:void(0);" onclick="sp_collapseBlock(\'', $block['id'], '\')"><img id="sp_collapse_', $block['id'], '" src="', $settings['images_url'], $block['collapsed'] ? '/expand.gif' : '/collapse.gif', '" alt="*" /></a>';

echo '
', parse_bbc($block['label']), '
</h3>
    </div>';
}
   ... more code

This puts the left title bar with the curve look but I need to also comment out the "Compatibility styles" on the portal.css file on the problematic themes:

Code: [Select]

/* ************************************* */
/* Compatibility styles                  */
/* ************************************* */
/*
h4.catbg span.left, h4.catbg2 span.left, h3.catbg span.left, h3.catbg2 span.left, .table_list tbody.header td span.left
{
   float: left;
   // left: -30px
   display: block;
   width: 9px;
   height: 31px;
   background: url(../images/theme/main_block.png) no-repeat 0px -160px;
}

h4.titlebg span.left, h3.titlebg span.left
{
   float: left;
   display: block;
   width: 9px;
   height: 31px;
   background: url(../images/theme/main_block.png) no-repeat 0 -200px;
} */
After that I get the part4.jpg attatchment.
The "normal?" blocks render OK but the "news?" ones still are rectangular on the left. In the "Board news" block there is no "Style options" on that block.
Any way to put the "catbg" on the "board news"? that will solve the problem completly.

Thanks again AngelinaBelle.

[AngelinaBelle]

Board News is different from the other blocks.  It does not use that template. It has its template right in PortalBlocks.php. You can make the same change there (function spboardNews).


You'll see that the sp_articles block is a similar case.

[genimac]

Ok. I edited PortalBlocks.php ---> function sp_boardNews from:

Code: [Select]

echo '
               
<h3 class="catbg"><span class="left"></span>
<span class="sp_float_left sp_article_icon">', $news['icon'], '</span><a href="', $news['href'], '" >', $news['subject'], '</a>
</h3>
             
<div class="windowbg">
<span class="topslice"><span></span></span>
<div class="sp_content_padding">';to:

Code: [Select]

echo '
               <div class="cat_bar">
<h3 class="catbg"><span class="left"></span>
<span class="sp_float_left sp_article_icon">', $news['icon'], '</span><a href="', $news['href'], '" >', $news['subject'], '</a>
</h3>
              </div>
<div class="windowbg">
<span class="topslice"><span></span></span>
<div class="sp_content_padding">';
And get the problem solved for the themes I want, see pass5.
To avoid conflicts with other themes I need to copy the modified "PortalBlocks.php" to the root folder of the conflicting themes.
But i haven`t found a way to modifie PortalTemplate.php so that "all" theme curves work. They show like pass6 now.
It seems I can`t move PortalTemplate.php to a theme folder.
Are there a way to do it? or can I "define" the sp_boardNews function locally on the theme?

Thanks a lot.

Edited: sorry mixed PortalBlocks and PortalTemplate. Fixed.

[AngelinaBelle]

PortalBlocks.php is run, just the same, for every theme.


I would have thought that PortalTemplate.php could be copied to every theme.
I have not checked to see if it is respected, though.

[genimac]

Sorry EvangelinaBelle, i mixed the names of the two files. I edited my last post.

The one I moved to the bad themes folders is PortalBlocks.php
The changes in PortalTemplate.php are the ones that I think translatting to a theme folder file, as I do with PortalBlocks.php, will end the problem.
By now the PortalTemplate.php is in the sources folder, is OK to make a copy on the bad themes folders? That way I keep the original files for the "normal" themes and move portal.css, PortalBlocks.php and PortalTemplate.php to the themes that have problems and edit the copy.
Maybe I can define the function sp_boardNews on PortalBlocks? so it is not used from the sources folder.

[AngelinaBelle]

Does the modified Portal.template.php mess up the default theme? At first glance, I would have thought it would be OK, if you are rewriting the template to do the same as CURVE RC5 does.


If you have just one copy of this file, in Themes/default, then every theme will use it.


If this does not work for you, then you have a slight problem. You can have only one PortalBlocks.php, and it must be in Sources.
If you look in this file, you will see it does things one way for CURVE and another way for CORE themes. It has a very simple way to detect which themes are which.


If you need YET ANOTHER way for some themes, you have to give it a way to detect something about the theme it can use to decide when to use the THIRD way of doing things.


If that's the case, it is just a little more complicated...

[genimac]

No, it seems that PortalBlocks.php is.
If I leave the PortalBlocks.php as is, then I have rectangular left tittles on the board news on some curve themes. Always after editing and placing the PortalTemplate.php on the theme. Other curve themes look OK.
If I modify PortalBlocks then the previous bad ones look OK, and the ones who looked OK now have the rectangular left tittle bar on the board news.
That's why I asked if I could move the "sp_boardNews" function to another file, something like I have done wit the PortalTemplate.php

Here is the code of sp_boardNews in the current PortalTemplate.php:

Code: [Select]

else
{
foreach ($return as $news)
{
echo '
               <div class="cat_bar">      // added for left side problem
<h3 class="catbg"><span class="left"></span>
<span class="sp_float_left sp_article_icon">', $news['icon'], '</span><a href="', $news['href'], '" >', $news['subject'], '</a>
</h3>
              </div>      // added for left side problem
<div class="windowbg">
<span class="topslice"><span></span></span>
<div class="sp_content_padding">';
So, without <div class="cat_bar"> some themes have the left tittle bar rectangular, and viceversa.
And it's only a curve theme problem, all the cores ones I tried are unaffected. I Have no idea if I can do another "if" to separate the "good" curve themes from the "bad" ones.
Any idea to go beyond this point?
Thanks for your help.

Edit: EvangelinaBelle, sorry again. I have mixed the name of the files. I reedited the post. If you enter again at the forum address http://38.100.22.35/smf/ yo will see that the Analysis theme looks OK, but if you change it to the SMF Default one the newsBoard titles have the left side problem.

[AngelinaBelle]

I think that, if you get rid of the "span left" bit in the curve part of the theme, and make the sp_boardnews template compatible with CURVE RC5, then your blocks will look good with all CURVE RC5-based themes.


Of course, this could cause some problems for CURVE-style themes which have not been updated to RC5.


You may be able to accomplish some more with some fiddling around in the CSS for some of your problematic themes.


At some point, all CURVE themes should be updated for compatability with RC5.

[genimac]

Thanks AngelinaBelle, I will try that.

Anyway I have been able to get the three themes we like for the forum to look well so I think the thread could be closed.
As SMF seems near to be released sure themes will be more compatible.

[AngelinaBelle]

I'm glad you have found a workaround.
I think you are correct -- after SMF 2.0 final is released, more themes will be "RC5" compatible, and, eventually, SimplePortal will eventually also have its block templates made to match CURVE SMF 2.0 final.