Welcome to Dirteam.com/ActiveDir.org Blogs Sign in | Join | Help

Customizing your blog using CSS Overrides

After you've chosen a theme for your blog you might wish to stand out with it. CommunityServer 2.1, which powers DirTeam, offers this functionality. All you need to know is a little CSS. All you need to have is:

  • A graphics editing program.
  • A DirTeam gallery or other place to store your pictures

Note
There's no such thing as messing up your blog with the tips and tricks I'm showing you in this post. The worse that could happen would be your blog showing a bit messy to a couple of innocent visitors, which can be corrected easily.

What CSS is

CSS is the abbreviation of Cascading Style Sheets. CSS files add styles to your document. Examples are fonts, colors, and spacing. CSS files allow you to edit the style of your blog’s webpage, without the need to edit the webpage itself.

The most beautiful part of CommunityServer is, you can define CSS Overrides in your Control Panel. These overrides override the settings in the CSS file for your blog theme, so you can effectively make changes to the style, while the functionality of the webpage remains.

How to retrieve your Blog’s CSS file

In CommunityServer it’s pretty easy to retrieve the Cascading Style Sheet, belonging to a Blog theme. All you need to know is the name of the blog theme folder. You can then direct your browser to the following path:

http://hostnameofthewebsite.tld/themes/blogs/themename/style/style.css

When you’re using the paperclip theme on the DirTeam.com / ActiveDir.org Weblogs this string looks like:

http://blogs.dirteam.com/themes/blogs/paperclip/style/style.css

You can now see the contents of the Cascading Style Sheet (CSS file) that applies to your blog.

Understanding CSS

Now that you have access to the contents of your CSS file you can see how it defines the different elements on your blog’s webpages it provides style to. The way to read the contents of your CSS file is:

body { background-color: #5a543a; }

Selectors specify which elements are to be influenced by the style rule. As such, selectors are the glue between the structure of the document and the stylistic rules in the style sheets. In the example above, the "body" selector selects all body elements. More complex selectors can select elements based on, e.g., their context, attributes and content.

All style sheet languages have some concept of properties that can be given values to change one aspect of rendering an element. The "background-color" property of CSS is used in the above example. Common style sheet languages typically have around 50 properties to describe the presentation of documents

Overriding CSS

Within your Blog’s Dashboard on CommunityServer you can define CSS Overrides in much the same way your CSS file is constructed. This functionality can be found when you go to manage your blog, expand Global Settings on the left, select Change How My Blog Looks and go to the CSS Overrides tab.

An example of how you could change the header picture for a Paperclip-styled blog is by providing the following CSS override:

#masthead {
  background-image: url("http://hostnameofthewebsite.tld/picture.jpg");
}

This piece of code and the 804px by 221px picture it points to effectively transforms your blog’s theme to anything you’d want it to be.

Concluding

You should now have enough information to transform your blog. Enjoy yourselves!

Starting your blog

Congratulations!

You're the proud owner of a brand new blog on DirTeam.

To give you a head start this blogpost provides some useful tips on making your first post, changing the look and feel of your blog, places to look for interaction with your readers and ways to write posts.

  

Making your first post

Your first post should be the easiest post you ever have to write, but somehow most people find it the hardest. Here's a little advice on writing your first post:

Tell something about yourself.

That's all you have to do in your first post. Since you're the expert on this matter it should be very easy! You don't have to give out really private information (no-one's interested in your password) if you don't want to, but giving some insight on the person behind the blog might make people want to read your blog.

Simply stating your name and occupation might suffice, but to make things really interesting you could write down the reason why you're blogging ("sharing information", "helping people", "doing right", "saving the world", etc) and who hooked you up on blogging.

Don't make your first post any harder than it needs to be though. If you're not sure what you're going to blog about, leave it out or keep thing globally ("I think the information you're going to find here will be Active Directory related") If you're not sure how much posts you're going to write per month, don't give any estimates. Pressuring yourself might only result on writers block.

  

Changing the look and feel of your blog

Homo Sapiens, compared to Homo Neanderthalensis is known for changing his surroundings to his needs.

DirTeam uses CommunityServer 2.1 at this moment. This is a versatile platform for bloggers. There's much freedom to change the look and feel of your posts. One of the most profound ways to customize the look and feel is choosing a theme and setting the Title and Description for your blog.

By default every new blog has the Default blog theme and the default name applied. You can change the default theme to any of the roughly thirty other themes available. You can change the title and description of your blog to anything you like.

To change the way your blogs looks follow the steps below:

  1. Log in with your DirTeam username and password on the top right corner of any DirTeam page
  2. A new menu item called Control Panel appears. (On your own blog the link is called My Blog Dashboard). Follow the link.
  3. If this is the first time you enter the DirTeam Control Panel select your blog as the blog to manage using the Select a blog to manage link under My Blog(s). Your choice is stored in your cookie.
  4. Under My Blog(s) follow the link called Manage 'YourBlogName'.
  5. On the left menu expand Global Settings.
  6. To change the Title and Description of your blog click on the Title, Description, and News button. To change your Title and Description type what you want it to be and press the Save button.
  7. To change the Theme for your blog click on the Change How My Blog Looks button. On the Skins tab choose a theme. You'll find themes in the drop down box. Selecting a screen will display a screenshot of the theme. Press Save when you've selected a theme to your liking.
  8. Use the Exit Control Panel and Return to Site button to return to the DirTeam website and inspect your new settings. (Applying settings may take up to 10 minutes.)

When you get bored with your blog theme you could opt to change the Background Image of your Blog Title and Description like Natasha Mocke has done. (more on that in another post soon) Another option is to write a higly customized theme from scratch like I've done. (the Unspoken theme)

   

Look for interaction with your readers

The Control Panel is also very useful when you want to interact with your readers. You might check on every post you write to see whether people left comments, but when you've been writing posts for a year you might lose track of certain posts and thus certain comments.

The Control Panel offers the ability to see how many readers have read a certain post, how readers reach your posts and what comments they've left behind for your amusement. This interaction is one of the most pleasurable aspects of blogging.

To see how many readers have read certain posts enter the Control Panel and Manage your blog. Click on the Manage Content menu item on the left and select All posts. The Views column tells you how many views a specific post has had in peoples browsers. The AggViews column tells you how many times a post is viewed outside of the context of DirTeam. Examples of this views are views in RSS readers.

Tip!
Looking at the posts with many views might indicate which posts are interesting to your readers. Perhaps looking more into the subject might be useful to your readers.

In the same list with All posts you can actually click on the values in the Views column. This function zooms in on the origins of the visits of the specific blog post. Using the drop down box on the right at the top of the list you can select other posts or All posts. The information you gather this way will tell you whether your posts are indexed on Search Engines and whether other sites and bloggers are pointing to your blog posts.

Underneath the All posts button in the Manage Content menu is the All Comments button. This way you can see all the comments and trackbacks people and other sites leave behind. You can Unpublish certain comments you find inappropriate for your blog using the unpublish button on the right to every comment. You can also view the comment below the original blog post so you can comment back and engage in discussion with your readers. Very useful!

  

Ways to write posts

The Control Panel also allows you to write posts. Let's not forget!

Using the Write a blog Post button in the Common Tasks menu, you can write blog posts in the web interface. Unfortunately this is not the most friendly way to write posts. Windows Live Writer is a much more appropriate tool for the job. I suggest you check it out.

   

Concluding

Now that you have a blog go use it!

What are you still doing here? Come on! Enjoy yourself! Cool

Using Windows Live Writer on the go

Being employed by an employment agency results in much experiences to blog about. Not always being able to write with your favorite tool might be a little pain in the behind and might even hold you down.

As an employee of such an agency you frequently meet different environments with different needs, problems, challenges and projects. These different situations make you explore a lot of different environments. Not all of these environments allow you to plug your laptop into the network (if you have one) or use the Internet without the intervention of a proxy server.

Using Windows Live Writer in these environments might be tricky, to say the least. Fortunately there is a solution in the form of U3 technology. Here's how to set it up, use it and enjoy it. I hope this information will make you even more efficient in your blogging.

In this post I'll assume:

  • You're already using Windows Live Writer.
    (else: install it on your computer)
  • You've updated your U3 version to the latest version

  

Introducing U3

U3 Technology allows you to launch applications from specially formatted USB flash drives. This technology allows you to install an application to the flash drive (instead of on the hard drive) and use the application by simply sticking the USB stick in the computer. It works on Windows 2000 (SP4) and beyond. After a restart (not needed in Windows Vista) the application can be used without the need to have have administrative rights and without the need the need to install the application.

The technology works by placing a 7 MB Read-Only CD-Rom drive partition on your USB Drive next to the data partition you find on every USB Drive.

    

Getting a U3 smart drive

Your USB flash drive should be U3 enabled before you can use it. U3 enabled USB drives are called U3 smart drives. I've bought a SanDisk Cruzer flash drive with this option enabled, but you might be able to find cheaper U3 smart drives.

      

Installing Live Writer Portable 2.0

Step 1

Start with downloading WLWPortable2.zip by Scott Kingery.

Step 2

Extract the contents of the ZIP file to your local hard disk. Go the the folder where you extracted the files in. Open the App subfolder and then the WindowsLiveWriter subfolder. In another Explorer screen open your Windows Live Writer installation folder (typically C:\Program Files\Windows Live\Writer).

Copy the contents from the Windows Live Writer installation directory (and subdirectories) to the extracted WindowsLiveWriter folder.

Step 3

Insert your U3 Smart drive. Run the U3 LaunchPad.
Click on the Install Programs >> button and select Install from My Computer.

Browse to the folder in which you extracted Windows Live Writer Portable using the U3 LaunchPad browse window. Select the WindowsLiveWriter Portable.u3p as installation file.

Step 4

Walk through the steps of the Add Program Wizard to install the application. (Next, Next, Done)

Step 5

Run Windows Live Writer Portable for the first time. If the program asks you to copy additional files, do so.

Step 6

Your Windows Live Writer drafts and recent posts still reside on the Hard Drive of your computer. You can easily move them to your USB Drive.

Your drafts and recent posts are stored in subfolders of the My Weblog Posts subfolder in your (My) Documents folder in your profile. You can move them to your USB Drive. After copying them open your Windows Live Writer Portable again and point to the new location.

   

Concluding

Get an U3 smart drive and enjoy Windows Live Writer and many other utilities like PuTTY and FireFox on the go.

It is technologically possible to use Windows Live Writer without U3, but in my opinion U3 makes the experience A LOT smoother. What do USB drives cost today anyway?

Further reading

Windows Live Writer Portable 2.0 Now with U3 
Windows Live Writer Plugins 
Download Squad: Windows Live Writer Portable lets you blog on the go 
Portable Apps: Windows Live Writer 
Sarah in Tampa (On10): Windows Live Writer Goes Portable
Windows Live Writer Plugins on Codeplex

Posted by Sander Berkouwer | 0 Comments
Filed under:

Using Tags/Keywords in your blog

To create Tags and/or Keywords so that you can help people and the search engine find and catalog your blog entries better, you can use tags and/or keywords. To create and use Tags or keywords follow the easy steps below:

 

Step 1 Go to > You Blog Dashboard > Manage Content (on menu) > Tags/Keywords <> left Click

Step 2 Left Click > Create New Tag

 

Step 3 Fill in text boxes in the dialog that pops up (1 and 2) > check "Enabled" (3) > Click Save (4)

 

Step 4 When creating a blog entry go to the bottom of the page > left click > "Select Tags..."

 

Step 5 Check the check box that represents the blog entry that you are about to post (1) > left Click OK (2)

 

You are now Tagging ;)

Carlos Magalhaes

Posted by carlos | 3 Comments

How to add the MVP logo to your blog

Alot of the Active Directory MVPs that blog on this community blog site, have asked me how they can put the MVP log on their blog. The image below shows how you do it. Each step is depicted by a number (in the image):

Step 1 When you logged in and at your blog, above the text where you add an "New Entry"  there is a link called "My DashBoard". Click on that link and you will be redirected to "My Blog" tab in your dashboard.

Step 2 Click on "Global Settings" then on "Title, Description and News"

Step 3 Locate the "News" text box

Step 4 Add the text you see at Step 4 in the (image below) to the "News" textbox

Step 5 after "...../images/" add the text you see in the call out on the (image below).

Step 6 Click save (bottom right hand corner of the page)

Step 7 Go to your blog and you should see the MVP logo image on your blog :)

I didnt add the MVP logo but I added a little image of myself (you usually see that image on my IM) you can see what it would look like here. 

Enjoy

Carlos Magalhaes

Posted by carlos | 1 Comments

How to use Live Writer

This really cool bit of software is excellent for posting blog entries to dirteam.com. I have always been looking for a better interface than the web interface. You can write your blog entries here and save them into drafts as well.

I had a few complaints about long posts going missing while the web session timeout. With this cool piece of software you can write and save to drafts, and then post when you ready.

You can download it here and its free. It is in beta but todate I have not had any issues. Below are some screen shots on how to set it up (It can be tricky). I went through the pain so you don't have to ;).

I will be creating a help blog with all the little topics for the bloggers on this community. I will also include these screen shots there.

The unfortunate part is that they still haven't hooked the CS image model in to the writer but I have found a work around for it.

Upload your photos as you usually do, once the image has been uploaded click on the image. If you look on the address bar you will see a URL to the image. Copy that URL. In Live Writer use: Insert > Picture From Web > Paste the Image URL into the dialog and press ok.

Step 1 Upload photo

Step 2 View Photo

Step 3 Select Photo

Step 4 Copy Url

Step 5 Insert URL into Live Writer

This then links the image to your blog post :) this is what CS does in the background in any case :)

 

Now to setup Live Writer:


Step 1 Login Details

Step 2 Select the Type of blogging engine

Step 3 Specify the metablog name

Step 4 Allow it to download blogs and select your blog

Step 5 It will attempt to login and you are finished

Enjoy, I will mail the Live Writer team and ask them if there are plans to integrate the CS image model into live writer.

 

Live Writer (And yes i did take into account that it is still in beta)

Likes

  1. Simple interface
  2. Can save drafts
  3. Nice looking interface
  4. Supports a wide range of blog engines (check step 2 in the live writer setup)
  5. Small install footprint

Dislikes

  1. If you insert a large image it does not expand the writting page i.e. the image flows off the writting surface
  2. CS image model not intergrated so you have to use my workaround above. This can be slow and irritating!

 

Carlos Magalhaes

Posted by carlos | 4 Comments
Filed under: