Recent Topics

1 May 21, 2008 09:30    

My b2evolution Version: 2.x

Hi,

I was wondering how I can do the following changes in this skin :

1) Eliminate the white background on the top of the page

2) Modify the top black background to make it as thin as the bottom black background (the one right before the menu with "Home, Contact, Log In")

3) Get rid of the "Public Blog List" widget (right now it shows DT) without having the headerimg.jpg raised and not aligned.

4) Get rid of the brownish line where the Public Blog List is displayed) (always without screwing with the headeimg.jpg alignment.

Thanks for your help.

2 May 21, 2008 09:48

1. Look for the following in stylesheet.css
#page {
background-image: url(img/bg.jpg);
background-repeat: repeat-x;
background-position: left top;
margin: 20px auto;
padding: 0;
text-align: left;
}
and change margin:20px auto; to margin: 0 auto;

2. and 3. try deleting the public bloglist widget. I'm not sure of the ramifications this will have on the whole header alignment though a bit of style management should fix it.

4. I see no "brownish" line, may be my monitor though.

3 May 21, 2008 10:20

I was able to get rid of the Bloglist...

I still can't find out how to make the black top stripe thin as the lower one (just below the header menu)

I can still see a different color between the top black and the image..

And I was wondering how to make the picture go all across the screen (left to right without the colored background)

for reference, look at it :

http://www.lovesensualitydevotion.org/DigitalThoughts

Thanks.

4 May 21, 2008 10:36

Afwas has a background image and this is the light blue gradient with a brownish/grey stip at the top.

Play with the css for #page in your stylesheet.css

5 May 21, 2008 10:47

it's a still bg image, your wants has nothing to do with the css..you can manipulate it however you like..

if i got you right, i have modified it accordingly, this will cure your problem, grab it here and replace with the original one under img folder of the skin: [url=http://www.tilqi.com/bg.jpg]bg.jpg[/url] and please tell if it's ok

6 May 21, 2008 11:10

Thank you very much for the info...

BUT... LOL

if you look at it now, you can see that the pic is "anchored" to the bottom black line but not the top one and the bluish background is gone. :(

Any way I can make the headerimg.jpg anchored to the black lines (top and bottom) and it's background back to the bluish?

I also remember that there is a way to make the headerimg.jpg stretch from left to right so to fill the whole screen (whichever size shouldn't matter as it should be automatically sized depending on the screen you're using)...???

Thanks.

7 May 21, 2008 11:26

it isn't anchored, there is that .public.bloglist.widget on the top of the headerimg you didnt get rid of this :

.widget_core_colls_list_public {
	height: 53px;
	overflow: hidden;
	font-size: 14px;
	text-transform:uppercase;
	font-weight: bold;
}

lovesensualitydevotion wrote:

Any way I can make the headerimg.jpg anchored to the black lines (top and bottom) and it's background back to the bluish?

you can manipulate the bg image how you feel like, after finishing with it, play with padding-top of the #headerimg to place it where you want exactly, vertically

lovesensualitydevotion wrote:

I also remember that there is a way to make the headerimg.jpg stretch from left to right so to fill the whole screen (whichever size shouldn't matter as it should be automatically sized depending on the screen you're using)...???

i see what you are getting at it's already stretches fully at lower res. however when the resolution is wider than the image you chose it wont be able to cover the %100 of course, you can repeat it horizontally but it wont look good, and also it is not a good idea to stretch it , as that wont look good either

8 May 21, 2008 11:47

Uhm,

I am getting confused, maybe I am tired.

If you look at the original demo page :

http://skindemo.b2evolution.net/2/index.php?tempskin=simple_zen

you can see the difference from what my page looks like now.

http://www.lovesensualitydevotion.org/DigitalThoughts

Let me try to explain myself in a different way:

let's see the page this way: I got white, black and some other color I can't really tell THEN the headerimg.jpg than another black line then the header menu then another black line (not as thick as the one above the header menu)

The background of the headerimg.jpg is some kind of blue(ish) that I would like to keep.

If you look at the page now, I have a top black line, a huge empty white space, the headerimg.jpg, a black line.

I want to make the headerimg.jpg background bluish (just like the original) and the headerimg.jpg close to the top black line just like the bottom one is (without screwing the position of the header menu)
I got rid of the white, I have the black almost the same height of the bottom (just before the Home, Contact, Log In menu).

9 May 21, 2008 12:05

lovesensualitydevotion wrote:

Uhm,

I want to make the headerimg.jpg background bluish (just like the original) and the headerimg.jpg close to the top black line just like the bottom one is (without screwing the position of the header menu)

you'd better do it yourself, i mean; the way you like, however if i got it properly this time,
re-grab this : [url=http://www.tilqi.com/bg.jpg]bg.jpg[/url]

this will bring back that blue bg, but that purple line is gone (you didn't want to keep it i suppose) and the black lines are almost same, replace with the original

Then, remove that either from your widget list or the css as i mentioned above, then you can place your image vertically adding padding-top to your #headerimg.. good luck

10 May 21, 2008 12:45

Thank you very much...

It's still not working the way I was thinking...

Here's the actual code in the stylesheet.css :

#page {
background-image: url(img/bg.jpg);
background-repeat: repeat-x;
background-position: left top;
margin: 0px auto;
padding: 0;
text-align: left;
}

#wrapper{
width: 1000px;
text-align: left;
margin: auto;
}

#header {
margin: 0 10px 0px 1px;
padding: 0;
height: 220px;
}

#headerimg {
background: transparent url('img/headerimg.jpg') no-repeat center 15px;
margin: 0 0px 55px 0px;
padding: 0x auto;
height: 180px;
width: 100%;
}

I gotta get back to the thin black line on top, keep the bluish background of the headerimg.jpg and center the headerimg.jpg between the top black line and the bottom black line (the one above the header menu)...

Check it as it is now:

http://www.lovesensualitydevotion.org/DigitalThoughts

11 May 21, 2008 13:48

no, i insist i will settle this thing out :D

is that what you want exactly ?

*edit: oops the image was too big

or what is different than this

12 May 21, 2008 13:59

OMG...

Hey man, I appreciate the help but I kind of found a different way to do it.

If you look at the page now, it shows a different bg.jpg (which I find pretty cool) and the headerimg.jpg working just fine on top of it.

Now, if I only could get the bg.jpg to work on the footer as well as on the sides (leaving only the post column and the sidebars with white background), that would satisfy me... LOL

And to answer your question, yes, that was "almost" what I was looking for (except for the tiny gray line between the black on top and the image...)...

:D :>

13 May 21, 2008 15:28

all right then anyhow (: i'm pretty sure u will figure out sth else better, good luck with it

14 May 21, 2008 15:39

Still working on it...

Can't yet figure it out...

Zzzzzz....

LOL


Form is loading...