Killzone_KidAdmin
(Old Hand)
08/07/10 17:05
Power of CSS in theme creation

You can add background image in any module by customising customCSSJS file.

You will need to make new backgroundIMG file that has 2 images and then use the second image as background like this

body {background-image: url("backgroundIMG.pspr"); background-repeat:no-repeat; background-attachment:fixed; background-position: 0px -80px;.....

Sample image and sample CSSJS:
http://pspradio.co.uk/etc2/customCSSJS.pspr
http://pspradio.co.uk/etc2/backgroundIMG.pspr

RKDM
(Addict)
09/07/10 04:33
Re: Power of CSS in theme creation

I played with this a bit and have noticed (with sample css) that the background doesn't line up above & below the row of buttons & when you click at the top of screen to shrink the player that the background needs to be taller than 272px. I don't have a pc so i can't play with the css. Can these things be worked out in the css?

max53389
(Enthusiast)
09/07/10 13:37
Re: Power of CSS in theme creation

Im going to try to mess this and see if i can use this in my future themes \:\)

Never mind it is simple to use \:P

Killzone_KidAdmin
(Old Hand)
09/07/10 16:32
Re: Power of CSS in theme creation

 Originally Posted By: RKDM
I played with this a bit and have noticed (with sample css) that the background doesn't line up above & below the row of buttons & when you click at the top of screen to shrink the player that the background needs to be taller than 272px. I don't have a pc so i can't play with the css. Can these things be worked out in the css?


Not quite sure what you mean, it aligned on mine. Make a screenshot.

RKDM
(Addict)
10/07/10 01:24
Re: Power of CSS in theme creation

http://kdm.xpmob.com/images/RP-20100709-061356.jpg
http://kdm.xpmob.com/images/RP-20100709-061417.jpg

RKDM
(Addict)
10/07/10 09:16
Re: Power of CSS in theme creation

Btw, would it be possible to to put all the info text in the top section in one line and and have it scroll...
 Code:
<marque>Station | Song | Quality</marque>

for example.
(i really miss having a computer. lol)

Killzone_KidAdmin
(Old Hand)
10/07/10 14:12
Re: Power of CSS in theme creation

 Originally Posted By: RKDM
http://kdm.xpmob.com/images/RP-20100709-061356.jpg
http://kdm.xpmob.com/images/RP-20100709-061417.jpg


Nice. Let me see the backgroundIMG.pspr image you use for it

Killzone_KidAdmin
(Old Hand)
10/07/10 14:13
Re: Power of CSS in theme creation

 Originally Posted By: RKDM
Btw, would it be possible to to put all the info text in the top section in one line and and have it scroll...
 Code:
<marque>Station | Song | Quality</marque>

for example.
(i really miss having a computer. lol)


Not sure need to experiment.

RKDM
(Addict)
12/07/10 00:59
Re: Power of CSS in theme creation

 Originally Posted By: Killzone_Kid


Nice. Let me see the backgroundIMG.pspr image you use for it

it was just a random psp background 480x272. i'd link to it but it's on my wapzan host wich is down again. sorry.

Killzone_KidAdmin
(Old Hand)
12/07/10 10:12
Re: Power of CSS in theme creation

But it cannot be 272px high it has to be 272+80 px high or when you shrink it will not cover the bottom. Use the image i posted as template.

RKDM
(Addict)
13/07/10 14:15
Re: Power of CSS in theme creation

Hey KK do you know if partial transparency works in psp browser?

Killzone_KidAdmin
(Old Hand)
13/07/10 15:59
Re: Power of CSS in theme creation

 Originally Posted By: RKDM
Hey KK do you know if partial transparency works in psp browser?


Probably not. PSP browser is like Opera 5

Razgriz375
(Newbie)
18/11/10 09:52
Re: Power of CSS in theme creation

Is there anything we can do about the misalignment in the background image? I imagine this is caused by the break between the body and header.
http://znbuww.bay.livefilestore.com/y1pw...4435.BMP?psid=1

I could try cutting a section out to try and get it right.

Edit: ok that works so it'll have to be the way. KK....is there any program out there that'll make editing the CSS file easier? or do you have a nicely ordered/structured version, because mine is all over the place and I can't make heads or tails of it without loosing my place >.<

Killzone_KidAdmin
(Old Hand)
18/11/10 12:10
Re: Power of CSS in theme creation

 Originally Posted By: Razgriz375
Is there anything we can do about the misalignment in the background image? I imagine this is caused by the break between the body and header.
http://znbuww.bay.livefilestore.com/y1pw...4435.BMP?psid=1

I could try cutting a section out to try and get it right.

Edit: ok that works so it'll have to be the way. KK....is there any program out there that'll make editing the CSS file easier? or do you have a nicely ordered/structured version, because mine is all over the place and I can't make heads or tails of it without loosing my place >.<


Instead of cutting the image you can alter background-position: 0px -80px; parameter, maybe not -80px but -92? It has to be -80-"height of the button bar" whatever it is.

And sorry for the CSS it is CSS inside javascript to save on amount of files needed for download.

max53389
(Enthusiast)
18/11/10 15:00
Re: Power of CSS in theme creation

I pretty sure the bar is 13px in height without editing the original height

Killzone_KidAdmin
(Old Hand)
18/11/10 16:23
Re: Power of CSS in theme creation

 Originally Posted By: max53389
I pretty sure the bar is 13px in height without editing the original height


yeah it is 11px + 2px for border top and bottom. -93px should do the trick then.

Razgriz375
(Newbie)
19/11/10 03:17
Re: Power of CSS in theme creation

That's awesome, works great. Thanks KK ad others

Killzone_KidAdmin
(Old Hand)
19/11/10 06:28
Re: Power of CSS in theme creation

I've just checked, PSP browser does not support transparency or opacity...but. Using power of CSS positioning I think it is possible to have semi-transparent backgrounds under titles and even links to make them stand out from background.

It would involve using png image instead jpg for the background. Then you can add few semi-transparent strips at the bottom of it and use positioning to place it as background under the text.

I will try to make a demo later.

Cheejyg
(Enthusiast)
19/11/10 06:34
Re: Power of CSS in theme creation

 Originally Posted By: Killzone_Kid
I've just checked, PSP browser does not support transparency or opacity...but. Using power of CSS positioning I think it is possible to have semi-transparent backgrounds under titles and even links to make them stand out from background.

It would involve using png image instead jpg for the background. Then you can add few semi-transparent strips at the bottom of it and use positioning to place it as background under the text.

I will try to make a demo later.
PNG can make translucent files!! =)

Razgriz375
(Newbie)
19/11/10 06:35
Re: Power of CSS in theme creation

Sounds like a plan. Lets hope it works

Killzone_KidAdmin
(Old Hand)
19/11/10 07:14
Re: Power of CSS in theme creation

It works but transparent PNG-24 is huge. You are better off with gif maybe.

http://pspradio.co.uk/etc3/backgroundIMG.pspr

http://pspradio.co.uk/etc3/customCSSJS.pspr

Razgriz375
(Newbie)
19/11/10 07:45
Re: Power of CSS in theme creation

Hmm, so hows does that work then? So with the extra bars, i guess the overall image height is increased too. Looks like i'll need to modify my theme. Is it not possible to have the bars on a seperate image file and have the CSS link to that? I know it means more files, but the majority of the background will still be Jpg so it'll be smaller altogether? Thankyou Killzone \:D

Killzone_KidAdmin
(Old Hand)
19/11/10 08:06
Re: Power of CSS in theme creation

You can have more images but you have to provide download links for them as well as your theme.

Killzone_KidAdmin
(Old Hand)
19/11/10 13:43
Re: Power of CSS in theme creation

What you can also do is to make opaque category strips like this

====== _______ =======

for example, leave space in the midle and position them not left but center so the text will align with space in the middle.

There is so much you can do with CSS.