Home

Web

CMS

Joomla Struggles

joomla cms logo Ouch! Rough week working on the Madison Network of Black Professionals website.

First I had difficulties with a form tool. I spent hours getting it installed because the documentation on the site sucks so bad. All along I thought it was something with the Joomla CMS that wasn't working right... and in the end it turned out to be a permissions issue.

Second, so I get things rolling with the forms and I have the site pretty much the way I want it and then the database craps out on me. I probably shouldn't say the "database crapped out", but the bottomline is that I started over from scratch. I knew it would be quite a bit of work, but I figured I'd get more experience and it would work out. It has, but I have a meeting this Friday morning to demo the site and I've still got a lot of work to do.

Moving forward... I'm going to figure out how to clone or backup the database so that when I have a problem like this again I can simply put the backup database in place and move on.

Demo Content

The demo for HiveMind utilises a large stock of custom code and styling to make the most of every content item and show what HiveMind can do. This basically means that the HTML used in the custom modules and content have customisations which employ the characteristics of the template to make the "perfect" content.

This demo content section will take you through some of the content areas and general techniques used to further your understanding and help you realise the true potential of HiveMind. If you would like to quickly deploy a replica of our HiveMind demo for a new Joomla site, be sure to check out our åRocketLauncher package.

Tabbed Modules

HiveMind features an exciting new RokSlide powered tabbed module system. It is designed to allow you to publish your modules into the designated locations, creating tabs for each module position which you can customise. Currently, HiveMind uses the User10-15 module positions for your tabs plus other module positions. By default, Joomla does not include these module positions, so these must be created in the Joomla admin.

They can easily be created in your Joomla administrator by going to Site > Template Manager > Module Positions In the first available "empty" module position fields, type in the name "user10" in one, and "user11" in another. Next, click Save in the top right corner. Now, you will be able to utilise the "User10" and "User11" module positions when assigning your module's positions in the Module Manager. Do the same for User12, User13 and User14 and User15.

Customising Your Logo

One of the first steps of customising your new HiveMind template will undoubtedly be altering the logo text to reflect the name of your company / organization. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as font(s) used.

The most effective way to customise the logo is to use the included Source PNG file. When opened in Adobe Fireworks, this file contains all of the Layers in the design allowing you to tweak and change any of the image elements of the template design. The following steps will help you quickly get your new logo ready to go:

Step 1

First, open the header Source PNG file in Adobe Fireworks (source_main.png). On the right side, you will notice a taskbar named Layers. Inside this column, a list of elements within the source will appear, dividied into folders. The first is Web Layers which controls the green slices on the page that are used to export the images. Click the eye which is immediately left to the folder name Web Layers to make it invisible. This allows use to edit the logo.

Step 2

Next, double click on the logo which should be position in top-centre. This will activate the text tool so you can edit the element. Highlight the entire text box with your cursor and type your text instead(such as your company name.)

Enact the same procedure onto the slogan text below the log itself

Step 3

Once you have edited the logo to your personal preference, you will need to activate the logo area slice. On the right column where the Web layers area is, we need to reactivate it. As you did in the initial step, select the eye icon to make it visible and subsequently making the slices visible on the canvas. Select the logo slice, either on the canvas itself or in the Web Layers folder.

Step 4

To export your logo, right click on the green slice that is situated above your new logo. A popup menu should appear with numerous options. The value we want to deal with is "Export Selected Slice...". As the name suggests, this option will export/save this slice only out of the entire source window.

Step 5

If you are new to Fireworks, you may be wondering why it appears that there is only one style variation in the source. This is not the case as we take advantage of the Frame features of Fireworks. You need to simply switch frames to see all the other style variation sources.

There are a few ways to change frames and we will show 2 methods that you can use.

In the right column where you find the Layers toolbar including the Web Layers area, you should see another tab/toolbar named Frames. Just left click on the title Frames to enter the frames area. Then you can click on either of the frames which are named to show which style variant is on that particular frame.

The second method is the most easiest and simplistic. At the bottom of the Fireworks canvas is a row of buttons, arrows just as previous and next. Select the arrows to switch between frames.

Step 6

Once you have successfully edited then exported your new logo, you will need to upload it to your server. This process is best done via a FTP client such as Filezilla

Open your FTP client on your local computer.
Login to your web server where HiveMind is installed.
Navigate to the /templates/rt_hivemind_j15/images/style# directory.
Upload logo.png to this directory (You may need to browse on the local panel in the FTP client to find where you have exported your logo).
Clear your browser cache before viewing such as using the keyboard commands on Windows, Ctrl+F5.

Ensure that you are uploading the correct logo to avoid confusion if it does not change. Also take into account hosting permissions. Sometimes, hosters which are not designed for Joomla may have permissions not suited for the setup, thus, the upload will not be complete. In this case, contact your hosting provider.

Basic Customisation

A guide to the basic HiveMind customisation options that can be configured in the the Joomla Administrator console.

The PNGfix

You can turn off or on the pngfix with this setting. More info at our Tutorial Site.

Font Spans

With the following setting enabled, you can have multi-colored headers.

SIFR

You can have different font styles by setting this to true.

Font SIFR

With the following setting, you can choose what font you would like sifr to display.

Font Family

You can choose which font you would like to use for your titles.

Sidebar Width

With the following setting, you can choose the width of the sidebar.

Sidebar Location

With this setting, choose to have the sidebar placed on the left or right of the mainbody. The name of the module positions changes to reflect left or right.

Menu Style

HiveMind has 5 different looks for your menu that you can choose from in the configuration.

Default Font

Based on your own personal preference, you can set the default font size.

Font Buttons

You can enable or disable the font sizer buttons that will display at the top of the template.

Show Pathway

This setting controls whether the pathway appears on your site.

Module Slider

There is now a convenient toggle to show the tabbed modules or not.

Module List

With the setting illustrated below, you can control the aspects of the integrated rokslide feature to a great extent. You can control the tab title and also the module position which appears in each of the tabs.

In the code snippet, we have 5 lines, each line controls a single tab. Each line is segregated into 2 distinct parts. These are Tab Title, which controls the Tab Title. The second part is Module Position.

Typography

This page shows all of the typography styles and settings for HiveMind in action. If you would like to read more detailed information on inserting the included typography into your content, check out the HiveMind Typography Tutorial.

sIFR Integration

HiveMind features sIFR integration for the modular titles. Normally, you only have a small selection of fonts available for your website as it needs to be a standard font. With sIFR, you use flash to show non-standard fonts on your websites, perfect for that refined finish to your website. If you wish to activate sIFR on the demo, click here, you can deactivate SIFR by clicking here. The following fonts are available by default with the template, click to preview on the demo.

You activate all the fonts and/or sIFR from the Template Manager file.

Font Control

Similarly to the the sIFR font control, you also have the option of simply switching the font of all the text in the template with the following setting in Template Manager (select the font name to preview):-

Font Family: geneva | optima | helvetica | trebuchet | lucida | georgia | palatino

This is a ComponentHeading

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a Contentheading

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

This is an H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur pharetra leo sed nisl. Nunc vel nisi. Aliquam nulla. Etiam at est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus.

Notice Styles are shown below

This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'info' style. Use this style to denote pieces of information or tips for your readers and visitors. To use this use the folllowing html: .... This is a sample of the 'note' style. Use this style to denote items in your content that you would like your users to note or pay attention to. To use this use the folllowing html: .... This is a sample of the 'download' style. Use this style to denote information containing a download or information about an available download on your site. To use this use the folllowing html: ....

This is an H2 Header

This is an H3 Header

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.

This is an H4 Header

This is a sample <pre>...</pre> tag:

div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat; 
}

div.modulebox-black div.bx2 {
  background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}

div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

This is a sample blockquote (use <blockquote>....</blockquote>)

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a sample blockquote with class 'b' (use <blockquote class="b">....</blockquote>)

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

List Styles - Color Icons

Below is a list with media#. To use this style create a list in the following format: <ul class="icon-1...icon-6"><li>....</li><li>....</li>...</ul>

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla.

Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.

List Styles - Bullets

Below is a list with bullets. To use this style create a list in the following format: <ul class="class name"><li>....</li><li>....</li>...</ul>

To use this style create a list in the following format: <ul class="bullet-1"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-2"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-3"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-4"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-5"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-6"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-7"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-8"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-9"><li>....</li><li>....</li>...</ul>.

List Styles - Bullets

Below is a list with standard bullets. To use this style create a list in the following format: <ul class="class name"><li>....</li><li>....</li>...</ul>

To use this style create a list in the following format: <ul class="bullet-10"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-11"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-12"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-13"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-14"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-15"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-16"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-17"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-18"><li>....</li><li>....</li>...</ul>.

List Styles - Number

Below is a list with number. To use this style create a list in the following format: <ul class="number"><li class="number-1">....</li><li class="number-9>....</li>...</ul>

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.
Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla.
Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.
Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.
Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla.

More Articles...

<< Start < Prev 1 2 Next > End >>

Page 1 of 2