Topic: Re: Simple catbg/titlebg fix?

[Fog]

I went to look for a PHP file that ABelle suggested and I couldn't find it on my C-Panel.

I went and extracted the zip file and found the PHP file under the smf1 folder.

So I looked for the smf1 folder in my C-Panel.

I can't find it...

Is it possible that not all the files are getting uploaded?

[AngelinaBelle]

I hope you won't mind I've split your topic out of the others.
Your problem is related to the catbg/cat_bar issue, but your theme is extra special.

You've got at least 4 main_block files, I think.  Which one do you want to use?

main_block will make purple block headers.
In your index.css, you use 80800.png for h3.catbg and for div.cat_bar

But you've also got main_block3 for h3.catbg in your index.css
And in index.css, you've also got, for h3.catbg span.left, main_block4.png

To make this work, you are going to have to
1) copy portal.css into your custom theme's css directory
2) pick which bar you want to use (block4, 808080, block3, or main_block)
3) define the h3.catbg and h3.catbg span.left to be consistant for this.

First step -- copy portal.css into your custom theme's css directory. This will not fix the problem.

[Fog]

No problem AngelinaBelle

I'm glad you took a peek at my site.  I like the idea of the main_block using a 2300X864 png but can't modify it enough to come up with the type of headers I'd like to use. So I make my own stuff but can't put it into a 2300X864 png.  this keeps me from using the -160px etc. that the curve theme uses.  This is where I'm wondering if everything is getting downloaded in the package.  I went to look for that Sub_Portal PHP like you suggested and I couldn't find it under the default theme or under sources in my C-Panel.  Should I have a SMF1 and SMF2 folder with that PHP file like I do when I extract the zip file into my documents?

I'm going to manually install them tonight and see if that helps.

Thanks for you input.

Fog

[ARG]

So I make my own stuff but can't put it into a 2300X864 png.  this keeps me from using the -160px etc. that the curve theme uses.  This is where I'm wondering if everything is

What issues are you having that you cannot "put it into a 2300X864 png"? Is it a graphic issue or css issue?


 

[Fog]

What issues are you having that you cannot "put it into a 2300X864 png"? Is it a graphic issue or css issue?


 

It's a graphics issue.  I don't have any software to create my own 2300X864 PNG unless I take the orginial main_block and use something like Picnik to modify it.  I'm not a graphics person what so ever but have learned a few tricks on making gradient bars and puting curved corners on them then naming them like main_block2 etc. and modifing the CSS.  This also means I don't use the -160 and so on in my CSS.  But for the life of me I can't get the portal blocks to have a curve on the left hand side as we all know.

Some where there has to be a main_block png file in the PHP or (catbg) because I changed all the CSS to different minus values (meaning I changed -160px to -260px) and I still have the left hand problem and it's still at -160px.

I'm going to manually install a couple of PHP files I don't see on my C-Panel to see if I can find anything.

[Chen Zhen]

Just for a test I would like you to put the following style attribute into Custom Title Style in the style options for a block:

Code: [Select]

border-radius: 6px 6px 6px 6px;

... & then tell me how the block title displays.

[Fog]

OK...BRB

[Fog]

It didn't do anything.  I have one theme I can try that on and see if it works.  I made a theme without the curves a while back that I can test it on if you want me to.  I see what you're after.

[Fog]

Am I suppose to see a SMF2 Folder in my C-Panel?

If so where should I be looking for it?

[Chen Zhen]

Am I suppose to see a SMF2 Folder in my C-Panel?

If so where should I be looking for it?

What I mean is using SP 2.3.4 default css (without you editing it) navigate in your SMF forum to edit a block.
Let's say User Info for example.. and while editing that block in the Admin in the bottom left enter the above code for the custom title style attribute.

Here is a screenshot of the effect although I do not have your theme to test:



or with this setting:

Code: [Select]

border-radius: 10px 10px 15px 15px;

 

[Fog]

You've got at least 4 main_block files, I think.  Which one do you want to use?

main_block will make purple block headers.
In your index.css, you use 80800.png for h3.catbg and for div.cat_bar

But you've also got main_block3 for h3.catbg in your index.css
And in index.css, you've also got, for h3.catbg span.left, main_block4.png

To make this work, you are going to have to
1) copy portal.css into your custom theme's css directory
2) pick which bar you want to use (block4, 808080, block3, or main_block)
3) define the h3.catbg and h3.catbg span.left to be consistant for this.

First step -- copy portal.css into your custom theme's css directory. This will not fix the problem.

Can I send you a copy of my CSS for the theme you see on my forum page?

I have no main_block png file in my CSS but yet on the blocks it shows my main_block png file

That Theme is over an year old and when I was using Simple Portal back then I still had the left hand side problem with the portal blocks and still do today.  I went to a stand alone portal at that point and when you guys updated within the past two weeks I wanted to see if the problem was gone and it isn't.

I enjoy SimplePortal more than the others because you guys make it simple.  Ill do what ever it takes to help.

[Fog]

Underdog...OK

Hang on...

[Fog]

Underdog...that didn't work, for me, in the custom title part of editing a block.

I would have thought if I had a custom title in my CSS named titlebg69 or catbg69. I would put in title69 or catbg69 into that field and click on save.

I'm not sure how that custom title field works when editing a block.

[Chen Zhen]

Underdog...that didn't work, for me, in the custom title part of editing a block.

I would have thought if I had a custom title in my CSS named titlebg69 or catbg69. I would put in title69 or catbg69 into that field and click on save.

I'm not sure how that custom title field works when editing a block.

The style attributes that I just gave you would be entered into the custom title style field.
Your custom css are called by entering it in the custom title class field.

[ARG]

Just for a test I would like you to put the following style attribute into Custom Title Style in the style options for a block:

Code: [Select]

border-radius: 6px 6px 6px 6px;

... & then tell me how the block title displays.

Just a heads up but something like this would be better as it is supported in most modern browsers. The code you posted may not function properly in older versions of IE.

Code: [Select]

-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
 

[Chen Zhen]

@Fog
Just to clarify the area to enter your attributes:

[Fog]

As I go through these cycles of updating my site and re-understanding CSS

I was wondering where to look for "class" and "style" just a few days ago.

I need to play around with that a bit more on how I can add to the class side of my CSS.

Question...

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?

[Chen Zhen]

Just for a test I would like you to put the following style attribute into Custom Title Style in the style options for a block:

Code: [Select]

border-radius: 6px 6px 6px 6px;

... & then tell me how the block title displays.

Just a heads up but something like this would be better as it is supported in most modern browsers. The code you posted may not function properly in older versions of IE.

Code: [Select]

-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
 

ref. http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Only introduced in IE9??

[Fog]

@Fog
Just to clarify the area to enter your attributes:

I'll try it Underdog...I see what you getting at

[ARG]

Just for a test I would like you to put the following style attribute into Custom Title Style in the style options for a block:

Code: [Select]

border-radius: 6px 6px 6px 6px;

... & then tell me how the block title displays.

Just a heads up but something like this would be better as it is supported in most modern browsers. The code you posted may not function properly in older versions of IE.

Code: [Select]

-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
 

ref. http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Only introduced in IE9??

That is why I stated:

The code you posted may not function properly in older versions of IE.

 

[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.

[Fog]

Right now 2.3.4 works well with a default main_block png.

For those that want to create their own theme, I had to dig deep.

AngelinaBelle told me about the subs-portal...

This was key...

I modify our default theme with these changes and haven't seen any problems.

I just hope this is a solution...

It worked on the site I help on....

Thanks..

Fog

[AngelinaBelle]

Thanks for that report, Fog.

I've marked this one solved for you.