Activity Creating a Block

Let's take a step-by-step approach to create a Block to advertise the CD.

1. Log in as the admin, and then select the Site building menu.

2. The Site building menu will be similar to the following screenshot (it may vary based on the installed modules). Next, we click on the Blocks option.

Configure what black content appears in your site's sidebars and other Control your site's navigation menu, primary links and secondary links.

Change which theme your site uses ar allows users to set.

Views are customized lists of content on your system; they are highly configurable and give you control over how lists of content are

3. The Blocks page looks somewhat different from other admin pages. Its layout is discussed in the section Deciphering the Blocks page. Below the page name are two tabs, as seen in the following screenshot. Click on the Add block tab.

Blocks

flist Add block.

S

Analytic

Garlanc

4. The first field on the Create block form(Block description) is a required field. This entry will be listed as the description for the block being created on the Blocks page. We'll call this Block Ad-Spleen.

Block specific settings

Block description:

A brief d es c ri ption of your black, Us ed c n the black avervi ew page,

5. The Block title field is used to enter the display title. We're not going to have a title on the web page. Therefore, we'll let the content of the Block speak for itself.

Block title:

I he title of the blacli as shown tc the use:'.

6. The Block body field will contain the meat of our content, just like the Body field for a Page or Story. We'll start by putting a 'wrapper' around our block, by enclosing it between a pair of tags. In this way, we can later define some CSS attributes (such as background color and width) for the HTML tags, which will then apply to everything inside the tags. The HTML tag that can be used as such a wrapper is called a 'div', the short form for division. It comes in a pair of <div> </div> tags that will be used at the beginning and the end of what it will wrap. Click on the Create Div Container button, as shown in the following screenshot.

7. In the Create Div Container pop-up, we'll click on the Advanced tab. In the Inline Style text box, we'll add some CSS rules to the div tag (as shown in the upcoming screenshot), and then click on the OK button. The three styles entered in the text box do the following:

° Width—sets the width of the div, which we've set to the width of the right-hand sidebar, because that's where we'll have the div

° text-align — specifies that all of the text within the div will be centered, unless overridden

° background-color — sets the inside color of the div, for which we have defined a light gold (#c0c0 0 0)

° background-color — sets the inside color of the div, for which we have defined a light gold (#c0c0 0 0)

Upon creating the div, a colored stripe will be the only clue, but it's there!

The first piece of content that we'll add to our Block will be an image. Let's click on the Insert/Edit Image button.

In the Image Properties popup, we'll click on the Browse Server button. Next, in the file browser, we'll select the image disc_spleen.png, and then click on the Send to FCKEditor button.

The image URL and dimensions, as well as an image preview, will appear in the Image Properties pop-up, as shown in the following screenshot. We'll add information to some of the other fields as follows:

Alternative Text: Music for Your Spleen-Healing Music-Frank Bozak

Border: 0

8. Next, we'll click on the Link tab. Depending on the Rich Text Editor that you use, and the options that have been installed on it, you may have the ability to link directly to Node Content by navigating to it from this window. Normally, a relative URL (just the portion that needs to be added to the page location in order to find the image) would be used. However, at the time of writing this book, the image browser did not work with relative URLs. Therefore, the complete URL has to be entered, as shown in the following screenshot.

9. Back in the Block body editor window, we'll add some text. We want the text to appear below the image, as seen in the upcoming screenshot. The text to be entered is:

Click to read more about this Healing Music CD I can't get the text in the right place

If you can't seem to find a place to put the cursor (where the text appears) beneath the image with the gold color behind it, then you can use the Source button, or turn off the editor. You can then insert the text immediately before the closing div tag </div>.

9. Back in the Block body editor window, we'll add some text. We want the text to appear below the image, as seen in the upcoming screenshot. The text to be entered is:

Click to read more about this Healing Music CD I can't get the text in the right place

If you can't seem to find a place to put the cursor (where the text appears) beneath the image with the gold color behind it, then you can use the Source button, or turn off the editor. You can then insert the text immediately before the closing div tag </div>.

10. With our text entered, we'll select it by using the mouse, and then click on the Bold button (shown in the following screenshot). This will make the text stand out.

11. We've finished creating our Block content. Now, we need to configure the Block itself. Below the Block body box, we will click on the Input format link to expand the field set, and then select the Full HTML option, as shown in the following screenshot.

o Input format O Filtered HTML

□ Web page addresses and e-mail addresses turn into links automatically.

O Allowed HTML tags: <a> <em> <3ítrong> <cite> <coda> <ul> <ol> <E> <dl> <dt> <dtf> <span>

□ Lines and paragraphs break automatically.

M. Full HTML

□ Web page addresses and e-mail addresses turn into links automatically.

□ Lines and paragraphs break automatically.

O You may use <swt fit="song.mp3"> to display Flash flits inline

O PHP code

O You may post PHP ood±. You should indues <?pTip ?> tags. o You may leí <swT Tils= "song, m p3" > to display Flash Tilas Ir llr a

I put an image in my Block, but I can't see it on the page

If your block is visible on the web page (outside of the admin Block page), but some of its elements are not, then you may have forgotten to select the Full HTML option as your Input format (instead of the default Filtered HTML option). Edit the Block, and change this setting.

12. The next field set on the Blocks page is the User specific visibility settings. We're going to set it so that the block will always be seen.

User specific vi sibil it/ settings

Custom visibility settings:

K5] Users cannot control whether or not they see this black. " show this black by default,- but let individual users hide it. 0 Hide this black by default but let individual users show it.

Allow individual usErs tn customize the visibility of this black in their account settings.

13. The Page specific visibility settings fieldset is where we can specify on which page(s) we want the Block to appear. The default setting would be for the Block to appear on every page. However, we don't want the Block to appear when someone is reading the full Music for Your Spleen article, as they're already on the page that the Block link would take them to. We'll choose to have the Block appear on every page except the one(s) we list. So, we'll enter spleen here (as seen in the screenshot), because that's the custom path name that we gave to that Node Content; that is, the page is reached via mydomain.com/spleen.

Page specific viability settings

Show block on specific pages:

f* Sham on every page except the lifted pages. O Show on only the listed pages.

O Show if the following PHP code returns T3.UI (PHP-mode, experts only).

Pages:

Show block on specific pages:

f* Sham on every page except the lifted pages. O Show on only the listed pages.

O Show if the following PHP code returns T3.UI (PHP-mode, experts only).

Pages:

Elnter one page per line as Drupal paths. The character is a wildcard. Example p a th s are bhq forthe blog page and bfacf* fa r EVEry psrsonal blog. <fnint> i s th £ front pagE, If thE PHP-mods is chossn, EntEr PHP codE bstiVEEn <?pkp ?>. NotE that EKECuting incorrEct PHP-cods can brEakyaur Drupal Bite.

Elnter one page per line as Drupal paths. The character is a wildcard. Example p a th s are bhq forthe blog page and bfacf* fa r EVEry psrsonal blog. <fnint> i s th £ front pagE, If thE PHP-mods is chossn, EntEr PHP codE bstiVEEn <?pkp ?>. NotE that EKECuting incorrEct PHP-cods can brEakyaur Drupal Bite.

The ID far excluding ar including this element is admin/build/block/add. sdit-pag^s,

14. At this point, we can save the Block, after which we'll be returned to the Blocks list. At first, it might seem as though our Block hasn't been saved, as it doesn't seem to be in the list. The Block list appears in the order of the selectable regions on the page, starting from the upper-left. Our block hasn't been assigned to a region yet, so we need to scroll down to the Disabled section at the end of the list, and we will find it there.

Block Region Operations o DID era ¡n rr;L3 region content after bottom blocks

,Vo bfocte in this region footer

Block Region Operations o DID era ¡n rr;L3 region content after bottom blocks

,Vo bfocte in this region footer

*

Powered by Drapai

| footer

configure

Disabled

*

Primary links

1 <none>

configure

4"

Recent comments

1 1

configure

4>

Secondary links

1 1

configure

*

Syndicate

1 1

configure

*

Who's new

1 <none>

configure

*

Who's online

1 <none>

' 1 configure

*

Ad-Spleenj^

1 <none>

configure delete

*

Tags for the current post

1 <none>

»1 configure

*

Tags in Event Types

1 <none>

"1 configure

Save blocks

Save blocks

15. Because we know where we want to place the block, we'll assign the region to it. Click on the drop-down list box, and select the right sidebar option.

Disabled

•j. Primary links

<none>

-1 configure

.j. Recent comments

inone>

"1 configure

•j. Secondary links

inone>

-■ 1 configure

^ Syndicate

inone>

"1 configure

^ Who's new

inone>

"1 configure

^ Who's online

inone>

T1 configure

^ Ad-Spleen

<none>

configure delete

■{• Tags for the current post

left sidebar

configure

Tags in Event Types

top content blbSk right RED

configure

Save blocks |

content top

content

content

content bottom block left

content bottom

footer

<none>

Having selected the region, our Block entry disappears from the Disabled section. It's moved up the list into the right sidebar section. By the way, we could have moved it there by dragging and dropping the Block entry. What I want to point out, though, is the message that you will now see above the Save blocks button. Your Block was saved, but the change to its region that you just made has not yet been saved. If you navigate away from this page without clicking on the Save blocks button, then the position will not be saved. Let's click on the button now.

* The changes to these blocks will not be saved until the Saue &Facts button is clicked.

Save blocks K

The only thing left to do is to visit the front page, and see our new block. If we click on the image in it, then we're taken to the article about the CD. We can also see that the Block is not on this page, because we specified in its settings that it should not be.

i ptttj^I

Click to read more about this Healing Music CD

0 0

Post a comment