Frequently asked questions

Configuring and editing the content and appearance of your website

These questions cover topics concerning changing the appearance of your site and the content that it contains and general administration of your website including finance administration.

The control panel is a special area in your site that allows editing, administration and general control of your website. Access to the control panel of a pagebloom website is only available after signing in and the list of functions available depends on the access rights that have been granted to the user who signed in.

A Typical Scenario:

If you go to the control panel for your website you will be able to access a wide range of functions, allowing you to change the site, upload images etc.,. This is because you have been granted 'Organization Administration' rights to your website.

If a customer of yours signs in and goes to the control panel for your website they will only see a very restricted set of functions. Typically they will only be able to see the list of orders that they have placed with you and monitor their progress. They will not have access to the functions that can cause changes to the appearance or content of the website.

If you have a pagebloom website and you want to enable others, let's say an employee for example, to edit your site's content then you can assign 'Organization Administrator' rights to your employee and they too will then be able to edit your site. You can grant or withdraw access rights to users by placing a request via the 'request page'.

See also:

How do I access the control panel?

Accessing the control panel for your site

To access the control panel for your site follow these simple steps:

  1. Go to your website (or directly to www.pagebloom.com) and log on using your email address and password.
  2. After logging on the 'admin' button will appear like this in the top left corner. It looks like this:
    Pagebloom Admin button
    Click the 'admin' button.
  3. If the text in the middle of the page says 'Home -> Administration of 'YOUR WEBSITE NAME' then continue to step 5.
  4. If the text in the middle of the page says simply 'Home' then you need to specify which website you want to administer. Please click on the appropriate website link in the left hand column.
  5. You are now in the control panel for the website.

Other users of the pagebloom network will also see this 'admin' button if signed in but they will not be able to administer your site by clicking on this button. They will be restricted to performing such things as:

  • checking their current orders with your company
  • checking the completed orders with your company
  • controlling their subscription to your company's newletter

 

Word adds some extra formatting information when you copy/paste from a word document. The rich text editor in pagebloom has a special button especially to cater for pasting from Word documents. This button will paste

When you copy/paste from a Word document make sure that you use the 'Paste from Word' button in the pagebloom's rich text editor tool bar (third button from left in top row) and this will make for a cleaner paste without the normal formatting problems.

From the Website > Styles menu you have direct access to the Cascading Style Sheet (CSS) that is used for your pagebloom site. Using this you have complete control over text colors, panel background colors, menu coloring, text font and size etc.,

If you have added an image to a description or some other field that is edited via the Rich Text editor form then you can move that image around by simply dragging and dropping it with the mouse.

Some templates (eg., templates derived from template ID 171) have a slider in the front page.

The slider is configured via the configuration of a "custom content" with a special key 'c_slider'.

To access custom content:

In admin mode's main menu click on "Website" and select "Custom Content".

If you don't already have a custom content with the key 'c_slider' then create one and set the key to 'c_slider' (withou the enclosing quotes).

Each custom content has a list of 'Simple Documents'.

The slides in your slider will mirror the collection of Simple Documents that you create in your custom content.

For example: if you have created 5 simple documents your slider will have 5 slides and show them in the order they exist in the custom content. You can change the ordering by selecting a simple document in the list and hitting the up or down buttons to the right of the list.

Each slide will use the image, title and summary that you specify in the simple document.

To edit a slide, edit the corresponding simple document, changing it's title, summary and image.

 

Pagebloom has a wide spectrum of forms that allow you to edit various aspects of the content of your website. Some of these forms therefore have a large number of fields. It is a good idea to make sure that your browser window is full screen before performing any site changes to reduce the need for scrolling when you open up the various content editing forms.

You can use the text editor to create tables in your content but quite often you just want the table to help you layout items in a 'grid' like system and you don't really want the border to be shown around each cell in the table. Showing the border in these cases can make your site look old fashioned. Fortunately turning off the borders is quite easy.

Instead of this:

Product A Product B
A great product that does everything that you need. This product does it even better
Click here to see a demo Click here to see a demo

You'll see this:

Product A Product B
A great product that does everything that you need. This product does it even better
Click here to see a demo Click here to see a demo

To remove borders from table:

  1. Right click on the table and choose Table properties…
  2. Set the border width to 0
  3. You normally need to increase the cell padding and cell spacing so set these both to larger values eg., 10 or 20 to create a space between cell contents.
  4. Click OK on the table editor form.
  5. As always, after making changes in a properties form click somewhere in the main body of the text editor to focus the cursor in there again (without doing this the editor sometimes thinks there has been no changes and so does not save the changes).
     

Editing with style!

In web terminology we can apply a CSS (cascading style sheet) 'class' to elements such as images when editing content in the various pagebloom content editors. A 'class' simply tells the browser how the element should be laid out in the page. The class can be set up to specify where a particular element should be positioned (eg., left or right) and whether to insert space on one side, both sides, top or bottom for example.

In pagebloom there are a number of predefined classes that you can use to specify how you want your image elements to be laid out.

Specifying a CSS style

It is very easy to specify the class for an image or other element:

  1. Right click on the image
  2. Choose properties
  3. Click the 'Advanced' tab
  4. Enter the desired stylesheet class name in the 'Stylesheet class names' field (choose a value from the list below)
  5. Clear out any values in the 'Style' field.
  6. Press OK
  7. Click somewhere in the text editor to give it cursor focus again
  8. Press the Ok button.
  9. Press the preview button to see your changes.

You may not see the effect in the editor (after step 5) but you should see it in your browser when you preview the page (Step 8 - you might possibly need to do a page refresh to tell the browser to get the latest page contents).

List of predefined pagebloom CSS classes

pb-pos-left
Position the element on the left side and provide space on the top, right and bottom sides.

pb-pos-left-top
Position the element on the left side with no space on the top but with space to the right and on the bottom

pb-pos-right
Position the element on the right side and provide space on the top, left and bottom sides.

pb-pos-right-top
Position the element on the right side with no space on the top but with space to the left and on the bottom

 

Optional panels

A number of panels are optional. They can appear in the sidebar and can be turned on or off.

The optional panels are:

  • Card icons panel - displays Visa, Mastercard etc., icons as payment options
  • Share on Social Networking panel - a panel for easy addition of tweets, comments etc., on social networking websites.
  • Subscribe to our newsletter panel - a panel that allows visitors to your site to sign up to your newsletter.

Configuring the optional panels

To configure whether a panel is visible or hidden:

  1. Sign in to pagebloom
  2. Click the pbAdmin button in the left/top corner
  3. Click Website and choose Settings
  4. Click on the Basic Settings link
  5. Adjust the check boxes for the various panels as reuired.
  6. Press OK.
  7. Press Preview.

 

Some templates have a component known as 'content row'. Basically this type of component displays a row of content items next to each other. They each appear as a separate 'cell' within the row. The content used for the content row is that provided by a Custom Content object with the key 'c_content_row'.

To configure the content all you need to do is create a Custom Content the key 'c_content_row' and configure it's elements as usual. For each content item its title, summay an image will be displayed within a separate cell within the row.

As the row is a horizontally oriented element all of the cells have to fit across the width of the screen so don't add too many child items or they might not fit. Reasonable numbers of content items are 1, 2, 3, 4, 6 (5 is not included as it's best to use numbers that are factors of 12).

 

To create/edit the custom content required for the content row:

Go to admin mode.

Click on Website and select 'Custom Content'.

Create a new custom content and assign it the key 'c_content_row'.

Add the desired number of Simple Documents to the custom content.

Make sure that your site uses a template that includes a content row otherwise you will not see your content! An example of a template that uses a content row is template ID 171.

You can change your site's template via Website > Settings > Basic Settings > Website template.

Be careful when changing - remember the current template your site is using before changing it in case the new template doesn't work well for your site and you wish to change it back to the original template.

Occassionally you will want to copy/paste a table from an existing document into your pageblooom hosted website. This is easy to do so long as the application that you are pasting from preserves table structure data during the copy process - some applications do this well and some don't.

If you have a table in a PDF it will not preserve table structure data when copying. Your best option is to find a copy of the table in a Word document because copying tables from Word does preserve table structure data. If you haven't got a version of your table in Word you can easily create one and fill it with your data.

To copy/paste a table from Word to pagebloom

Set up any border styling in Word eg., if you don't want borders then remove them in Word.

  1. Select the table in Word and copy it.
  2. Open up the rich text editor on the content in which you wish to place the table.
  3. Click on the icon in the toolbar that looks like a clipboard with the letter 'W' in it (the 'W' stands for Microsoft 'Word').
  4. Press Ctrl-V to paste the table.
  5. Click Ok

Your table should appear in the editor and will display in the page using the default table style.

Styling your table

If you do not like the default styling of your table then set its style to 'table'. This provies a nice, modern looking table style.

To set the style:

Right click on the table and choose Table Properties.

  1. Click the Advanced tab
  2. In Stylesheet Classes enter the word "table" (do not include the quotes " )  to set the table style.
  3. Click Ok

Your table will now be styled in a modern, minimalist style.

The available table styles are: 

  • table
  • table-striped
  • table-bordered
  • table-hover
  • table-condensed
The easiest way to add a colleciton of images is to create a table and add each image to a cell in the table.

To create a table:
  1. Click the table icon in the third row of tool bars in the rich text editor.
  2. Select the desired number of rows and columns.
  3. For displaying images you probably don't want cell borders displayed so set the 'Border size' value to 0 to indicate "no borders".
  4. Clear the value of 'Width' as we don't want to specify a width for the table but rather allow the width to be determined by the sizes of the images.
  5. Press Ok.
To insert images:
  1. Click on the cell into which you wish to place an image.
  2. Click on the Image icon in the third row of tool bars.
  3. Click Browse Server and then select the image that you would like in the cell
  4. Click Ok
The icon that appears in the browser tab for the tab displaying your website is called the 'favicon'. It's short for 'favorite icon'.

Back in the old days browsers didn't have tabs - they could only display a single website for each instance of the browser - to have multiple websites open meant running multiple versions of you browser - yes, I know, it was very primitive back then!

Even though browsers didn't have tabs they did have bookmarks of your favorite websites and as browsers got smarter they added icons to the list of your favorite websites that you had bookmarked, hence the term 'favicons'.

A website could instruct the browser as to which icon to include with any bookmark to your website via a special HTML tag. pagebloom automatically injects that special tag into every page of your website.

These days, with browsers have tabs so that 'favicon' is also applied to browser tabs so you can quickly tell which website each tab is for.

Creating a favicon

A favicon is usually created by your graphic artist or web developer but it's not too hard to create one yourself.
Ideally a favicon should be:
  • PNG format with a transparent background
  • 64x64 or 32x32 pixels in size
Let us know if you don't have a graphic artist and we can make a favicon for you from your logo.

Assigning the favicon to your website

The favicon is uploaded via the administration panel.

In the administration panel choose Organization > Details then click on Organization Images.

A form will pop up, click on the "Edit" button next to Favorite Icon and from there you can upload your facivon PNG and then press Save.