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">
© 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. - jdevilla@tucows.com
TC/DC (Technical Community Development Coordinator)
"Nerdy Deeds Done Dirt Cheap"
This archive was generated by hypermail 2.1.3 : Tue Oct 19 2004 - 23:37:58 EDT
