Defacto theme style.css

Skinning and designing Serendipity (CSS, HTML, Smarty)
User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Tue Feb 21, 2006 4:19 pm

Hi!

1.) The emoticon images can be changed/altered via a method described here: http://www.s9y.org/44.html#A29

Or you can just save the PNG files with proper alpha transparency. Using GIFs will not work, as they only support 1-bit transparency. So you should save it with the required background color and just still use PNG images.

On top of that, IE7 will support transparent PNGs finally.

BTW, what makes the PNG troubles is the 'browsercompatibility' plugin. It's javascript seems to fail for you (or was it carl) with the big-sized images.

2.) Those can be configured within the "plugin_calendar.tpl" file.

3.) The s9y banner has no transparency information.

HTH,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
costa
Regular
Posts: 110
Joined: Wed Feb 08, 2006 5:29 pm
Location: Poland
Contact:

Post by costa » Tue Feb 21, 2006 4:23 pm

Owen Stubbs wrote:2) The arrow keys seem to be looking for png files. Where can I instruct s9y to use a different file name?


you can do that by editing plugin_calendar.tpl file (copy it from default theme to your own's theme directory). find this line:

Code: Select all

<img alt="{$CONST.BACK}" src="{serendipity_getFile file="img/back.png"}" width="16" height="12" style="border: 0px" />

and replace back.png to yours back arrow filename (for example back.gif). do the same for forward.png

and for the rest - it must somewhere in the plugins code i think. not much helpful but one problem solved :)

CoSTa

EDIT: damn you garvin, you're a fast answer machine :)
"everything is under control" - kasparov demo

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Tue Feb 21, 2006 5:23 pm

garvinhicking wrote:Or you can just save the PNG files with proper alpha transparency. Using GIFs will not work, as they only support 1-bit transparency. So you should save it with the required background color and just still use PNG images.


I created mine in Photoshop 7, saved as PNG-24, with transparency applied. I suppose I could try saving it with a background color equal to the mainpane background color to see if the problem goes away.

On top of that, IE7 will support transparent PNGs finally.
Great. But I wonder what other bugs they will introduce in the process. Isn't IE7 already out, or is it in pre-release?

BTW, what makes the PNG troubles is the 'browsercompatibility' plugin. It's javascript seems to fail for you (or was it carl) with the big-sized images.


I have no problem viewing this stuff at all, and do have the s9y browser compatibility plugin installed. Hey Carl - is it possible you are blocking javascript? Do you see the countdown timer in the header on every other page of my site? I have not figured out how to get this into the s9y page yet as it would mean placing it on top of the header.

So, I'm really right back where I started.... not really knowing if this is a widespread problem, limited to a few people who might have browser issues, or something more. One thing is certain - s9y is using pngs for all the images & icons, and if it were merely a png problem, seems like all kinds of s9y users would be having all sorts of problems. Either that, or everyone is going through great pains to eliminate all png useage in their s9y installations.....

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Tue Feb 21, 2006 6:47 pm

Before I change the pngs, lets see if it is something else. I had created an HTML nugget to display some buttons in the sidebar. Those are screwing me up in more ways than one, most notably, the buttons are only 130 px wide, but sidebar is 150, but it they are pushing the sidebar wider than it should be some of the time.

I just made those "hidden" - so can Carl, CoSTa, and anyone else with prior viewing problems check my s9y page again, and tell me if you are having distortion issues?

http:www/chicagoloopcruise.com/serendipity

User avatar
costa
Regular
Posts: 110
Joined: Wed Feb 08, 2006 5:29 pm
Location: Poland
Contact:

Post by costa » Tue Feb 21, 2006 7:18 pm

Owen Stubbs wrote:Before I change the pngs, lets see if it is something else. I had created an HTML nugget to display some buttons in the sidebar. Those are screwing me up in more ways than one, most notably, the buttons are only 130 px wide, but sidebar is 150, but it they are pushing the sidebar wider than it should be some of the time.


maybe you should try style them somehow. lets say:

Code: Select all

<img style="border: 0px; padding: 0px; margin: 0px;" src="button_path" />


on my own blog i put all the buttons into single paragraph:

Code: Select all

<p style="margin: 0px 0px 2px; padding: 0px; text-align: center;">
button block goes here, separating each button with <br />
</p>

it works like a charm. also unmark "perform markup transformations" in html nugget plugins configuration.

Owen Stubbs wrote:I just made those "hidden" - so can Carl, CoSTa, and anyone else with prior viewing problems check my s9y page again, and tell me if you are having distortion issues?


nothing to report. firefox here under linux. so no ie tests possible right now.

CoSTa
"everything is under control" - kasparov demo

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Tue Feb 21, 2006 8:03 pm

Sorry for the delay in responding. Your main html site works perfectly for me in all browsers including the javascript countdown. IE has no problem with this.

The blog is the problem. Firefox and Opera handle the pngs as expected. The countdown doesn't work. In IE, the pngs don't work and the countdown doesn't work.

EDIT: removing the buttons hasn't made any difference.

Carl

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Wed Feb 22, 2006 12:48 am

Carl - can you check this again for me. I have not eliminated the transparent pngs just yet.... however, the background images were all pngs too, and MIGHT have had the transparency tag, even though none of them are transparent by design.

Anyway, I re-sliced the image into the exact same file types as my base site - the header is a JPG file, everything else is GIF. They look subtly different, and I can only suspect I used a slightly different compression or #colors. I'll fix that some other time. What I wanted to test now is the theory of distortion due to pngs on top of pngs.

Also - could you look at your theme tester site with IE and let me know if you are having problems with the transparent pngs there.


Costa - your site is well designed... very elegant. The little girl (daughter?) is an angel.

I tried your <p style...> example. It didn't really make a huge difference compared to the way I was doing it, but I was able to make a little fix on my own. When I first did this, the left sidebar was acting very strange, and I think it was judebert who tried to explain it. Even though the background image is 150px, and the leftsidebar was set to 150, it was coming out too narrow. I needed to set the left sidebar to 152 to get it to display correctly. Once I started adding my 130px buttons in, suddenly the leftsidebar was was 1 px too wide! Now I re-set the leftside bar to 151 and it looks OK again. This has me really confused.

Final issue - I noticed that my other pages, generated with MS FrontPage, do not include a doctype setting. No one seems to have trouble seeing those pages, but none are using png images either. Should I cut & paste the doctype statement from the s9y page into my other pages? I don't know what it really does since I am less than a month into dealing with html/css.

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Wed Feb 22, 2006 1:52 am

ok, Don I've been very confused about this image issue. I played around with IE and nothing worked. Finally I worked out that there is something seriously wrong with the way Serendipity is handling IE. When I view the source of that page in IE, which opens notepad, everything seems fine. The images have their correct names and paths. However, right clicking on the image within IE and viewing its properties tells me it is blank.gif. Every single png file on your site and on mine now, is the wrong size and shows up as blank.gif.

I think I need to go back a few posts and read Garvin's response. Perhaps the browser compatibility plugin is the culprit. Problem is I've never come across this before so need to really understand it before I make any more comments.

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Wed Feb 22, 2006 2:09 am

When you first brought this png issue up, I checked your theme tester site, and noticed the same thing about the blank.gif.... in IE, that is the image's property name, but in FF, you see the real thing.

I've seen this tactic used deliberately to try and stop the less educated from stealing images. You use a background image with the real image, then insert a transparent gif in a cell. When someone tries to "save image", they get the blank, not the real image. Of course, someone more determined can probably to to temp files and retrieve the real thing.

I'm am more confused by the problems I am having with widths. Just noticed another anomoly - I have a width problem again on the commentform page, but not on the entry form, nor the comment page. I had issues with that the other day, and thought I resolved them, but need to go back and take a look.

Aren't you guys just THRILLED that I found s9y?!!! :lol:

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Wed Feb 22, 2006 2:20 am

Actually yes, I am thrilled that you've joined Serendipity. These issues need to be dealt with, regardless of the source. I'm leaning toward this being an IE problem, although the browsercompatibility plugin might have some responsibility.

I now have the same problem in IE with my themes site!

What I did was cleared my IE cache, then cleared my windows cache, and then ran a registry cleaner. Over the top perhaps, but I figured if I'm going to test this I need to start with no history. Interestingly, when my themes tester site is run on my own localhost, I don't get the png problems. As soon as the connection is external, like your site or my themes site, the problems start.

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Wed Feb 22, 2006 2:31 am

Carl - do you think the width problem and the png distortion problem could be related? I'm a fairly quick learner with anything, but I have NOWHERE near the experience you have in this stuff.... It is also quite strange that YOU are having these viewing difficulties, but I am not.

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Wed Feb 22, 2006 2:48 am

Don, I can't explain it. I'm not seeing any problems with your comment form. It all looks fine in both IE and Firefox. The only problem I'm seeing is the png issue which is of course destroying the whole design. The original screenshot I uploaded is still how I'm seeing your blog.

It is the serendipity powered by logo that is pushing out your design, I just can't figure out why. My IE is uptodate, I've cleared all the history, I've done a shift refresh just in case. Could you diable the powered by plugin temporarily and I'll take another look before I have to go?

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Wed Feb 22, 2006 2:54 am

I disabled it for you carl. I'm on to something too.... maybe..... more soon, need to finish my review of something. Only a few minutes, hopefully.

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Wed Feb 22, 2006 2:58 am

STOP, whatever you just did worked! Ok, I'm still seeing the powered by logo, I assume you've disabled or changed something else, but it works in IE now. Only problem is that the icons now have a light blue background, and when I right click and then view properties I now see their actual names.

WHAT DID YOU DO? This is important.

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Wed Feb 22, 2006 3:07 am

Carl - all I did was delete the compatibility plugin. Nothing else. Now remember, before any of this, I had absolutely no problems in IE, but my default browser is FF.

Now, in IE, I also see that the category icons, which are transparent pngs, have a solid background - in my case, somewhere between white and a light grey. Still working on my review of some other info - almost done.

Post Reply