WordPress.org

1. kalysto
   Member
   Posted 2 years ago #

   Hello to everyone!

   I need a little help from someone who knows CSS more than me... so please help me! I will truly appreciate it!

   I have a WordPress blog, http://alchimie.spirituala.net/ and this is what I want to do:

   --> put an image background on the top, wich should cover Alchimie Spirituala banner and also the search text box;

   -> this image should fade down to the menu bar;
   -> reached the menu bar, this faded image shoud turn all white, and with the white color should go down till reached the bottom of the blog page.

   the faded image I want to use is at http://lh5.ggpht.com/_d-8zCc6oF_0/S3WI9dfCcnI/AAAAAAAADdM/piB6DBQDHNI/cea%20mai%20buna.jpg

   How is that possible to do? Plaese, please help me!
   Thank you so much, in advance!

2. alchymyth
   The Sweeper
   Posted 2 years ago #

   
   

3. kalysto
   Member
   Posted 2 years ago #

   Thank you so much, my dear friend! It was so simple.... never thought about it... but now, after editing the style.css is that the image appears like this:

   http://lh5.ggpht.com/_d-8zCc6oF_0/S3bzQmuor2I/AAAAAAAADdY/W4se8TKfHq0/s800/blog.png

   The white does not go down.....

   Why this happens?

   Thank you so so much!
   Thank you!

4. alchymyth
   The Sweeper
   Posted 2 years ago #

   i didn't know you were so quick - here second thoughts:

   edit style.css; delete the line with #background; and add the new style:
   

   #page { /*the main container*/
   	width:880px;
   	margin:0 auto;
   	font-size:1em;
   	background:#FFF;
   	padding: 10px 25px 35px 25px;
   	border:3px double #333;
   	}
   
   #page div.clearfloat {
   height:180px;
   background: url(http://lh5.ggpht.com/_d-8zCc6oF_0/S3WI9dfCcnI/AAAAAAAADdM/piB6DBQDHNI/cea%20mai%20buna.jpg) no-repeat;
   	}

5. kalysto
   Member
   Posted 2 years ago #

   Now I`ll do it and I will tell you in a couple of minutes!
   thank you so much!

6. kalysto
   Member
   Posted 2 years ago #

   thank you so much, for all your help!!!
   Now it works, not perfectly but it works and this is what I wanted...

   Now I need to fix the only one problem... this image header with the sunrise appears also down, on a post:

   I will manage somehow to remove it because messes up the posts...

   Again, thank you so much for all your help, you saved me!
   Thanks :)

7. kalysto
   Member
   Posted 2 years ago #

   here is the screenshot also :)

   http://lh5.ggpht.com/_d-8zCc6oF_0/S3b41oiUuII/AAAAAAAADdc/hiqn_KhW0gI/s144/Screenshot.png

8. alchymyth
   The Sweeper
   Posted 2 years ago #

   i actually did not scroll down the page to see if anything wlse got changed.
   it can be difficult to test the whole influence of any changes to the style.css, as i am working in firefox with the developer addon. it is a great tool, however i can only work on one page at the time, and all changes need to be repeated when i change the page.

   i tried to find a remedy to get rid of the sunset in the post:

   try and add this line just after the other one - the beginning looks very similar, however it is different:
   

   #page div .clearfloat { height:auto; background:transparent; }

9. kalysto
   Member
   Posted 2 years ago #

   I dont know how do you do it... but now its perfect!!!
   So, the right code that worked for me is:

   #page { /*the main container*/
   	width:880px;
   	margin:0 auto;
   	font-size:1em;
   	background:#FFF;
   	padding: 10px 25px 35px 25px;
   	border:3px double #333;
   	}
   
   #page div.clearfloat {
   height:180px;
   background: url(http://lh5.ggpht.com/_d-8zCc6oF_0/S3WI9dfCcnI/AAAAAAAADdM/piB6DBQDHNI/cea%20mai%20buna.jpg) no-repeat;
   	}
   #page div .clearfloat { height:auto; background:transparent; }

   Thank you so so much, again!!!
   This is how is displayed now:
   http://lh6.ggpht.com/_d-8zCc6oF_0/S3b87YZ6YXI/AAAAAAAADdg/djc7dB-mDqg/Screenshot-1.png

   What is the developer tool, by the way... I do not know css... but... maybe could help me... thank you!

10. alchymyth
    The Sweeper
    Posted 2 years ago #

    it is the 'web developer' add-on for the firefox browser - free to download and easy to install.
    unfortunately you still need to know your css, it just helps to quickly test educated guesses, and to find the styles that influence certain parts of the page.

Topic Closed

This topic has been closed to new replies.