Drupal User Editing Handbook

Bram2009-12-16 10:54

Bram2009-12-16 15:32

Game Face Projects

Site HandbookThis is the cover page of your owners manual. It is in "book" format, which means that there is aclickable table of contents to the right, and this is the top. You'll move through in sequence.

Marking up Text with the WYSIWYG EditorThis page assumes you have imported your text from the old site (through Dreamweaver) and fixedthe ordered lists. You now want to add other markup effects and images.

Heading Styles: Heading 1 should be reserved for Page Title. Heading 2 and Heading 3 willautomatically be red, so choose them from your "Format" drop down (which is generally "Paragraph"unless you change it) as appropriate to your page outline:

1.

Not all styles will show up as they should when you are in the editor. If you apply the style andsee it written when highlighting a section of text, save the page and view it before deciding something iswrong.

2.

Special Styles: All styles for your theme are in the Styles dropdown in your toolbar. When you highlighttext and pick a style, it applies the style to that text. For example, to make a span of text red, highlightit and choose "red" from the Style dropdown, like so:

3.

Site Handbook | Game Face Projects http://planning.gamefacewebdesign.com/drupal/handbook?print&book_recurse

1 of 14 1/15/14 5:06 PM

Other styles to choose from include "BigText" (which is what the first paragraphs on the home pageare made with) and "BigListBox" (which encloses a numbered list in a green box with space around it, asin your home page). As you require more styles, they will be added here, where they are not universallyapplied. With BigListBox, it is important to highlight ALL of the items in your list beforeaplyiing ii.

4.

There are many other buttons on your button bar. Most are obvious, matching what you use inMicrosoft Word.

5.

If you hover over the others, you'll learn their names, and can experiment with what they do (or ask). Here are some big ones.

6.

Toggle Full Screen Mode: Click it, and your whole web browser becomes your editor. Click it again toreturn and be able to do other things, like set menu items and save pages.

7.

Paste, Paste as Plain Text, Paste from Word: These three are very helpful when coping contentdirectly from other web pages and word processors. Paste as Plain Text will clean up all the awful thingsthat might be behind the scenes if you just used Paste, but will also remove the hyperlinks. Paste fromWord is VERY important to use if you're pulling from a word document, which will otherwise be full ofawful things:

8.

Special case buttons include Insert/Edit Image (the tree) Insert/Edit Link (which is onlyhighlighted when you've selected text to hyperlink) and Insert a New Table (whose associated buttons

9.


2 of 14 1/15/14 5:06 PM

Bram2009-12-21 14:44

for cell and row are only highlighted when a table is selected). We'll cover these on the next page. You'vealready seen the HTML button (which allows you to edit source in a pop-up window).

Importing Page Text without DreamweaverThis is an alternative to using Dreamweaver to paste code. It requires adding all the markup youremove by using the "Paste as Plain Text" button. To do all this:

Copy the full text from the article into your clipboard. There will be no images, no boldface - justthe text.

1.

Click the "Paste as Plain Text" button, which will open up a pop-up window:2.

At this point, you'll have all the text in your window, nothing more. (Remember to use "Toggle FullScreen"! - that's right under the downward arrow to the right of Styles)

3.

Your first step should be to add all the boldfaces. You can use Control+B for that - don't need to clickthe B on the button bar.

4.

Your next step should be to add all the colored Styles (red, bluegreen, etc.) - highlight the text tochange, then pull down:

5.

You'll want to decide whether there are any Heading 2 or Heading 3 level headings instead ofjust bold spans of text. When you do this, the headings may not look like the right size in the editor, butwhen you view the page after saving, they should be. If they are too large, you can either demote them(make your Heading 2 into a Heading 3) or, if you care about SEO and proper outlining (which coders careabout), you'll want to have consistency throughout the site, so either live with the size being larger, or askBram to change the CSS for that heading. The headings run a little large (1.3 times what the would be

6.


3 of 14 1/15/14 5:06 PM

Bram2009-12-17 15:24

otherwise) with this theme, so it takes a second to change.Next, you'll want to add hyperlinks. Follow the instructions on your help page for Hyperlinks andImages

7.

Next, you'll want to save any images and files from your current page to your desktop, and thenupload them to this page.

8.

If they're images, follow the instructions on your help page for Hyperlinks and Images9.If they're files, you may use the Web File Manager (if this is an Article or an Expert Interview) or youmay just use the link at the bottom for File Attachments, which will list the the file at the bottom of the pageand also show you the link you would use to put that link elsewhere on the page:

10.

The last thing you might want to do is add a Teaser Break after the first paragraph (so the article or othercontent can show up in a teaser list).

11.

Then, click your "Toggle Full Screen" button, and save.12.

Hyperlinks and ImagesHYPERLINKS

Before you link to a page, you need to create it, because that's how you know what the link should be. Makethe page, then save it, then click the "Edit" tab and you'll see something likehttp://yourdomainname.com/node/41/edit. That means the link to this page would be "/node/41"or, as a link from another site, http://yourdomainname.com/node/41.

1.


4 of 14 1/15/14 5:06 PM

When you want to link to your new page from an existing page (remembering the "Node ID"), go to theexisting page, pick the text you want to be clickable, and highlight. Once some text is highlighted, the linktools become active:

2.

Now, click the link tool (looks like a piece of chain - the one on the right is for REMOVING links). You'llsee these options:

3.

For link URL, enter /node/41 (or whatever the node ID is, or the external link). For Target, leave asopen in this window/frame unless you're going to another site - if you are, then choose open in newwindow (_blank). Click Insert and you'll see your text is blue now.

4.


5 of 14 1/15/14 5:06 PM

IMAGES

To add an image to your page, click the Tree icon (which stands for INSERT/EDIT Image) on thetoolbar.

1.

You'll see the Insert / Edit image box. You can enter an image URL if it's already online (and you knowit's going to stay there!) or you can click the little box to the right with the six red dots to go to theimage file manager, where everyone's images (and yours!) are:

2.

This opens up a SECOND pop-up window. Different options include having more than one folder to putimages in (<root>, which would only be something an administrator would put images in, or in subfoldersof <root>, like "pictures") plus the option to resize or delete existing images.

3.


6 of 14 1/15/14 5:06 PM

In this image, there is a thumbnail for "rupa-favicon" but not for the others. It's good to name imagesthings that make sense, and then you can just click on them to see them in the preview area below.In this case, let's say you want to add some with the Upload link (top left). Once you click Upload,you'll see a small file browser where you can click BROWSE to find the image on your computer. Againthink about naming the file well before uploading it. Once you find it and click OPEN to load it into theFile area, you can then click Upload.

The thumbnails are only useful if you don't name the image file properly before uploading it - they createextra images that are square (so you can't use them on your site) which you can see in the browser.

4.

Once you click Upload, you'll see the image listed in the browser and selected (which is why it'syellow). Also, the image will actually appear below that, so you can preview it:

5.


7 of 14 1/15/14 5:06 PM

By clicking on the preview, or by clicking "Insert File" green checkmark on the top of the screen, youload the URL of this image (which has already been uploaded to your website) into the insert/edit imagewindow (which is still open, even though you may have lost track of it).

6.


8 of 14 1/15/14 5:06 PM

Bram2010-01-27 22:08

Make sure you add an "image description" so that if for some reason someone can't see the image theyknow which one it was: Next, click the Appearance tab for further display options. Generally you will align the image left andwrap text around it (this will show up in preview where it says Lorem ipsum). You will also want to put a 10px horizontal space around the image, and no border.

You can change the dimensions (perhaps 300px is the widest you should use if you're wrapping text in a600px content area width, for example).

7.

ADVANCED ONLY: If I'm floating my image left, I don't want margin to the left of the image becausethere's no text there - but I DO want the margin to the right side - so in the Style area, I delete "margin-left:10px" and it ends up looking like it does below:

8.

At this point, click "Update" at bottom left and you'll see the image positioned properly in the WYSIWYGeditor. If you want to change the settings, click on the image again to select it and click the Tree iconagain.

9.

Block Management


9 of 14 1/15/14 5:06 PM

Block Management

Why you should care about Blocks?Blocks, what are they good for? Blocks are good for displaying content that you want on multiple pages. Forexample you might want to have a login block on every page if the user isn’t logged in. Or another example ismaybe you want to have a Google Adsense block on every page except the front page. Blocks save you time andeffort. The easiest way to think of blocks is to equate them to super duper includes. Like a left-side sidebar thatwill only appear on image pages and user profile pages.

Why you should care about Regions?Regions are important only because they allow you to place blocks in them. Think of a region as a block of spaceon a webpage. In that space you can have multiple blocks. However because blocks are so flexible you can havemultiple blocks occupy that region on different pages. An example would be to have a login block on the frontpage in your left region and on the userpage having a user avatar block occupy that left side region. Once againthink about the little Russian dolls, the region is the bigger doll and the block is the smaller doll that fits inside ofthe bigger doll.

There are essentially three types of blocks in Drupal.

Menu blocks. Menu blocks - take menus that you have created in the Menu page and allow you to chooseif and where they appear on your site.Module related blocks - are created by a particular block and which display information related to thatmodule. An example of this kind block would be the Login block.HTML Blocks – These areblocks that you create directly in the block page, but which make use of existingmenus or modules. Instead the user has the option of entering any text or html they wish. These can includeimages, php, JavaScript and even flash.

Menu blocks, and Module blocks can’t be created in the block page. They already exist. All you have to do isenable them by selecting the region where you want them to appear and then clicking submit. Html blocks, onthe other hand, are created by clicking the add block tab on the top of the block page. Once created this customblock will then appear in the list of available blocks where it will need to be assigned a region like any other block.

When you go to the blocks page (/admin/build/blocks, or the link on your admin menu) you find a list of blocksthat are currently available in your site. This list has 3 columns: Block, Region, Weight, and Operations. If youhave blocks already activated then the items in the list will be the list of the blocks are currently being used.


10 of 14 1/15/14 5:06 PM

Under the list of activated blocks there is a list of theavailable blocks that are currently Disabled. If a block isdisabled the dropdown menu in the region column will say<none>. When you look at all the blocks in <none>, mostwill be Module blocks.

When you want to activate a block in the <none> category,alter “Region” and “Weight” fields.

Regions are the areas on the page that are set up to holdblocks. Examples of Regions are “Right sidebar”, “Leftsidebar”, or “Footer.” You can put any block into anyregion you want to, though some particular blocks work

best when placed in certain regions. Game Face can even add custom regions for you (e.g. Content Top), andcustomize the way the blocks in those regions appear.

Weight is the position of that block in relation to all the other blocks in that region. -10 is the highest block, and10 is the lowest, and blocks that share the same weight will be positioned in relation to the date and time thatthey were created. In the image at left, the + handles allow you to drag blocks up and down, without evenworrying about the weights.

Adding an HTML Block

When you want to add blocks, simply click on the addblock tab at the top of the page.

1.

The primary fields that you will worry about are the BlockDescription (required), the block title and the blockbody.

Description: This is the field that will appear in the list of blocks (just for admins). Make this asdescriptive as possible.

1.

Block Title: This is what the users will see as the block title. Enter <none> if you do not want one –but generally it’s a good idea to use them. These are H2 tags and help search engines know what is onyour site.

2.

2.

Block Body: This is where all your content for the block will be. This is configured with the same WYSIWYG


11 of 14 1/15/14 5:06 PM

editor you use to edit your pages, and should be straightforward. However, the CSS code that applies to sidebarblocks is different than the code applied to main content, so what you see in the editor may NOT be what you getwhen you look at the rendered blocks.

Configuration Options for Blocks

The configure link located to the right of the blocklisting goes to a configuration page that contains anumber of options for individual blocks including

visibility options, title display, roles that are allowed to view that block and php script options for advancedusers.

For most people the mostuseful configurationsettings here are the“Role settings”, and the“Page SpecificVisibility Settings.” Role settings set whichtypes of users in your sitewill have permissions to

view this particular block. Page specific visibility settings determine on which pages the block will appear.

For the page settings the box labeled “Pages” is to be filled out with a list of URLs in your site each separated by aspace. You can set the block to appear only on the pages listed, or on all pages except the pages listed.

Perhaps you want a block on the home page but nowhere else (if so, use the special code <front> - then it will staythere even if you change which page is your front page). The asterisk (*) is a wildcard. If you want a block thatappears on all pages except blog pages, enter blog (to cover the blog home page) and blog/* to cover all blogposts. Going node-by-node, you could assign a ‘Vacation in Iraq!” travel ad block to appear ONLY on pagesabout Iraq:

node/23

breaking-news-iraq


12 of 14 1/15/14 5:06 PM

node/25

NOTE 1: by specifying node/23 instead of content/about-our-services you ensure that when someone someday edits that page and changes the title to “Our Wonderful Services”, which automatically changes the URL tocontent/our-wonderful-services, your block scheme will not break. This is also a great idea when creatinglinks from one page to another.

NOTE 2: by specifying “admin user only” for visibility, you may get accustomed to seeing the block as you editthe site….but forget about this, and wonder where it went when you log out.

Arranging blocks

When you are ready to make the block appear in a certain block region, you simply will need to go to the list viewof your blocks (/admin/build/block). Notice that the blocks you add will appear in the disabled section. They arenot in any particular order, so you’ll just have to find the one you created.

You now have two options for arranging your blocks

Your first option is to drag and reorder them. You will notice that if you hover your mouse over the littleplus symbol that you can reorder the blocks anywhere on the page:

1.

Your second option is to pull down the menu in the region column. I will often use this if my block lists area bit unwieldy and I at least want to get the block close before I start dragging and dropping.

2.


13 of 14 1/15/14 5:06 PM

Make sure that after you make your changes that you click “Save Blocks” at the bottom of the page.3.

What If It Doesn’t Appear?

Sometimes, depending on how your site is configured, you may find blocks that you configured to appear on apage but don’t. The most common time that this is true is when you have a custom home page layout that isdifferent than your internal pages (we call this a Sub-Theme) and you were editing the block arrangement for thewrong one. In this case, you will see different sub-themes listed on the top of the block page, and can click theother one.

In the other case, there is a problem with the module responsible for that block, or more likely a problem withyour visibility settings. Ask for help!

Game Face Web Design


14 of 14 1/15/14 5:06 PM

Documents

Drupal User Editing Handbook