here's what I mean, it's simple...
The Custom CSS code field offered by the theme options allows you to set things, even if they are already set (like the background). Since the custom code is fed to the page after the theme code, your (custom) code is the one the browser will listen to and therefore you can make adjustments to the CSS of the theme without altering any of the files of the themes...
For example, look at my website (
http://www.marcurselli.com). EVERYTHING you see there, every color change, background, image etc is applied with the custom CSS code field. I didn't modify a single file of the theme so updating is a breeze! As you can see my website looks pretty different from the "default" Suffusion theme. It's the beauty of CSS.
In your case, wanting to change the background, please note that if you go to SUFFUSION THEME OPTIONS > BODY BACKGROUND SETTINGS you can actually change the background of the theme right there, by just adding a link to an image hosted anywhere on your server.
However, EVEN IF that option wasn't there for you, if you wanted to change the background, you could just add this in the custom CSS code field:
- Code: Select all
body {
background-image: url(/my-images/background.jpg);
}
In the example above, if you add a slash at the beginning, the file is taken from the 'my-images' folder in the root of your website. So you can put all your images there and not have to add them to your theme files at all (hint hint to the developer of Suffusion: if you are trying to do what you said, you could just make mkdir a folder in the root, chmod it 777 and drop all custom files there, so that they are outside the theme files).
You can also use other CSS properties in the example above, like:
- Code: Select all
body {
background-image: url(/my-images/background.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
}
In the same way you can add an image, or a border or anything else do ANY CSS element in the design, so all you'd have to do is look at the code, find the name (id) of the element you want to modify, leave the code alone and simply add the modifications you want to the custom CSS files.
Example, if you wanted to add a background the div element called 'wrapper' (which is the big <div> that contains ALL the content) you could just add this in the custom CSS code field:
- Code: Select all
#wrapper {
background-image: url(/my-images/background1.jpg);
}
or if you wanted to change the line under the menu:
- Code: Select all
#nav {
border-bottom: 1px solid #FF0000;
}
Obviously you need to know what to look for when you look at the code, but ANY element can be found and changed via CSS without a single change in the theme files.
Long life to Sayontan for a well thought out theme!