No announcement yet.

CMS - How to get a layout like


  • CMS - How to get a layout like

    Originally written for the alpha team - things have changed since then! This is how to recreate the screenshot FROM SCRATCH. So, if you have a totally blank CMS area, like we had when we were testing the product, this is how you would go about recreating something like the screenshot on

    Here is a screenshot from vBulletin's home page showing the CMS:

    So, I decided to spend a little time to try to do it myself. Here is what I was able to do during alpha testing:
    Picture 3.jpg

    Here is what it would look like now using default settings (as I said, things have changed a lot since then!):

    So, I assume you have your site installed and you are ready to tackle the CMS.

    Set up your Home page:
    - First thing is to Publish your Home section or you will be told you have no permissions to view the page. So, Admin CP > vBulletin CMS > Section > see Home right there and change Not Published to Published. Now click on Admin CP > vBulletin CMS > Clear CMS Cache and you should not be able to see your Home page.

    - For those are are now freaking out about the (lack of) margins, go to Admin CP > Styles & Templates > Template Manager > find your Style > select Stylevars from the dropdown:
    - vbcms_widget_margin > set Left to 10. Save.
    - vbcms_navwidget_margin > set Right to 10. Save.
    That should fix it for the layout we are going to create.

    Now lets get down to some of the real stuff....

    First you need to create some Sections:
    - Admin CP > vBulletin CMS > Section Manager > upper right click on Add New Section > put in a Title. Make a few of them.

    - Publish the sections! Admin CP > vBulletin CMS > Section Manager > select Published for each of your Sections. (Although this can also be done later)

    Then, I created a few of Categories:
    - Admin CP > vBulletin CMS > Category Manager > click on upper right button New Category > then click on one of the Sections listed (should have a default section right there - my top Section is called Home, but you can click on another Section to add categories to it) and then put in a Category Title > Save

    - You can do this for several of the Sections, just click on Change Section to change the section you are adding Categories to.

    - If you then click on Admin CP > vBulletin CMS > Categories, you will see the Categories listed for a Section.

    - You may click on Change Section on the page to get the window to change Sections.

    Create some Widgets:
    - Admin CP > vBulletin CMS > Widgets > Create New Widget
    I created the following:
    1) Title: Latest Posts - Type: General Search
    2) Title: Category Navigation - Type: Category Widget (Top-Down)
    3) Title: Recent Activity - Type: Recent Activity
    4) Title: Latest Blog Entries - Type: General Search
    - But, you aren't done!!!! You need to configure them now. Go back to Admin CP > vBulletin CMS > Widgets and they will be listed.
    1) Title: Latest Posts
    - select Configure
    - under Select Type(s), select Post
    - I left the rest default
    - SAVE
    2) Title: Category Navigation - Nothing to do here.
    3) Title: Recent Activity - Type: Recent Activity
    - select Configure
    - It default selects Most Active, so I hit Cancel to leave it as is.
    4) Title: Latest Blog Entries - Type: General Search
    - select Configure
    - under Select Type(s), (scroll down and...) select Blog Entry
    - I left the rest default
    - SAVE
    One thing to notice, each of these Configure screens has the template name listed. For example in the General Search widget > Configure, next to Select Type(s) > Post, it says "vbcms_searchresult_post", so you could create your own template to use and insert the name there.

    So, onto the Layout Manager!

    Create a Layout:
    - Admin CP > vBulletin CMS > Layout Manager...
    - click on Add New Layout
    - give it a name.... My New Layout
    - grid: use the default of 3 Column Fixed-Liquid-Fixed
    Now for the fun part! Adding and moving stuff...
    - put your cursor over the top of the red box that says Primary Content. It should turn into a Hand... drag it to the center. The center box will change as you move over it.
    - How about some widgets!
    -- Select Menu from the Widgets and then the arrow > and a Gray Box will show up on the left side. I left it there.
    -- Select Category Navigation from the Widgets and then the arrow > and a Gray Box will show up on the left side under Menu. I left it there.
    -- Select Latest Posts from the Widgets and then the arrow > and a Gray Box will show up on the left side under Category Navigation. Hover over the gray bar on the top of it and you should get a Hand... drag it to the right side.
    -- Select Latest Blog Entries from the Widgets and then the arrow > and a Gray Box will show up on the left side under Category Navigation. Hover over the gray bar on the top of it and you should get a Hand... drag it to the right side under Latest Posts.

    Select the New Layout for your Section:
    - Go to your Home page on your site. Hover your cursor over the Section name and you'll see a little pencil. Click on it and you will get a new screen to change settings.

    - Settings I changed here:
    -- Layout - My New Layout
    -- Columns - 1X2 column
    -- Sections to Display in Navbar Submenu - I clicked on all of them
    -- Publish Date - for some reason it likes to pick a date in the future, set it to something today or yesterday or some date that has past (look at Publish Time also!)
    -- SAVE
    Note: If you didn't set the Publish Date and Time to something in the past, you will hit Save and then go to the page and be told you have No Permission to see it. You can fix that! Go to your Admin CP > vBulletin CMS > Sections and select Published for that Section. And THEN, hit Admin CP > vBulletin CMS > Clear CMS Cache.

    Create some Articles:
    - Go to your site and click on the Home tab. Click Create Article > Go. For this tutorial, I changed the title, used a Lorum Ispus page to generate content and threw in some images I found on google.... to add the images, click on the Insert Image Button (the one next to the Insert Email Link) and then click on From URL and input the url to the image. I left it at default to "Retrieve remote file and reference locally" and hit Insert Image. I set the following:
    -- Published: Yes for each one.
    -- Publish Date: set to the past!
    -- Publish Time: again, set to the past
    -- Section: whatever
    -- Category: whatever
    -- SAVE.
    - After you do this several times to get several articles, go to your Home tab and they should be there. You may want to go edit the Section (Home > hover over Section > click pencil) and change the order of the articles and the number of articles to show. You may also want to show more text from an article on the front page, so hover over the Article title > click on the pencil > put your cursor where you want the page break > click on Insert Preview Break and SAVE.

    - Other little tweaks I did:
    - stylevar - vbcms_article_preview_image_maxSize
    -- Size > 100
    - stylevar - vbcms_article_preview_image_margin:
    -- Use Top > Yes
    -- Top > 5
    edited 2010-01-14: I updated this to reflect the steps that would be used in vB4 Gold.
    Attached Files

    • jumbo-mumbo
      jumbo-mumbo commented
      Editing a comment
      Thanks lynne.. but this is how it looks like...
      Click image for larger version

Name:	Untitled.jpg
Views:	1
Size:	55.4 KB
ID:	3679362

    • Lynne
      Lynne commented
      Editing a comment
      You really should post in the main forums as this is not supposed to be a help area. Without a link to your site, it is impossible to figure out what is going on.

    • Pagemaster
      Pagemaster commented
      Editing a comment
      Its feature rich and I love the looks but takes some serious playing with to get it right. I found some videos on youtube that help with a few things. This software is not cheap, there should be more video tutorials on-line.
    Posting comments is disabled.

About the Author


Lynne Find out more about Lynne

Article Tags


advanced (5) android (2) api (29) array (17) attachment options (1) beginner (17) blog (4) calendar (2) center (1) cms (2) forum (3) forums (4) Intermediate (7) iphone (3) mapi (30) methods (10) mobile (34) post (1) security (2) ssl (1) style (2) threads (4) tutorial (1) vb5howto (5) vBulletin (5)

Latest Articles


  • Managing CMS Section and Content
    by Don Kuramura
    Here's a quick Visual Guide on how Manage Sections in the new CMS.

    1. Editing a Section: If you have permissions to manage a Section, as you hover over the Section title, a pencil icon will display.

    After clicking the pencil icon, you will be taken to the Section Edit page. Here's what you will see:

    2. Section Name:
    Enter the Section Name
    3. SEO URL Alias: This is the SEO Friendly URL. By default, if this is blank, the system will automatically copy the section title.
    4. Section Layout: For each section you can define an individual section layout.
    Tue 11th Mar '14, 2:04pm
  • How to Create a New Article
    by Don Kuramura
    Here's a quick visual guide on how to create a new article with the CMS.

    1. Create New Article Button: Navigate to the section you want the article to be published in. Click on the “Create a New Article” button. This will open an article form.

    2. Article Title: In the "Add/Edit Article" screen, enter the title of your article in the “Title” textbox.
    Tue 11th Mar '14, 2:04pm
  • Promoting Articles from the Forums
    by Don Kuramura
    One of the innovative new features on vBulletin 4.0 Publishing Suite is the cross-publishing "Promote to Article" functionality. In the spirit of promoting content discovery, we wanted to create features that will allow content to flow between Forums, Blogs, and Articles. For example, there might be a really popular post in the forums, but unfortunately it is buried inside page 13 of a thread. We will now have an option (if you have permissions) to “promote” a forum (or blog) post as a new artic...
    Tue 11th Mar '14, 2:04pm
  • Welcome to the new CMS. Read me first.
    by Don Kuramura
    Welcome to the new CMS. Here's a quick guide of the different areas of this page.

    1. Section Navigation Widget. This widget allows you to go to different sections. The "plus icon" means that this section has sub-sections. Clicking on the "plus icon" will display the sub-sections. ...
    Tue 11th Mar '14, 2:04pm
  • Recovering a hacked vBulletin Site
    by TheLastSuperman

    Having your site hacked is something no owner wants to experience due to the fact it takes quite a bit of effort to fix, often times requiring payment to a experienced third-party when a owner feels inundated by the sheer amount of work required to troubleshoot and remedy the situation.
    • Site has been defaced - This is the most blatant form of hacking where your sites pages have been replaced with a very disruptive and sometimes rude message from the hacker themselves.
    Tue 12th Jun '12, 1:37am
  • Issues After Upgrading
    by TheLastSuperman
    If your running a completely default forum upgrading is a very simple process. Many sites however run third-party add-ons and even use a custom style therefor when things change between older and newer
    Thu 24th May '12, 12:02pm