Re: Problems with Blogware Branding

[Joey deVilla]

Here's a quick guide to making changes to the look and feel of your 
customers' Control Panels. I'll post some examples (which screenshots) 
to the Blogware Resellers' Blog (http://resellers.blogware.com) early 
this week.

-- Joey
==
Changing the Header of Your Customers' Control Panels
=====================================================
To change the header (the section at the top of every page of your 
customers' control panels), do the following:

1. Log into the Blogware Reseller Control Panel at 
http://www.blogware.com/resellers.

2. Click the "Look and Feel" tab on the Navigation Bar. You will be 
taken to the "Administration Look and Feel" Page, which controls the 
look and feel of your customers' Control Panels.

3. The topmost section, labelled "Header", controls the appearance of 
the header. The text field in this section shows the HTML code that 
controls the appearance of the header.

To use your own header code, uncheck the "Use default" checkbox in the 
"Header" section. Make changes or enter completely new code into the 
"Header" section's text field, then click the "Save Settings" button.

Sample changes to the "Header" section
--------------------------------------
The simplest change you can make is to the "Blogware" logo at the top 
of the page. The line of text in the "Header" section's text field that 
draws the logo looks like this:

<div class="logo">{{page.heading}}</div>
"{{page.heading}}" is a built-in variable that draws the "Blogware" 
logo. You can replace it with your own company's name like by replacing 
"{{page.heading}}" with something else. Try this:

<div class="logo">Your Company Name</div>
Make sure the "Use default" checkbox is UNCHECKED, then click the "Save 
Settings" button. You should be taken to a page that shows the message 
"Changes saved". Now log into the Control Panel for any one of your 
customers (you may want to create a trial blog for this purpose) -- you 
should see "Your Company Name" (or whatever text you entered) at the 
top of each page of the Control Panel.

You don't have to use plain text. If your logo in image form is stored 
online, you can use that as your header. If you have a company logo 
stored on a server and the logo's URL is 
"http://example.com/images/companylogo.jpg";, you can replace the '<div 
class="logo">Your Company Name</div>' line with:

http://example.com/images/companylogo.jpg

Changing the Footer of Your Customers' Control Panels
=====================================================
To change the footer (the section at bottom of every page of your 
customers' control panels), do the following:

1. Log into the Blogware Reseller Control Panel at 
http://www.blogware.com/resellers.

2. Click the "Look and Feel" tab on the Navigation Bar. You will be 
taken to the "Administration Look and Feel" Page, which controls the 
look and feel of your customers' Control Panels.

3. The section just below the Header section, is labelled "Footer" and 
controls the appearance of the footer. The text field in this section 
shows the HTML code that controls the appearance of the footer.

To use your own footer code, uncheck the "Use default" checkbox in the 
"Footer" section. Make changes or enter completely new code into the 
"Footer" section's text field, then click the "Save Settings" button.

Sample changes to the "Footer" section
--------------------------------------
The simplest change you can make is to the "Blogware" logo at the top 
of the page. The line of text in the "Header" section's text field that 
draws the logo looks like this:

<div class="footer">
{{include name="version.txt"}}
</div>
"{{include name="version.txt"}}" is a built-in variable that draws the 
Blogware/Tucows copyright notcie. You can replace it with your own 
company's name like by replacing "{{include name="version.txt"}}" with 
something else. Try this:

<div class="footer">
&copy; 2004 Your Company Name
</div>
Make sure the "Use default" checkbox is UNCHECKED, then click the "Save 
Settings" button. You should be taken to a page that shows the message 
"Changes saved". Now log into the Control Panel for any one of your 
customers (you may want to create a trial blog for this purpose) -- you 
should see the copyright symbol followed by "Your Company Name" (or 
whatever text you entered) at the bottom of each page of the Control 
Panel.

You don't have to use plain text. If you have a graphic for the footer 
stored online, you can use that as your footer. If you have a footer 
graphic stored on a server and the graphics's URL is 
"http://example.com/images/footer.jpg";, you can replace the '<div 
class="footer"> lines with:

<img src="http://example.com/images/footer.jpg";>

Changing the Style Sheet of Your Customers' Control Panels
==========================================================
To change the CSS style sheet, which defines the overall look and feel 
of every page of your customers' control panels), do the following:

1. Log into the Blogware Reseller Control Panel at 
http://www.blogware.com/resellers.

2. Click the "Look and Feel" tab on the Navigation Bar. You will be 
taken to the "Administration Look and Feel" Page, which controls the 
look and feel of your customers' Control Panels.

3. The bottommost section, labelled "Override Styles (CSS)", lets you 
make changes to the CSS stylesheet for your customers' Control Panels. 
The text field in this section is blank.

To change the CSS stylesheet, uncheck the "Use default" checkbox in the 
"Override Styles (CSS)" section. You can see the default style sheet by 
clicking the "View default style sheet" link. Enter revisions to 
existing styles into the "Override Styles (CSS)" section's text field, 
then click the "Save Settings" button.


Sample changes to the Style Sheet
---------------------------------
To see what styles are in the CSS stylesheet for your customers' 
Control Panels, click the "View default style sheet" link in the 
"Override Styles (CSS)" section. A window will pop up, showing the text 
of the CSS stylesheet.

To made changes to a style, enter a new definition for it in the text 
field of the "Override Styles (CSS)" section.

For example, let's look at the default style definition for the <body> 
tag:

body {
    background-color: #FFFFFF;
    margin: 0px 0px 0px 0px;
    font: 11px/18px Tahoma,'Trebuchet 
MS',Verdana,Helvetica,Arial,sans-serif;
    height: 100%;
}

The font for this tag can be changed by copying the default body style 
and pasting it into the text field in the "Override Styles (CSS)" 
section and then making changes. Note the new fonts:

"Override Styles (CSS)"
body {
    background-color: #FFFFFF;
    margin: 0px 0px 0px 0px;
    font: 11px/18px Times, serif;
    height: 100%;
}
To save these changes, click the "Save Settings" button.
You should be taken to a page that shows the message "Changes saved". 
Now log into the Control Panel for any one of your customers (you may 
want to create a trial blog for this purpose) -- you noctice that the 
text in the navigation bar is now done in the "Times" font.

_________________________________________________
Joey deVilla - Tucows, Inc. - [EMAIL PROTECTED]
TC/DC (Technical Community Development Coordinator)
"Nerdy Deeds Done Dirt Cheap"