Default theme colours

[Talisman]

Cool...first post in 'themes' 

I'm finding the colour choices in the administration panel menus pretty hard to see - black text on dark blue background.

I think this needs to be better contrasting...

[Luke]

Hmmm....  Any place specific? I don't recall any black text on the blue. Maybe I've been looking at 1.1 too long already.

[CrazyC]

That's an issue with the original SMF Admin.template.php file and IE.  It doesn't cause a problem until you start playing with the css bg colors.  IE inherits something incorrectly and the bg color has to be specifically set for the table cell.  We'll get a fix up shortly, but in the meantime....

open Admin.template.php in an editor  and go to lines 23 & 24 which will look like this:

Code:

<tr class="windowbg2">
<td class="smalltext" style="line-height: 1.3; padding-bottom: 3ex;">';

change them to this:

Code:

<tr>
<td class="smalltext" style="line-height: 1.3; padding-bottom: 3ex; background-color: #F0F0F0;">';

Or you can create a custom style that uses smalltext and windowbg2 together and change the class for that line. 

[Talisman]

Thanks, I'll check that out when I get home.

Damn SMF 1.0.10 for not having the theme editting tools in the administrations panel 

[Volnhar]

Where would this be in the Profile.template.ph p for the Profile page or is this the wrong file?

As I have the same issue with the black text on dark blue back ground.

Thanks.

[Luke]

It was corrected in the 1.1(Beta), and will make it into the 1.0 final.

To make it easy, here's the updated style sheet, and profile template.



// Edit

css file removed. re-added in post below.

[Volnhar]

Thanks for that Luke, but I am running the 1.1 beta now, not sure why it's still an issue for me.

I was sure that I removed all files as per the instructions.

I did manually update the Admin.template.php with no issues.

[Luke]

Hmmmm, that's interesting. Unless it might be a possible cache issue or something.

I did just check my 1.1 install, and it should be a problem in Admin, Profile, or anywhere.


You're positive you completely deleted the default Sphinx theme, and replaced it?

[Talisman]

I have a similar problem, which I can only attribute to the machines in question.  We sorted out the black text on dark blue background issue a while back, and the pages look fine when I'm browsing from home.

On my work computer, however, the blocks are still black on darkblue even after clearing my cache and cookies (IE).  No idea what's happening...but hopefully I'll figure it out!

[CrazyC]

I have a similar problem, which I can only attribute to the machines in question.  We sorted out the black text on dark blue background issue a while back, and the pages look fine when I'm browsing from home.

On my work computer, however, the blocks are still black on darkblue even after clearing my cache and cookies (IE).  No idea what's happening...but hopefully I'll figure it out!

I'll be willing to bet that these problems are all similar to the initial one in this thread.  SMF had/has some styles in a tr which don't seem to work right in certain versions of IE or when mixed with other styles for the parent or child elements of the html.

Check the HTML for the areas of the pages you're having problems with and see if there's a class="..." in a tr tag.  The easiest way to see it is viewing the source code on the exact page causing the problems.  I don't have time to go digging tonight for it, but can take a gander around sometime over the weekend if need be.

[Luke]

It seems to be an issue of nesting the "smalltext" (or similar) class inside/for a (stupid) td element, which is inside of a (stupid) tr element with a class like "catbg2" or something similar.

What it ends up doing is (somehow) it interprets the bg color set by border color. It's yet another "fine" example of IE.


If you could document the pages and things this is happening on, I'd appreciate it. I thought I'd got most of that out, and used and alternative class in those instances. Guess not all of them though.

[Volnhar]

Hi Luke,

There's a bug in the new styles.css that you've attached to your post, when I use it I get the following happening to all of my blocks and headers. (See attached picture)


There's also a bug in this site in that I can't use the quick quote option in the forum.

I get another pop up window with the following error in it.

Code:

An Error Has Occurred!
Unable to load the 'quotefast' template. 

I've tested the quick quote on my site and it works fine.

[Luke]

Just to double check, this was 1.1, and you did ensure the right file was written to the right place, etc?

Reason why I'm asking is that the fonts look bigger in the block title than the original, and the background is repeated when it's set to no-repeat, etc.

Maybe a cache issue or something?

[Talisman]

Just to double check, this was 1.1

Both of mine are 1.1.  In the clean installation at vvwc.dragonprime.ne t using the latest 1.1Beta download, the admin menus are black on dark blue while using IE6.0, as is the one at dragonprime.net. 

The dragonprime.net menus are fine from my home machine using Firefox; I'll have to check with IE this afternoon.

[Luke]

IE sux.

[Talisman]

IE sux.

Heh...yup...

Unfortunately I'm a prisoner of the Mickey$oft crap my employer forces me to use at my workstation.  At home it's a different matter 

[Volnhar]

I've decided to just wipe my install and start from scratch as this isn't a site I use much.

I'm running Vista64 and IE 7, I know IE is a pain but unfortunately most people use it.

I'll let you know how I go with a clean install.

I must admit I cheated when doing the SMF upgrade, I used their webinstall to do it, seemed to work fine.

[Volnhar]

I've done a clean install now of both SMF and Sphinx 1.1 and replaced the style.css and profile templete. I still get the same issue with the doubling up on the menu item headers.

If I replace the following with the ones from the original style.css it works fine.

Original styles.css

Code:

.tabmenuitem
{
font-weight: bold;
font-size: 12px;
background-image: url(images/tab_bg.jpg);
background-repeat: repeat-x;
background-color: #006BAD;
height: 24px;
width: auto;
}

.blockheadleft
{
color: #003150;
font-size: 10px;
font-weight: bold;
letter-spacing: 0.1em;
background: #006BAD url(images/block_title_left.jpg) top left no-repeat;
text-align: left;
width: 148px;
height: 14px;
display: block;
vertical-align: middle;
padding: 2px 4px;
}

.blockheadright
{
color: #003150;
font-size: 10px;
font-weight: bold;
letter-spacing: 0.1em;
background: #006BAD url(images/block_title_right.jpg) top right no-repeat;
text-align: right;
width: 148px;
height: 14px;
display: block;
vertical-align: middle;
padding: 2px 4px;
}

Replacement style.css

Code:

.tabmenuitem
{
font-weight: bold;
font-size: 12px;
background-image: url(images/tab_bg.jpg);
background-repeat: x;
background-color: #006BAD;
height: 31px;
width: auto;
padding-top: 0px;
padding-right: 4px;
padding-left: 4px;
padding bottom: 6px;
}

.blockheadleft
{
color: #003150;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.1em;
background-color: #006BAD;
background-image: url(images/block_title_left.jpg);
background-repeat: repeat-none;
text-align: left;
width: 148px;
height: 26px;
display: block;
vertical-align: middle;
padding: 10px 4px 4px 4px;
}

.blockheadright
{
color: #003150;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.1em;
background-color: #006BAD;
background-image: url(images/block_title_right.jpg);
background-repeat: repeat-none;
text-align: right;
width: 148px;
height: 26px;
display: block;
vertical-align: middle;
padding: 10px 4px 4px 4px;
}

Again not sure if this is an IE7 thing or not.

[Volnhar]

I also have noticed another problem with the new profile.template.ph p, it doesn't allow you to select an avatar.

You can see this in the two attachements.

[Luke]

I have no Idea, but I'd guess it's probably IE7 not being able to draw its way out of a box.

If you look at the original CSS properties:
   background: #006BAD url(images/block_title_left.jpg) top left no-repeat;


Notice the no-repeat? I guess IE 7 isn't.

I'd "really" hate to have to add in a conditional comment just for IE7.

Granted, the font-sizes you had going on in your original image were way big. Which might be part of it.

Could you do us a favor and browse Talisman's site, and check it in IE7 as a comparison?

http://dragonprime.net/

At least then we could nail it down to IE7, or maybe configuration or something.


For the avatar, is that in comparison to 1.0? With SMF 1.1.2, there are some additional/new/some kind of setting that has to be looked at in your admin area. We had the same initial problem here, and I had to go dig and find it.

[Volnhar]

I've had a look at dragonprime and the site appears fine in my IE7.

Not sure if Talisman has updated his styles.css or profile.template.ph p files.

I only have this problem if I use the new styles.css that you posted here, the original in the 1.1 beta install works fine other than the colour issues.

The profile issue is also only present if I use the profile.template.ph p that you posted in this thread the original in the 1.1 beta works fine.

The comparison is between these two files not 1.0 and 1.1, if that makes sense.

I think IE7 does see and use the no-repeat in the original styles.css as this file works ok for me, it's the updates styles.css that is the problem and it uses -

                background-image: url(images/block_title_left.jpg);
   background-repeat: repeat-none;

To me it's possibly the the repeat-none that is the issue or the no-repeat needs to go with the background-image tag.

I'll have a play around when I get time, my wife has been sick for the past 3 weeks and our 8 month old is also sick at the moment so I don't get too much free time right
now.

[Luke]

I think there are some version mix-ups then.

Somewhere. Talisman's been quite helpful in sorting the IE stuff out, and he has the latest greatest template/css stuff.

Give me a bit, might be tomorrow, but I'll upload a full default theme for you to try. All images, and the whole lot.


//  Looking at your post though, I do see a typo.

repeat-none should be no-repeat.

which is probably what's doing it.

I'll double check the default css file, and attach a clean one.

[Luke]

// No, I'm not admitting that I uploaded the 1.0 css file earlier. 

[Talisman]

// No, I'm not admitting that I uploaded the 1.0 css file earlier. 

Hmmmm...

I copy TO the wrong folder, you copy FROM the wrong folder.   

[Luke]

Isn't that something like an example of "for every action there is an equal and opposite reaction"?

[Volnhar]

Thanks downloading the latest styles.css now.