Topic: Re: Simple catbg/titlebg fix?

[Chen Zhen]

If one knows how to create a custom title (class or style) why wouldn't they add it to their CSS instead of the custom title field?

Another option is also to directly edit the html in: Themes/default/Portal.template.php


Those style & class inputs give you further control over the appearance of a specific block.
In this case it was just to quickly test the effects of some style attributes intended to curve your title corners.
If you opt to add/edit your own custom class style attributes in your css that is fine.

[Fog]

Another option is also to directly edit the html in: Themes/default/Portal.template.php


Those style & class inputs give you further control over the appearance of a specific block.
In this case it was just to quickly test the effects of some style attributes intended to curve your title corners.
If you opt to add/edit your own custom class style attributes in your css that is fine.

That makes sense..

For the forum owners that aren't as trick as we are, is there a way to give them examples that will help them out?

[AngelinaBelle]

Fog -- did that solve your problem, for the block you applied it to?

We can follow this up with some changes to your portal.css.
Anyone can find out which changes need to be made, simply by looking at your website.
Please provide a link to your forum, and I'll show you what I mean.

[Fog]

AngelinaBelle, No it hasn't been solved yet.

www.ngsforums.com

I'm going to the Seahawks Game  and will be working on it when I get home.

Thanks

[Chen Zhen]

AngelinaBelle, No it hasn't been solved yet.

www.ngsforums.com

I'm going to the Seahawks Game  and will be working on it when I get home.

Thanks

Ok I see the issue here..

You made your own graphic bg for the portal title bars, yes?

I did this custom to what I saw on your forum so this will work with your theme's file: Themes/NGS2012/images/theme/main_block3.png ... make sure your existing file is in place. If you change that png file again, this file will have to be edited.

Use the attachment to replace: Themes/default/Portal.template.php


This being more or less what caused the issue:

Code: [Select]

<span class="left"></span>


[Fog]

OK...I've Solved this whole issue at least on my themes.

Go to Sub_Portal php and find the header fuction.

Then find this

Code: [Select]

$context['html_headers'] .= '
// ]]></script>
<style type="text/css">
h4.catbg span.left, h4.catbg2 span.left, h3.catbg span.left, h3.catbg2 span.left, .table_list tbody.header td span.left
{
background: url(' . $settings['images_url'] . '/theme/main_block1.png) no-repeat 0 -160px;
}
h4.titlebg span.left, h3.titlebg span.left
{
background: url(' . $settings['images_url'] . '/theme/main_block.png) no-repeat 0 -200px;
}
</style>';

$initialized = true;

You can change up the IMAGE URL.

BEWARE since this is a PHP code if not done right your site will get an fatal error.

My question is why is a left span code on the PHP and in the CSS?

The PHP seems to over ride any CSS

I knew there was a main_block png some where in the PHP... 

[Chen Zhen]

If you follow the instruction from my previous post without any other edits, your custom title should work fine without having to edit the other file you are mentioning.

I set it up to detected that theme you are using and only display that title for it.
Other theme's will use the default.


.. is this not what you were after?

\\Edit ->  Until a bug fix is applied to this forum regarding Firefox downloading, you may need to use another browser type to download attached files.

 

[Fog]

Thanks Underdog,  I didn't see your post until this morning Sorry.  It looks great.

[pgordemer]

In my case, since the index.css file for my theme works correctly, I just commented the lines out sub_portal.php - and I am all fixed.

[Fog]

Underdog as I look at the file...I like the idea it's for that theme only but, won't it mess up my other themes if it's in the default theme?

I have a Sports Message Board and I try to create custom team themes for key members.

Wouldn't I want to add this file to each theme?

[Chen Zhen]

Underdog as I look at the file...I like the idea it's for that theme only but, won't it mess up my other themes if it's in the default theme?

I have a Sports Message Board and I try to create custom team themes for key members.

Wouldn't I want to add this file to each theme?

I had a brain fart & forgot SMF looks in the custom theme else default.

So you can just put that file into your NGS2012 custom theme folder & then clear your browser cache to see the edited display.

[Chen Zhen]

Underdog as I look at the file...I like the idea it's for that theme only but, won't it mess up my other themes if it's in the default theme?

I have a Sports Message Board and I try to create custom team themes for key members.

Wouldn't I want to add this file to each theme?

You use that very same title bg file for those other theme's?
I actually put logic in it to only work with that NGS2012 theme.

Here is another file attached.. as long as you include it in all theme's & also your main_block3.png it will work.

Due to your custom main_block3.png for this to work with all theme's if you change the color scheme for that file, do not change the positioning of your color bar within the file.
Unless you intend to edit the attached file for each theme's title bar bg graphic positioning.

[Fog]

This solves my issue, but I think we can take this a bit further.

It seems to me that the Portal Templates is setup on what is loaded up within that Template.

As I look at the Sub_Portal PHP there is a default left span main_block png -120px and no matter what you do in the CSS the PHP code over rides any CSS.

We're close to sloving this...

Can you modify the Sub_Portal PHP file so it doesn't include the code I posted last night?

I think we can use CSS to replace most of that fuction.

[Fog]

I'm going to have to dust off my test site...LOL

[Fog]

You use that very same title bg file for those other theme's?

Nope...

Each theme would have a different main_block png and some don't have a main_block at all.

The only people that are having issues with SP are ones that don't use a main_block png that isn't 2300X864.

The Sub_Portal PHP is the problem, I believe.

Gotta get rid of the code I posted or at least change it so you use CSS instead.

[Chen Zhen]

I'm going to have to dust off my test site...LOL

If you alter the css for those common classes, it will appear that way for your whole forum & not just portal blocks.
Unless you create custom classes but then you have to edit the default portal template title class setting (catbg by default).

You see SP uses the span class left attribute to put the left graphic in the title whereas your theme does not.
So if you try to edit the css of the theme directly, unless it uses the span class left setup within the header, it will show all your other titles for the catbg class without a left edge.

That code you posted from the Subs-Portal.php file overrides your theme css attributes for the headers that are shown there (catbg, catbg2, titlebg, titlebg2 .. span left).
I actually edited the template & forced style attributes to use your custom title bg file.

[Fog]

I see exactly what you did...very cool

How do we help SP create a package so the end user doesn't have to modify any PHP file?

[Chen Zhen]

Here is another file attached that works a bit better.

The attached file replaces: Themes/default/Portal.template.php

With this file there is no need to add it to other templates.

If the template has the file: .../images/theme/main_block3.png it will use it for the portal titles.
If it does not, it will use the default setup.

It will use a single title bar in the png file ... minimum width not sure about (1800+ px works fine).
This way, for custom theme's you just quickly create your main_block3.png file & put it in the proper image directory.

The left side is not perfect.. I have a slight edit to make it appear even better but if I did that it would not look ok in IE8 (or older IE).
 

I also attached an example title bg file.. this one is orange intended for a theme that has a white background.
(Dimensions: 1800 x 32)

[Fog]

Here are the steps I took on the default theme to fix the catbg/titlebg left hand problem for those who want to create their own themes without using a main_block png

Sources/Subs-Portal PHP

found this part of the code and removed it:

Code: [Select]

h4.catbg span.left, h4.catbg2 span.left, h3.catbg span.left, h3.catbg2 span.left, .table_list tbody.header td span.left
{background: url(' . $settings['images_url'] . '/theme/main_block.png) no-repeat 0 -160px;}
h4.titlebg span.left, h3.titlebg span.left
{background: url(' . $settings['images_url'] . '/theme/main_block.png) no-repeat 0 -200px;}
Then I went to the Default Portal CSS and found this code:

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;
        display: block;
        width: 10px;
        height: 31px;
}

h4.titlebg span.left, h3.titlebg span.left
{
float: left;
display: block;
width: 9px;
height: 31px;
}
Then I changed it to:

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;
        display: block;
        width: 10px;
        height: 31px;
        background: #99abbf 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: #99abbf url(../images/theme/main_block.png) no-repeat 0 -200px;
}
What this does is allows me to make future themes and have all the catbg and titlebg controls on the CSS.

One could take and move the above code to the default CSS without any issuses, that way you'd have all the controls on one CSS.

I want to give many thanks to Underdog with helping me with my theme.  It helped me understand how the PHP codes work together.  AngelinaBelle, I thank you big time for pointing me towards the Subs-Portal PHP that was really the turning point in sovling this issue.

I also want to thank ARG for pointing out the CSS Portal Code and adding the url image in the code.

I know there are others out there that gave me insight as well.

A big thanks goes to everyone who put Simple Portal together Awesome stuff.

Thanks

Fog

[AngelinaBelle]

I think your solution will continue to work great for up-to-date themes.

Some future version of Simple Portal will also drop the attempt to maintain compatability with both old and new themes.