Well, that wasn't the solution I came up with. But nevermind! Thanks for the fix.
The new version, with that small change, is now up. Let's call it version 1.03
Also, anyone who downloaded it very recently may want to just check the first few lines of the CSS. I foolishly put in the absolute path for my header image, instead of the relative path for the header image in your folder.
can someone please tell me how to reduce the blue space above the tabs a little bit?
Also How can I put an image in that area so that it will look good? I want to make a header and put it in there.
Please let me know both thing things :D
Reducing blue space is easy. If you're using the 0.9.3 version then just replace the
.Head {
background: url("../images/bg.gif") repeat-x top left #E5EAF6;
margin: 0px;
padding-top:99px;
padding-bottom:18px;
}
with
.Head {
background: url("../images/bg.gif") repeat-x 0px -20px #E5EAF6;
margin: 0px;
padding-top:79px;
padding-bottom:18px;
}
Just adjust the -20px for the actual image, and then minus that number from 99 to set as the top padding.
An image would be slightly harder, do you mean instead of the blue ?
im using 0.9.2.x
also where can those lines be found....what file etc?
For the image I mean that suppose I want to put an image in the exact area where the blue is...
In the soul-scape style directory, there's a file called global.css You'll need to change the following bits.
from this
body {
background:#fff url(bg.gif) repeat-x top left;
margin-top: 16px;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
to this
body {
background:#fff url(bg.gif) repeat-x 0px -30px;
margin-top: 16px;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
and this
.SiteContainer {
margin-top: 99px;
padding-bottom: 20px;
}
to this
.SiteContainer {
margin-top: 69px;
padding-bottom: 20px;
}
To alter the precise amount of blue you'd end up with, you need to alter the -30px and the 69px numbers. However they need to be altered by the same amount. Whatever you take away from one, needs to be taken from the other.
To add your own image at the top, i'd reccomend opening the bg.gif image in something like Photoshop and stretching it so that it's big enough to accomodate your picture in the centre with plenty of the original blue image on either side.
Then change the global.css to
body {
background:#fff url(bg.gif) repeat-x center -30px;
margin-top: 16px;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
Ok cool that worked excpet now there is another problem :
http://i1.tinypic.com/n2lsfq.png
Look at the tabs ^ They are now too far up...how can I make them go back to the way they were? :s
Awww vomer, can't believe you changed to the highly inferior Invision Board :P
Anyway, lovely job on the theme, I'm currently using the blue one on my board \o/
:D
Comments
I know what the problem is, so I'll just get working on it.
I think I've fixed it. I don't have Opera so could someone check it for me please?
Here's the solution:
add: padding: 0;
to and it'll work in Opera
see here: http://ajaxtalk.de/
Thanks for the fix.
The new version, with that small change, is now up. Let's call it version 1.03
Also, anyone who downloaded it very recently may want to just check the first few lines of the CSS.
I foolishly put in the absolute path for my header image, instead of the relative path for the header image in your folder.
The Soul-Scape theme is now avaliable for 0.9.3
v.1.0 for 0.9.3
I would greatly appreciate any feedback, and if someone could test it in Opera and tell me what breaks that would be great.
Enjoy!
Hmm.. I've just realised I'll have to do this again quite soon. As soon as the collective has redesigned all the xhtml.
http://lussumo.com/community/discussion/1470/1/proper-meaning-valid-and-semantic-markup-and-css-please/
If you're using the 0.9.3 version then just replace the
.Head { background: url("../images/bg.gif") repeat-x top left #E5EAF6; margin: 0px; padding-top:99px; padding-bottom:18px; }
with
.Head { background: url("../images/bg.gif") repeat-x 0px -20px #E5EAF6; margin: 0px; padding-top:79px; padding-bottom:18px; }
Just adjust the -20px for the actual image, and then minus that number from 99 to set as the top padding.
An image would be slightly harder, do you mean instead of the blue ?
In the soul-scape style directory, there's a file called global.css
You'll need to change the following bits.
from this
body { background:#fff url(bg.gif) repeat-x top left; margin-top: 16px; margin-left: 20px; margin-right: 20px; padding: 0; }
to this
body { background:#fff url(bg.gif) repeat-x 0px -30px; margin-top: 16px; margin-left: 20px; margin-right: 20px; padding: 0; }
and this
.SiteContainer { margin-top: 99px; padding-bottom: 20px; }
to this
.SiteContainer { margin-top: 69px; padding-bottom: 20px; }
To alter the precise amount of blue you'd end up with, you need to alter the -30px and the 69px numbers. However they need to be altered by the same amount. Whatever you take away from one, needs to be taken from the other.
To add your own image at the top, i'd reccomend opening the bg.gif image in something like Photoshop and stretching it so that it's big enough to accomodate your picture in the centre with plenty of the original blue image on either side.
Then change the global.css to
body { background:#fff url(bg.gif) repeat-x center -30px; margin-top: 16px; margin-left: 20px; margin-right: 20px; padding: 0; }
You just need to keep changing it untill you get it about right.