|
Lesson 1. Changing page background color and picture
It's easy!
It's really simple operation.
Please open your /tornado/css/OceanAbove/style.css file.
(Or style_ns4.css if you use NS4 browser).
We are going to change only one string (the 4-th string in it)
|
body { color:black; font-weight: bold; font-size: 8pt; font-family: verdana, tahoma, arial; background:#94eafb url(images/pagebg.jpg) no-repeat; text-align: center; margin: 0px }
|
"background:#94eafb url(images/pagebg.jpg) no-repeat;" means that the skin has:
bg color #94eafb
bg image images/pagebg.jpg no-repeat;
and this bg image repeats once.
Pay attention, that a picture on its edges is "dissolved" in color. So, each time when you'll change a background image, you have to find a matching color. Also in some cases - prepare an image in Photoshop to make their junction invisible.
- Step 1. Replace the standard OceanAbove bg picture with another one.
- Go to"/tornado/css/OceanAbove/images/" directory. Rename the standard PageBg.jpg to PageBg_old.jpg.
Copy your new bg image to the "/tornado/css/OceanAbove/images" folder and name it Pagebg.jpg
Or specify an url(images/pagebg.jpg) to any other picture under your wwwroot directory.
Note: for NS4 browser you must specify an absolute url to all your background images. For example "/tornado/css/OceanAbove/images/pagebg.jpg" instead of
"images/pagebg.jpg"
-
We'll illustrate this step on OceanBelow bg picture example.
- Step 2. Change the background color.
- Open new Pagebg.jpg in your favorite image editor. Pick a color near the bottom edge of the image using Eyedropper tool. In this case we have #313165. Change background:#94eafb to background:#313165.
- Congratulations! You did it.
-
-
Step 3 (optional). Change the body text color.
- If it makes sense in your case, change the body text color (we have to do this in our example). Just modify
body { color:black
to
body { color:white
That's it!
|
Lessons: 1, 2, 3, 4, 5, 6