BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
How to Center Your Blog
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Thu Mar 17, 2005 7:29 am    Post subject: How to Center Your Blog Reply with quote

BlogHarbor weblogs feature a variety of templates, also referred to as Themes or Color Schemes, which control the look and feel of your weblog.

Each Color Scheme is in fact a CSS stylesheet (read more on CSS or Cascading Style Sheets here) which controls the color, positioning, fonts, and overall style of your blog.

By default, all of our templates present your blog at the full width of the browser window. This means that regardless of the size of your user's computer screen, each page on your blog will be as wide as the browser window itself.

Some weblog publishers might prefer a different approach, for either aesthetic or practical reasons. For example, it might be preferable to fix the width of the main blog design at a certain size, in order to integrate a banner on the header of your page.

On our BlogHarbor site, and on this forum, we fixed the main table at a width of 750 pixels and centered it in the browser window for no other reason than we liked the way it looked.

We previously published some instructions for fixing the width of your blog's main table and centering it horizontally in the browser window, but those instructions did not compensate for a bug in Internet Explorer's implementation of the CSS standard which did not allow the table to be centered properly. These revised instructions will allow you to center the main table properly in all of the major web browsers: Mozilla, Firefox, Internet Explorer, and Safari. To achieve this effect, please follow these steps:
  1. Login to your Blog Admin Control Panel through the Login page.

  2. Click on the Look and Feel tab, then the Templates subtab.

  3. Now you see a list of the Templates you can customize. We are going to customize the style template, which controls the CSS or Cascading Style Sheet, so click Edit in the row that begins with the word style.

  4. Now you'll be on a page listing the current Styles, go all the way to the bottom and click the Customize button.

  5. You'll come to the page where you can customize the CSS. The top box contains the CSS used to create the current style. It can not be modified, but you can add your own custom styles in the bottom box. Your custom styles can be new CSS classes which you will use in your articles or in your custom base template, or they can override aspects of the existing classes. In this example, we are going to override the style of the main table, and make a few other changes in order to workaround some issues with the Internet Explorer web browser... Enter the following code exactly into the bottom box and click on the Save CSS button:
    Code:
    /* This would be all we need for standards compliant browsers like */
    /* Mozilla and Firefox */

    table.columns {
       width: 750px;
       margin-left:auto;
       margin-right:auto;
       text-align: left;
    }

    /* This is necessary due a to bug in Internet Explorer */

       text-align: center;
    }

    /* These next 2 classes are modified due to the way the Open Blue, */
    /* Viridity, and Minimalist group of classes set the position to be */
    /* absolute which skews the articles in Internet Explorer but not */
    /* in Mozilla or Firefox... */

    .article {
        position: static;
    }

    .articleBody {
        position: static;
    }

Your main table should now be 750 pixels wide and centered on the page regardless of which Color Scheme you have chosen for your blog. And it should look similar on all of the major web browsers!

Note: if you're using one of the new color schemes introduced in Summer 2005:
  • Beach
  • Cranberry
  • Greybeard
  • Lime
  • Midori
  • Pale
  • Prince
  • Shore
  • Spring
  • Whiteout
the technique described here will have no effect, as your color scheme already implements this fixed-width, centered style.


Last edited by john on Thu Jan 26, 2006 10:54 pm; edited 4 times in total
Back to top
View user's profile Send private message Send e-mail Visit poster's website
bucksrugby



Joined: 10 Nov 2005
Posts: 20
Location: Singapore

PostPosted: Mon Nov 28, 2005 6:09 am    Post subject: hanging left Reply with quote

I followed these instructions as best I could. I'm using a 3 column CSS style. I got the page to bunch together the way I want. But I can't get it to centre. Can you have a look at our custom CSS sheet (based on slashdot) and tell me what to change to centre the site? www.bucks-rfc.com

Thanks...
Back to top
View user's profile Send private message Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Mon Nov 28, 2005 6:52 am    Post subject: Re: hanging left Reply with quote

You'll need these atttributes:

Code:
margin-left:auto;
margin-right:auto;


in the table.columns class.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum