CSS Customization - Customizing page header background.
 |
You can now customize your page header background in a much simpler way - directly within the Page header editing function.
We are leaving this page just to illustrate some CSS technics which might be useful elsewhere. |
Let's customize page header of 'Basic 1' theme with a custom picture.
Size of the header for this theme is 919x125 pixels. Prepare a picture with these exact dimensions.
- Upload your picture to Wild Apricot server (See Inserting pictures )
- Determine the precise URL to your picture. One simple way to do it is by right-clicking on it in the list of pictures, choose 'Properties', copy 'Address' (Internet Explorer) or 'Location' (Firefox). Paste it into editor, e.g. 'Notepad'.
| Internet Explorer |
|
Firefox |
 |
|
 |
Close 'Properties' or 'Element properties' window, close 'Insert picture' dialog and exit from edit page mode without saving changes.
A typical picture address will look like this:
Now take this address and delete all initial characters until the last '/' (just before 'PictureHandler'). The remaining portion will look like this:
Now delete all characters after the picture id, what should remain is something like this:
This is the link you can use in your CSS. The most important thing in the string is the number located after 'PicId=' - in our sample '4071'. Your number will be different - it will be a unique ID of your picture. In other words, you can simply notice the picture ID from the link properties.
| Internet Explorer |
|
Firefox |
 |
|
 |
| |
|
|
 |
|
 |
Customize your CSS
Enter the code below into CSS customization box. (Go to Settings -> Visual look and feel -> Advanced customization (CSS))
#idHeaderContainer .d1,
.headerContentHolder
{
background: transparent url(/PictureHandler.ashx?PicId=4071) top left no-repeat;
}
( Enter the ID that corresponds to your picture, instead of our sample ID 4071.)
