This is the second post in a series on the jQuery UI CSS Framework. Here’s the first one.
Today I’ll show you how to create a nice looking box that has sort of a widget appearance to it. The jQuery UI components already provide similar functionality. For example, the Dialog Box is quite pretty, and you can easily make it modal or not. But frequently we want to make a box for content somewhere on a page- much like the sorts of boxes that appear on Wordpress blogs, Drupal sites or iGoogle, for example. The jQuery UI CSS Framework comes with selectors that make this easy. Also, remember that one of the benefits of the UI framework is that you can easily change the theme of your site, without having to touch any markup or CSS – you simply change the path of the external theme css file to point to another directory. Again, the examples I’ve made use the Redmond theme. Here’s the markup for a simple box with a nice heading:
<div id="mybox" class="ui-widget ui-widget-content ui-corner-all" style="margin-top:20px; width:300px; height: 150px;">
<h3 class="ui-widget-header">Weather Widget</h3>
<p><span class="ui-icon ui-icon-comment" style="margin: 0 2px 0 2px; float:left;"></span> Tomorrow it will be light during the day, and dark at night.</p>
</div>
It’s rendered (in FireFox) like this:
As you can see, the markup is pretty simple. I’ve given the container div an arbirtrary width and height. You might want to specify a width, but omit the height s that the div just stretches with your content. Let’s look at the classes used for the div, the heading (h3) and the image respectively:
The div tag: The class .ui-widget ensures we use a consistent font family and size for the content inside it. It also applies the 1.1em rule. Combined with the css selector : body {font-size: 62.5%} this initially yields a font size of 11px at typical screen resolutions. This whole 1.1em thing can be a bit of a problem, as I’ve discussed in other posts. For example, if I embed another container using the same selectors, my text comes out at 12.1px (1.1x 1.1em). You can inspect your element with Chris Pederick’s Web Developer plugin for FireFox to see bad behavior at work. For example, see below:
Font size for second container text is now 12.1px, not 11px.
I ran into this in an app where I had tabs embedded inside tabs. The jQuery UI code applies the .ui-widget class to tabbed content containers behind the scenes, so I ended up with oversized text compared to the rest of my page.
The class of .ui-widget-content applies the border, along with some padding. the .ui-corner-all selector gives us rounded corners (in FireFox and Chrome, not IE).
The h3 tag: This uses the class .ui-widget-header. This is pretty self explanatory. It applies a nice background on white text (based on the Redmond theme) to our heading. You can use this class on other tags, too. For example, I use it on tr tags for my table heading rows.
The image (span) tag: (.ui-icon and .ui-icon-comment). I just threw this in as a bonus for this lesson. jQuery UI is very clever at handling icons. Instead of having a whole bunch of images, you basically have one big image sliced into squares, with each icon class being a small window over the appropriate square. This is a variation on the famous Sliding Doors sprite concept at A List Apart. It saves different image resources having to be loaded, to optimize performance. It also allows the icons to be themed easily, because you don’t have to change the path for an image, as you would for a typical HTML img tag. You can also apply a hover state to any icon in the set, simply by setting the class to .ui-state-highlight. We’ll cover this in more detail in a later article.
In this case, I used a span tag to display the comment icon. This could also be an anchor tag, or a li tag, or whatever. The .ui-icon class gives us a 16 x 16 pixel area blocked out for whatever icon we choose. The .ui-icon-comment class displays a comment icon (similarly, .ui-icon-trash shows a trash can, etc. etc.). You can see the entire set of available icons at the Themeroller page. The default setting for .ui-icon is display:block, which forces a line break, which is why I had to add an inline style setting of “float: left” to get it to appear on the same line as my text.
That’s it! the next article will show you how to style pretty forms elements with the framework.
Google provides two simple ways, other than you writing your own client code to talk to their APIs, to embed a calendar in your web page. One method is easily found by Googling for the info. This link explains how you can generate a piece of code directly from your calendar settings page, which you then paste into your page. This code uses a simple iframe. The other method is to use a Google Gadget. While they are primarily meant to embed in iGoogle, you can also embed them in your own site. Here’s how:
Log in to the Google account that owns the calendar you want to embed.
Make sure the sharing option is set to public (if that’s truly what you want!)
Go to this URL: http://www.google.com/ig/directory?hl=en&url=www.google.com/ig/modules/calendar3.xml. This is a Google gadget. Note the last part of the URL – calendar3.xml . DO NOT use calendar.xml . It doesn’t work any more (as I found out to my chagrin when the calendar for our local soccer club web site suddenly stopped rendering for no apparent reason).
You’ll see a link in the bottom right hand side of the page, titled: Embed this gadget >> , which means ‘Embed this gadget in some page other than at iGoogle’. Click on this link .
Customize the gadget’s appearance with the available options. You should see the changes you make reflected immediately. If not, click ‘Preview Changes’.
Once you are happy with the final appearance, click ‘Get the code’
Select the generated code in the text box, copy and paste it into your page.
The gadget uses an XML feed via web services to draw the content directly in the page, as opposed to using an Iframe, which for a Geek like me is a much more elegant solution than more easily found one. Plus, I like the fact you get a monthly calendar with a list of upcoming events directly below it. (When you customize the gadget’s appearance, change the height to 400px, for example, and you’llsee what I mean).
This is version 1.0.1. It corrects a bug where the ‘above’ and ‘below’ options did not work, and it also lets you place a message immediately above an element, with the left side of the message area aligned with the left edge of the element itself. I have also updated the demo page to include a demo of using the ‘above’ option, and to style the buttons using the jQuery UI CSS framework. I’ve also update the link to the zip file to download, on this page, to point to the new version.
This plugin lets you write feedback messages anywhere on your page. I usually use it to provide some response from an AJAX call.
This is the first in a series of articles on the jQuery UI CSS Framework.. This is a powerful suite of CSS selectors that you can use to build web applications with a consistent UI. The main jQuery UI demo page shows you a list of UI widgets (which are still somewhat limited in scope compared to ExtJS, for example), but it doesn’t do a very good job on selling you on the benefits of designing other UI components, or components of those widgets, using the UI CSS framework. In this article I explain the framework, its benefits and weaknesses, and show you one simple example of styling a button.
What is the jQuery UI CSS Framework?
It is a set of CSS selectors that let you design your web pages to conform to the jQuery UI widgets standards. Quote:
The jQuery UI CSS Framework provide semantic presentation classes to indicate the role of an element within a widget such as a header, content area, or clickable region. These are applied consistently across all widgets so a clickable tab, accordian or button will all have the same “ui-state-default” class applied to indicate that it is clickable.
Here are the top benefits I think the framework has to offer:
It handles difficult design issues for you. For example, you can apply rounded corners to buttons and links easily, just by adding a class of ”ui-corner-all” to your element.
It gives you a consistent look and feel to your page design elements
You can use the jQuery UI widgets (such as tabs, dialog boxes, accordions, etc. in conjunction with your own custom elements (text, tables, buttons, boxes, icons, etc.) and get the same look and feel for both.
The UI is skinnable. You can use Themeroller to roll your own theme, or select an existing theme. For example, I’m using the ‘Redmond’ theme in an application I’m currently building. You can see the Gallery of themes by clicking the ‘Gallery’ tab in the top left corner. The gallery also shows you what the standard jQuery UI widgets look like. Unfortunately it doesn’t show you other common design elements- but that’s why I’m blogging!
You can easily switch to another theme just by changing a single path reference in your applications. You can see this at work by using the Themeswitcher widget, which is easy to embed in your page (just remember you will be connecting to the jqueryui.com website when you use this widget).
Downsides to the Framework
The framework is not without its weaknesses, some of which, over time, I’m sure will be addressed. The major ones I see are:
Poor documentation of the purpose behind each selector. For example:
.ui-helper-clearfix: Applies float wrapping properties to parent elements
. What exactly does this mean? And where would you use it? I think I’ve figured it out, by trial and error, but couldn’t the authors write something more meaningful?
Reliance on em as the unit of measure rather than pixel. I realize there are lots of advantages to this, but it has its drawbacks too- most notably, when you nest some UI elements you can end up with different font-sizes, due to the use of 1.1em in some cases (this is a multiplier, so in my app I have 1em applied, which results in a font size of 11px, then I have a tab with content. The text in that content comes out at 12.1px (1.1em). If you don’t understand em versus px, try this article. Also, see my post on using 62.5% on a body CSS selector..
Incomplete framework. Most notably, tables are not addressed. (I use tables to present database information in business apps). Tables fall outside the regular cascade rules, it seems, so the font size for table content is screwed up. I suggested a simple fix of adding the word ‘table’ to a selector, but that got dismissed as too specific. So whenever you use a table in conjunction with the Framework CSS, you’ll have to add a customized CSS rule, such as this one:
.ui-widget table { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }. I could rant about this, and may do in another post… Other selectors are missing, too, such as alternating row colors for table zebra striping. Perhaps they will add this to the Themeroller app, as well as to the CSS Framework API specifications.
Sometimes you need other CSS to make things look like they do in the online examples. I ran across this with the Dialog example that shows a form. The form looks really beautiful, but it actually uses several additional selectors besides the ones included in the Framework CSS. I don’t really think there’s much of a technical alternative here, but it’s something you need to be aware of.
How To Learn About The Framework
I learn about how to use the framework by using the following strategies:
Try out the widget examples and do a ‘View Generated Source’ or ‘Inspect Element’ with Firebug. This shows you how the UI Widget developers utilized the CSS framework. For example, I noticed that the Dialog widget shows really nice looking Ok and Cancel buttons, so I inspected them to see which CSS rules had been used. (See my example below).
Here’s a simple example of using the CSS selectors to style a button. I’m using the Redmond theme here.
I assume you know how to install the jQuery UI library and CSS. You can grab it here.
Here’s the code:
<style>
body {font-size: 62.5%}
</style>
<button id="cancel" type="button" class="ui-state-default ui-corner-all">Cancel</button>
Here’s what it looks like:
jQuery UI button in FireFox
jQuery UI button in Chrome
jQuery UI button in IE
As you can see, FireFox and Chrome each do a nice job of rendering the rounded corners, while IE 8 still doesn’t support this feature (at least, not with CSS).
Explanation of The CSS
I’m using two classes on the button element. This is a common coding technique when using the jQuery UI CSS framework. It results in combining the various selectors of each style in an accumulative manner. The ui-state-default class “Applies “clickable default” container styles to an element and its child text, links, and icons.” For example, we could apply this to a link and get essentially the same effect. This class includes a background image that provides the button coloring. As I mentioned earlier, if you change the theme used in your app, the button will appear in the color of that theme.
The ui-corner-all selector applies a radius (rounded corner) to each of the four corners of the button border. That’s it!
Next Article
In the next article I will show you how to style a div to create a nice looking box with a heading in it.
I finally Googled to find an answer to this simple problem, which is:
When you load pictures in Picasa, it cleverly rotates them the correct way. However, Picasa does not change the underlying originals (look at them with Windows Explorer if you don’t believe me). So when you synch or stream these pictures on your Apple TV you’ll see the audience’s heads turn to one side in unison every so often, to view a sideways picture. The solution is simple, and is recorded at Google’s support site: click in the folder of pics you want to view on your Apple TV, then click the ’save edited photos to disk’ icon, which looks like a diskette – just to the left of the ’share’ button.
This has saved me a ton of time compared to having to rotate the images manually. Why didn’t I research this earlier?
I just recently used jQuery UI tabs in an application. Within a couple of the tabs I used tables for content (let’s not have a religious debate about using tables for layout, please). Anyway, the font size came out much bigger than for text in a paragraph, for example- in FireFox. I looked at the custom.css file (generated by themeroller, called jquery-ui-1.7.2.custom.css) and found this line:
This line is designed to handle form input types, to make sure the font size matches text in other tags such as paragraphs, etc. However, text in tables also needs to have these rules applied. To fix the problem, I copied this line and added table as a descendant selector, like so:
I just moved a Joomla 1.5 install from my iMac to a hosted site. The home page showed up fine, but subsequent pages were missing all styles. It turns out that I needed to change the variable $live_site in configuration.php from ” to = ‘http://www.example.com/mypath’. I’m not clear on why it worked on my MAMP install but not on the ISP, but apparently this is a common Joomla 1.5 install problem, as noted at this Joomla forum thread. (Scroll down to see Anthony Ferrara’s (aka ircmaxell) response on Feb 21, 2008 – ignore all the other bogus parts of the thread). Anthony is apparently a member of the core development team, on the bug squad. Thanks, Anthony!
Aptana now uses the official Eclipse PDT (PHP Development Tools) plugin instead of their own PHP editor. I have Aptana 2.0.2, build date November 10 2009 on my Macbook. I’m building a Drupal module, so I need to have PDT recognize (and correctly color-code) files with .module, .info and .install extensions. There is a Drupal Article on configuring PDT as an Eclipse Plugin, but the steps are different for doing it in Aptana Studio.
The process is quite simple – basically 3 steps. Here they are (assuming you’ve got the PDT plugin installed already):
In Aptana Studio, click on the Aptana Studio/Preferences, expand the General link and click on Content Types:
Next, expand the Text link. This will show you a list of content types supported in the editor. Scroll down until you see the PHP entry:
You’ll see the usual PHP extensions listed in the bottom box, such as php, php3, php5. Click on the Add button to the right to add an extension needed for Drupal Module development. You’ll see a dialog like this:
Click OK. Repeat this step for *.info and *.install (assuming these extensions are not already used for some other language or tool). That’s it! Now, when you open a .module file, it will have the same color-coding and editing as a .php file.
This is a continuation of the previous post that explained how to create a custom content type called News, and show News items using the Views module.
Creating A News Page with a Monthly News Archive Block
This post explains how to create a page showing just the News content type, how to link that page to the Primary menu, and how to show a block with a list of archived News items. It assumes you’ve already followed the steps in the previous post.
We accomplish all these tasks using the Views contributed module.
First, we use the Views module to create a page view to show most recent 10 news items on the page, as follows:
Select ‘page’ in dropdown box, click ‘Add Display’. This is what creates a whole page, instead of a block, for example.
We want the user to be able to page back and forth through each set of 10 news items, so in the first column, click on ‘no’ next to ‘Use pager’ . Scroll down to the radio buttons for this option and click on ‘full pager’.
Next, we’ll repeat a lot of the steps we took for creating a block view – selecting the fields for the view, and the filter to choose only published News content:
Click on the ‘+’ sign next to Fields. Scroll down and select Node: Post date and Node: Title, then click the Add button . The next steps take you through more options for each of these fields.
Remove the label of ‘Post date’ (clear the text). This prevents the words ‘Post date’ showing next to the date. Click ‘Update default display’. You should now see an interface asking you to configure the field ‘Node:Title’.
Remove the label of ‘Title’ (clear the text). Check the box ‘Output this field as a link’ , scroll down and check ‘Link this field to its node’. This makes the News item’s Title a clickable link that links to the full article (node). Click ‘Update Default display’.
You should see a ‘Live preview of all content you’ve created. Let’s filter it by ‘news’ only.
Cick the ‘+’ sign next to Filters. Scroll down and check Node: Published and Node: Type. These options let us choose to display only Published content (Node: Published = Y), and only news (Node: Type = ‘news’). Then click Add.
Select ‘Yes’ for Published items, click Update, then select ‘Is one of’ and check ‘News’, then click Update.
Now let’s sort the news items by most recent first (descending order). Click on the ‘+’ sign next to Sort criteria.
Check Node: Post date, click Add.
Select Descending, click Update.
Let’s place this page on the Primary Menu. This is the menu that (generally) appears at the top of your page, depending on your active Drupal theme.
Scroll down until you see the heading Page Settings in the first column.
Click on None (next to Path), and type: news . This is appended to the rest of your site’s url to make the full path for this page. We will also refer to this name when we create our News Archive block.
The next option lets you link the page to a menu item:
Click on ‘No Menu’ (next to Menu)
Scroll down and click on Normal menu entry. A set of input controls appears to the right of this option. Proceed…
Type the title for this menu entry. I chose ‘News’ because I like short menu item text, but feel free to choose whatever you want- perhaps, Latest News.
Type a description. This appears when a user hovers over the menu item. It might appear somewhere else, too, I’m not sure.
Click on the dropdown box under the word ‘Menu:’
Select Primary Menu. That’s it!
Finally, click the Save button (just above the words ‘Live Preview’.)
Create The News Archive Block
Ok – the next step is to create a block of Archived news articles – much like the standard Archive block that comes with Drupal. The only difference is that block includes all content types, while we want to include just our news content type. So this is really easy- we clone the existing Archive view that comes with the Views module and just add a filter to include only news content. Here are the steps in detail:
Go to Administer/Site building/views again.
Look for the existing view called Monthly Archive (it has a path of archive) – it’s the first one in the list in my install of Drupal. Click on the Clone link on the right.
Change the view name from archive to newsarchive, and change the view description similarly.
Click the next button to continue on to configure the block view.
Add the filter for news content only:
Click on the + sign next to Filters. Scroll down to see the list of available filter fields, find the Node: type field, and select it.
Scroll down to configure the Node type and select the news content type.
You can click the Live Preview button now, and you should see something like November 2009 (9) – at least that’s what I see, because that’s the only month I have any news items published in. If you haven’t written any news content yet, then nothing will show here.
Before we exit this page, there is, as Columbo would say, just one more thing. You may have noticed that the Archive list we cloned has 3 vertical tabs on the left – Default, Page and Block. In the previous steps we were changing the default settings, which essentially ripples them through to both the Page and Block settings. Personally, I intensely dislike this interface. It is quite confusing, because different options appear depending on which tab is active, and it’s not self-evident which tab is active. Anyway, we are going to make a minor change to the block view, so click on the block tab .
Scroll down until you see Block settings. If you do not see this heading then you did not click on the block tab in the previous step, so try again!
Click on the text next to Admin, and type ‘News Archive List’ . This is text appears when we are placing blocks on our pages, and if we don’t change it we will have two blocks with the same title – the one we cloned from, and this one – which makes it a pain to know which one we want to place somewhere.
Save your work – click the Update button, followed by the Save button below it.
Place the News Archive Block on The News Page
You may want to place your News Archive block on every page, but just for the sake of this tutorial, let’s place it only on the news page.
Go to Administer/Site Building/Blocks
Find your News Archive List block. It should be in the list with the heading Disabled, the last list on the page. Click on the Dropdown box next to it, and select the area on the page you want it to appear. The names of the areas will depend on the active theme you are using. There may be one called ‘right sidebar,’ which would be appropriate. If not, choose some other area.
Scroll to the bottom of the page and click Save Blocks (IMPORTANT!!! – click Save Blocks before doing the next step – otherwise you may lose your ‘change’).
Ok – now you have to find your block in the lists on the page, because it has moved from the ‘disabled’ list to whatever area title you chose. Once you find it, click on the Configure link.
Scroll down to Show Block on Specific Pages, click the ‘Show on only the listed pages’ radio button, then type news in the text area below. (news- not News, not ‘news’, not <news>). If you recall, this is the node name of our news page, which we specified when we created the News page view (above).
Save your work.
Ok – we are done.If you go to my Drupal sandbox site, you’ll see the News menu item at the top. Click on it and you’ll see some bogus news items, along with the News Archive List in a block on the right hand side. Notice that this block only appears on the news page, as per our specs.
Whew- this is a lot of text to explain something reasonably simple. Maybe next time I’ll make a youtube video instead.
Drupal does not come with an out-of-the-box news content type. You could use a story or a blog entry, but these are not an exact fit for what I wanted. Fortunately, it’s pretty easy to create your own ‘News’ content type. You probably have your own idea of what a ‘news item’ should be, and how it should display. Here are the features I wanted for news items:
Requirements
News items to be their own ‘content type’ so I can create user roles just for posting news items.
Latest 5 news items to show in a block on the first page.
Separate ‘news’ page that lists all news items, most recent first, with paging (eg. show 10 at a time).
‘news’ page should be a Primary menu item
List to show date of item and title of item, with the title being a link to the full article
News items to support ‘teasers’
Have an Archive block on the News page to show an archive of news items by month
Summary of Process
Here’s an overview of how you do it, followed by detailed instructions.
Install Views contributed module (if you haven’t already done so).
Install Advanced Help module (this provides a great example of using Views to create a block or page that presents lists of information)
Create a content type of ‘news’
Check the options to add, change or delete own news items for the appropriate users or roles.
Create a ‘block’ view to display news items
Place the block somewhere on the first page
Create a ‘page’ view to display news items. You choose which Primary menu item you want to use for this page when you create the view.
Create an ‘archive’ block view to display archives by cloning the provided Archive view and changing it
Place the archive block somewhere on your news page.
Details For Creating The News Block
(In order to get this post published, without being too long, I’ll explain in another post how to create a separate page of news items with teasers, and how to create the Archive block.)
Install Views and Advanced Help modules. Views is one of two very popular contributed (non-core) modules. CCK (Custom Content Kit) is the other one- it lets you create your own data values or content types. Views lets you display lists of information from the Drupal database. It’s essentially a user-driven SQL statement generator, along with some list formatting options. Advanced Help is useful because it gives you detailed examples on using Views. One of those uses content type of ‘Story’, which is really not much different than the ‘news’ content type we are using here. Here are the URLs for each of these modules:
Go to Administer/Content Management/Content Types, click Add.
Name: News, Type: news (I use all lower-case for the type), Description: News items.
Workflow settings: Check ‘Published’ and ‘Promoted to front page’. I also enabled Attachments, but you may not want to do that. Make your choice for comments, too. You probably don’t want people commenting on your news items – “hey – that was really boring!” – in which case, disable comments.
Save the content type.
Create a block view to show most recent 5 news items in a block.
Go to Administer/Site building/Views.
Drupal does not come with an out-of-the-box news content type. You could use a story or a blog entry, but these are not an exact fit for what I wanted. Fortunately, it’s pretty easy to create your own ‘News’ content type. Everyone has their own idea of what a ‘news item’ should be, and how it should display. Here are the features I wanted for news items:
Requirements
News items to be their own ‘content type’ so I can create user roles just for posting news items.
Latest 5 news items to show in a block on the first page.
Separate ‘news’ page that lists all news items, most recent first, with paging (eg. show 10 at a time).
‘news’ page should be a Primary menu item
List to show date of item and title of item, with the title being a link to the full article
News items to support ‘teasers’
Have an Archive block on the News page to show an archive of news items by month
Summary of Process
Here’s an overview of how you do it, followed by detailed instructions.
Install Views contributed module (if you haven’t already done so).
Install Advanced Help module (this provides a great example of using Views to create a block or page that presents lists of information)
Create a content type of ‘news’
Check the options to add, change or delete own news items for the appropriate users or roles.
Add some sample news items (helpful when working with the ‘Views’ module to make sure you get the desired appearance).
Create a ‘block’ view to display news items
Place the block somewhere on the first page
Create a ‘page’ view to display news items. You choose which Primary menu item you want to use for this page when you create the view.
Create an ‘archive’ block view to display archives by cloning the provided Archive view and changing it
Place the archive block somewhere on your news page.
Details
In this section of the post I take you through every step in detail.
Install Views and Advanced Help modules. Views is one of two very popular contributed (non-core) modules. CCK (Custom Content Kit) is the other one- it lets you create your own data values or content types. Views lets you display lists of information from the Drupal database. It’s essentially a user-driven SQL statement generator, along with some list formatting options. Advanced Help is useful because it gives you detailed examples on using Views. One of those uses content type of ‘Story’, which is really not much different than the ‘news’ content type we are using here. Here are the URLs for each of these modules:
Go to Administer/Content Management/Content Types, click Add.
Name: News, Type: news (I use all lower-case for the type), Description: News items.
Workflow settings: Check ‘Published’ and ‘Promoted to front page’. I also enabled Attachments, but you may not want to do that. Make your choice for comments, too. You probably don’t want people commenting on your news items – “hey – that was really boring!” – in which case, disable comments.
Save the content type.
Set up a User who can create, change or delete News items. First we’ll create a new role, specifically for just working with news items.
Go to Administer/User Management/Roles
Click on Add Role. Call it Reporter (you can always delete this later if you really don’t want it)
Click on Edit Permissions
Scroll down the list of permissions until you get to ‘Node Module’. Check ‘Create news content’, ‘edit own news content’ and ‘delete own news content’ then click ‘Save permissions.
Create a user with a role of reporter: Go to Administer/Users and click on ‘Add User’. Type a Username, unique e-mail address (if you are like me, you have many alias email addresses pointing to the same account- almost a must for testing anything with Drupal or Joomla), password, and check the role of ‘reporter’.
Add some News!
Logout of Drupal
Login with the User just created (role of reporter)
Click on the ‘Create content’ link and create some news items.
Create a block view to show most recent 5 news items in a block.
Select ‘block’ in dropdown box, click ‘Add Display’.
Click on ‘10′ next to ‘Items to display’ and change it to 5.
Click on the ‘+’ sign next to Fields. Scroll down and select Node: Post date and Node: Title, then click the Add button . The next steps take you through more options for each of these fields.
Remove the label of ‘Post date’ (clear the text). This prevents the words ‘Post date’ showing next to the date. Click ‘Update default display’. You should now see an interface asking you to configure the field ‘Node:Title’.
Remove the label of ‘Title’ (clear the text). Check the box ‘Output this field as a link’ , scroll down and check ‘Link this field to its node’. This makes the News item’s Title a clickable link that links to the full article (node). Click ‘Update Default display’.
You should see a ‘Live preview of all content you’ve created. Let’s filter it by ‘news’ only.
Cick the ‘+’ sign next to Filters. Scroll down and check Node: Published and Node: Type. These options let us choose to display only Published content (Node: Published = Y), and only news (Node: Type = ‘news’). Then click Add.
Select ‘Yes’ for Published items, click Update, then select ‘Is one of’ and check ‘News’, then click Update.
Now let’s sort the news items by most recent first (descending order). Click on the ‘+’ sign next to Sort criteria.
Check Node: Post date, click Add.
Select Descending, click Update.
Finally, click the Save button (just above the words ‘Live Preview’.)
Add Block To First Page
Depending on your active theme, you may want to add your news block to the left or right side of the page. I’m (currently) using Acquia Marina, which supports a right-hand column, so that’s where I’ll place my block:
Go to Administer/Site Building/Blocks
Scroll down to the list of inactive blocks and find the one named ‘News_list’. This is what we created when we built our view in the previous steps. Click on the dropdown box and select ‘Sidebar last’ (or maybe ‘Sidebar right’ or ‘Sidebar left’ – depending on your active theme).
Click the ‘Save blocks’ button at the bottom of the page.
The list of blocks will be refreshed. The news_list block now appears under the ’sidebar last’ heading. Click on the ‘configure’ link.
Type a ‘block title’ of Latest News
Scroll down to ‘Page specific visibility settings’ and click on ‘Show on only the listed pages’ and type <front> in the text box. This ensures that our block of listed news items only appears on the front page, on the right side of the page.
Entries (RSS)