Edit your site design

You can easily edit your site design within SBI's BB2 editor.

When you initially create your website, you will probably choose a standards site design from the Design Gallery.

This does not mean that you have to keep that initial design, although it will help if the design you initially choose has a similar layout to your final design.

As with all website creation applications, you can change the website design and color scheme at any time.

Within BB2 it is especially easy to edit your site design and change the color scheme.

Most websites designs consist of just a few major elements such as a header graphic, a left navigation bar and associated buttons and possibly a right column graphic. Although, some designs may also involve the use of other elements such as a footer graphic, etc.

To edit your website design you can often simply change the images which are called and displayed, and instead display different design images.

Although, some more radical site design changes, may also involve changing the height of the header, the width of columns and various other layout changes.

We will however focus on this page on making less radical changes.

All layout aspects of the website are controlled through the cascading style sheet, and are usually easily editable. When you edit your site design, the secret is in knowing what can be changed with ease, and knowing what may require a little more thought and planning to change.

If you selected your initial design well, the chances are that you will only want to change the visual appearance in regard to colors and in regard to the main design images.

Photographs within your page columns are not part of the overall site design, they are instead part of the website contents, and can be easily changed and re arranged within the BB2 page editor.

You can edit your overall site design by changing the CSS information which calls and displays the design elements.

Editing the images

It is best to not actually edit and change the original images when you edit your site design, it is instead better to create new modified images that are based on the size of the original images, as described below.

To change the header graphic at your website, the best option is to download a copy of that graphic to your computer, and then edit that copy.

You can easily download a copy of your website's header image by visiting the website using a web browser such as Firefox, and right clicking over the header image area of the page.

Then in the displayed menu, select View Background Image. The background image will then be displayed within the browser window.

Right click on the image and select Save Image As from the displayed menu and save the image to a convenient location on your computer.

Next, edit that image in a suitable image editing application such as Photoshop or The Gimp, until the revised image represents the header image you wish to display on your website.

When you edit your site design, you may also want to download and save background images such as the left navigation bar background image and navigation button images.

You can download these images by following similar procedures to that described above for downloading the header image.

Downloading the navigation button images may be a little less obvious, and you may need to look into the website's CSS file as described below, to learn the name and location of the navigation button image, so that you can download that image to Firefox, and then save a copy of the image to your local computer for editing.

Identify all .gif, .png, or .jpg images that are described in your CSS file and then become familiar with those images by calling and previewing them in a browser window. This will enable you to easily identify which images are the navigation buttons,

Online editing applications could be used to edit the images, although these applications do not tend to be as powerful or have as many editing features available as image editing applications that are hosted on your own computer.

Once you have all of the relevant images downloaded into your computer, you should edit them to provide the required visual outcomes.

When you edit your site design, it is easiest if the proposed new images are the same height and width as the old images and are based on the old images.

Otherwise, if the new images differ in size to the original images, CSS information will possibly also need to be edited, to ensure that the size of the areas allocated to the images are appropriate to the new images.

For example, when you edit your site design, if an original header image is say 120 pixels deep, although you now want the header image to be 150 pixels deep.

Relevant CSS information would in this case also need to be adjusted to ensure that the area occupied by the new image is appropriate, and this may impact the height or design of adjacent images.

More information about the impact that changing image sizes can have when you edit your site design will be provided elsewhere.

Once you have edited the visual design of the images, such as possibly adjusting the colors or adding a photograph to the heading image, you should save the new images under new file names.

The simplest thing to do when saving a new image is to add the word "new" to the old file name, such as saving the revised heading file header-image-1.png and re naming it as new-header-image-1.png. This saves any potential later confusion regarding which new file replaces which old file at the site.

Also, if the original file is a .png file, then ideally the new replacement file also be a .png file. Or if an original file is a .gif file, then the new replacement file should ideally also be a .gif file

Once the new files are all edited and saved, you can upload them to your website account using the Quick Upload It! window. This will ensure that the files are loaded to the appropriate location at the website.

Ensure that the new files all have new, and previously unused file names. This will avoid accidentally overwriting the original design files at the website. Which is very important.

Editing the CSS

Next you need to identify the CSS that calls and displays the original images and replace this at your website with similar CSS that will call and display your new images.

You already know the original image file names because you downloaded and saved them to your computer.

Now by opening the CSS file and searching within that file for instances where those image file names are used, you will be able to easily identify the CSS that call those old images, and then copy and slightly modify the CSS, to instead call and display the new images.

This will enable you to edit your site design images easily. Plus, will enable you to easily revert to the old design if you decide that for any reason you don't wish to edit your site design using the new images that you have created.

Back in the Firefox browser window, click on the header area of your website page again. only this time select View Page Source from the displayed menu.

The source code for your website is displayed. The only information you are interested in here is the link to the website's CSS file, which displays near the top of the page as /support-files/style.css.

When you click on that link, the contents of your websites CSS file are displayed in the window.

Next, within the window, select Edit and Find from the main menu bar.

This will display a small search box near the bottom left of the window.

Within this search box, search for the original image file names, such as page-header-2.png or topimage-3col.jpg, or navimage.gif. Different file names may be used with different website designs.

As you find each of these image names in the CSS file, they will be associated with CSS selectors and declarations that describe to the web browsers how the images are used within your website pages.

For example:

The following three examples are typical of the information you will find associated with the image file names.

#Header .Liner { background-image: url("/image-files/page-header-2.png");}

#Header .Liner { background: url('../image-files/topimage-3col.jpg') no-repeat; }

.Navigation ul a, .Navigation ul a:visited { display: block; background: url('../image-files/navimage.gif') no-repeat; height: 23px; line-height: 23px; overflow: hidden; text-align: center; text-decoration: none; color: #fff; }

The CSS groups are usually well separated from each other by line spaces within the CSS file and so are easily identified.

You need to select and copy all of the script in each of the relevant styles, ensuring that you include all characters, including the opening # and . characters and the closing curly braces.

You don't need to be concerned about what the code means. Simply copy it and paste it into an open plain text editor page, retaining line spaces between the different groups.

Next, change the name of the old images displayed within the code, to the name of the new images you wish to display. if you renamed your new images simply by adding the word new- to the name, then changing the names in the CSS code is simple.

Next, you copy the edited CSS code and paste it into the Add Custom CSS window in BB2's Site Designer.

Then, click the Add Custom CSS button, and check how the site looks. If it looks OK, then you are done.

If not, note what about the revised design does not appear to be right. Then remove the CCS code from the Add Custom CSS window, and again click the Add Custom CSS button to revert to the default design.

If after you edit your site design, the design did not look right when you previewed it, you will now need to figure out what was wrong with it and fix it.

Possibly a character got lost when you copied some of the CSS script from the CSS file, or possibly a wrong new image name was used when you changed the file names.

Or possibly you need simply to make some further minor adjustments to edit your site design images.

I little thought and experimenting will usually provide a solution, and there is absolutely no risk of you accidentally losing the original design.

Return to the top of the edit your site design page.

Return to the website design page.

Article by ©