Small Business Susan

Customizng the Remote Web Access landing home

This is what a normal standard outside home page of SBS 2011 looks like.



Booooorrrrrrinnnnng right?


But what if you could “bling” it up a bit?


We have several ways. 


Way one –


To customize the appearance of the Remote Web Workplace


  1. Open the Windows SBS Console.

  2. On the navigation bar, click Shared Folders and Web Sites.  Click on the Web sites tab.


  3. Right-click Remote Web Access, and then click View site properties. The Remote Web Workplace Properties page appears.

  4. Click the Customization tab.

  5. Do any of the following:

    • To record the name of your organization as you want it to appear on the sign-in, sign-out, and home pages of your Remote Web Workplace, type the name in the Organization name text box.

    • To choose a custom background image for your Remote Web Workplace sign-in page, in the Sign-in page dialog box, click Choose, select an image in the list, and then click OK.
    • To display your organization’s logo on the Remote Web Workplace home page, in the Home page dialog box, click Choose, select an image in the list, and then click OK.

To see the impact immediately click start, find the command prompt, run as administrator, and do a iisreset.  Refresh the https://localhost/remote page locally on the box and you can see the impact.


Hmmm not quite what I wanted… so lets go back and adjust that back to the default background and try another way, click on Use default and clear out that background image.



But that’s not exactly the customization I had in mind.  If you pick background it gets put behind the log in section.  If you choose organization logo it only is shown inside the logged in RWW page.  What we want to do is put the logo on that main pre-log in screen.


Since SBS 2011 is close to SBS 2008 the instructions are similar but a little bit different than what we had to do in SBS 2008: Costas Tsaklas’ Blog » Blog Archive » Customize the RWW logo in SBS 2008:
http://costas.cpstechgroup.com/2009/01/02/customize-the-rww-logo-in-sbs-2008/


If you want to replace it with your own company logo, you’ll have to have some editing skills but it isn’t very complicated.  Navigate to the following directory in SBS 2011:


C:\Program Files\Windows Small Business Server\Bin\webapp\RemoteAccess\Customization\Product


Right-click on the “logo.png” file and select “Edit”. The file will open in Microsoft Paint, click on the “Selection” tool (arrow “a”) and then select the default SBS image (arrow “b”)


Or conversely just rename your .png file to logo.png.  Do remember to ensure your image doesn’t have the “mark of the web” if you emailed it in from the Internet to get it on the box.




Now comes the fun part you need to note the size of that logo in pixels.  The old logo had a 200×48 size.  My new logo is 232×200 in size.  We know this when we open up the files in Paint they have the exact pixel sizing in the corner.  Note how big your new firm logo is, you’ll need to adjust a setting in a css style sheet.  If you don’t edit it, your resulting replaced logo gets all squishy on the Remote Access page.



Not quite what I wanted.  Not to worry we just need to find the place in the style sheet where the image is sized up and change it.


Now go to c:\Program Files\Windows Small Business Server\Bin\WebApp\RemoteAccess\Css and find the file called logon.css.  Open it up in notepad.


 


Instead of


.product-logo
{
               height: 48px;
               width:  200px;


Adjust that section to what you need.



Change the product-logo size section to EXACTLY the pixel height and width you need.  Keep the logos small, in a png format and small in size as the bigger that logo is, the more it will slow down that home landing page.



 


Now comes a little tricky part.  Save it as logon.css to your “my documents” folder and then copy it back to the Bin/WebApp/RemoteAccess/CSS folder and approve the copying




Now when your client logs into the RWW main landing page their logo is on the left.  Very professional looking.



Well I think it looks cute anyway!



Get the idea here?


A width of 200 pixels seemed to nicely place the logo to the left of the login window.