Showing posts with label Joomla. Show all posts
Showing posts with label Joomla. Show all posts
Functionality List
I have compiled a list of all of the things needed to achieve a pass on the assignment as instructed in the brief. It shows what features I have included, when they were included, when they were checked and the pages that they are on. Click on the images to make them bigger.
Poll Module
As an extra incentive for registering, and to experiment with Joomla, I have added a Poll module. It's a simple module that lets people vote. You set the question and the options, then enable it. I have set the options to restrict the poll to just registered users, but also for the first time for a module to only appear on select pages as well. I didn't want the poll to be on every page for registered users, only the home page and also the page that people see when they login. This gives maximum visibility while also not letting it get in the way.
It is a simple poll, with limited options and the question isn't exactly pressing, but I wanted to try this feature out:
It is a simple poll, with limited options and the question isn't exactly pressing, but I wanted to try this feature out:
Custom Background
As stated earlier, I wanted to change the background for my website to make it more interesting. I am going to do this using a method I learned a few years ago, where instead of using a large image for the background (which would put huge loading times on to the site), I will create a 1 pixel wide image with the gradient, and repeat on the x axis to make the whole background have the gradient. I inspected the CSS and HTML structure of the website using the firefox add-on 'firebug' to determine the code I needed to ad was to the 'green_bg.css'.
The original code:
#page_bg {
background: #316B16
}
and I changed it to this:
#page_bg {
background: #fff url(../images/background.gif) repeat-x;
}
The '#fff' changes the background colour to white, so when the page extends below the gradient it will just look as though the gradient is continuing. The rest of the code links the image, then tells the background to repeat on the x axis.
Before:
After:
The original code:
#page_bg {
background: #316B16
}
and I changed it to this:
#page_bg {
background: #fff url(../images/background.gif) repeat-x;
}
The '#fff' changes the background colour to white, so when the page extends below the gradient it will just look as though the gradient is continuing. The rest of the code links the image, then tells the background to repeat on the x axis.
Before:
After:
User Accounts
I have created 5 of the preset options for accounts in Joomla so that there can be different access levels for my site. I chose not to create another administrator account, as the super administrator has most of the same rights. I also chose not to create a publisher account, as the manager and super administrator can perform the same functions and more. The ones I have created are:
Public Front-end:
Registered User:
Normal visitors who register at the site. Can view menu items that have access level of registered. Cannot edit or submit articles.
Author:
Can submit new articles for approval in the front end only. A Publisher or higher must approve. Cannot edit existing articles.
Editor:
Can submit new articles or edit existing articles from the front end only. A Publisher or higher must approve.
Public Back-end
Super Administrator:
A super administrator is the default account that the person who installed Joomla will start with. The super administrator has control and access to everything.
Manager:
Can do everything all front-end users can do, plus can log into the back end with increasing rights.
Public Front-end:
Registered User:
Normal visitors who register at the site. Can view menu items that have access level of registered. Cannot edit or submit articles.
Author:
Can submit new articles for approval in the front end only. A Publisher or higher must approve. Cannot edit existing articles.
Editor:
Can submit new articles or edit existing articles from the front end only. A Publisher or higher must approve.
Public Back-end
Super Administrator:
A super administrator is the default account that the person who installed Joomla will start with. The super administrator has control and access to everything.
Manager:
Can do everything all front-end users can do, plus can log into the back end with increasing rights.
Login Problem Solving
After adding a login module, I created an article that would display when a user logs in and another when they log out. The problem is, in the login module parameters you can only select an article link from a menu entry. It would look bad and unprofessional to have these articles assigned to the menu, so I wasn't prepared to do that.
After much deliberation I came up with a solution. I created a new menu module and called in loginmenu, and created 2 menu entries, 1 for each article I needed to display. Then, I set it up in the login module parameters to use the articles, as they were now menu entries. I then went back to the menu module and disabled it, so that is would not be visible on the website. This way I can retain the functionality needed for the login pages, but keep the site looking cleaner without the need for the extra menu.
After much deliberation I came up with a solution. I created a new menu module and called in loginmenu, and created 2 menu entries, 1 for each article I needed to display. Then, I set it up in the login module parameters to use the articles, as they were now menu entries. I then went back to the menu module and disabled it, so that is would not be visible on the website. This way I can retain the functionality needed for the login pages, but keep the site looking cleaner without the need for the extra menu.
Breadcrumbs
To improve the site navigation I have added the breadcrumbs module, and placed it in the default breadcrumbs layout that is already defined in Joomla. It places the navigation path just above the main body, under the header.
Search
I needed to add search functionality to my site, and I have done this in 2 methods. First of all I simply added a search menu entry that they can click on to go to a page where they can search. I also added a search bar above my login module. This allows them to type in a search from any part of the site without having to go to a special page. I had previously already changed the formatting of this module using some CSS so there is no module title, and reduced the size of the search bar and the distances between the elements.
I also created my own search button. In the search module parameters you can enable the search button as an image, and explains that the linked image needs to be called 'searchButton.gif'. I created a search button roughly the same size as the search bar so it didn't look too out of place, and styled it to go with the template I am using. I then uploaded it to the appropriate folder using FTP.
I also created my own search button. In the search module parameters you can enable the search button as an image, and explains that the linked image needs to be called 'searchButton.gif'. I created a search button roughly the same size as the search bar so it didn't look too out of place, and styled it to go with the template I am using. I then uploaded it to the appropriate folder using FTP.
Logo
The template I am using contains a logo in the header, but I do not want to use the default Joomla logo. Accessing the images folder by FTP, I found the logo and it was called: mw_joomla_logo.png so to replace it I would need to call my file the same thing and overwrite it, otherwise I would have to change the link name in the html which might take some time to find. Looking at this file I also got valuable information such as:
Size - 289 x 75 pixels
File Type - PNG
Transparency - Yes
I used this to create my own logo in Photoshop. I made it slightly bigger (300 x 77 pixels) but any larger and the logo seemed to get cut off so I made it as big as I could get away with. Here is the result:
Size - 289 x 75 pixels
File Type - PNG
Transparency - Yes
I used this to create my own logo in Photoshop. I made it slightly bigger (300 x 77 pixels) but any larger and the logo seemed to get cut off so I made it as big as I could get away with. Here is the result:
Changing HTML & CSS
Joomla allows you to edit the CSS and HTML of the templates that you have uploaded. I have taken advantage of this to make some changes to it by editing the template in Joomla. To prevent any complications I have made local backups of the files so that if there is a problem I can rectify them without much hassle.
1. Body
I felt the main divs containing everything under the banner were too far down from the top menu so I edited the template.css to include:
'margin-top: -30px;'
and this has made the gap much smaller.
2. Search Form
I felt the spacing around all the elements in the search form were too big so I edited the template.css to reduce them so it was much more compact. I found this code in the file that controls the spacing around the form:
div.search input {
width: 145px;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
}
I need to change the bottom and top margins, so I changed the values to:
div.search input {
width: 120px;
border: 1px solid #ccc;
margin: 5px 0 8px 0;
}
This makes the form shorter so I can fit the search button to the right, and adjusted the distance above and below the form so the elements of the module are tighter. I also took off the module title, as the button and form make it clear what it is for so it didn't need a title.
3. Right Column
Scanning through the CSS and HTML I found that Joomla uses tables, and the column width was defined in the HTML with the table width.
It was set as td width="170" and I decreased it to td width="150"
This was the smallest amount without putting the account login text on to 2 lines. This frees up more space for the main articles, and makes the right column appear much tighter.
4. Article Headings
I feel as though the article titles are too plain as they don't look much different than the text in the article so I have edited the CSS to make the title bolder. The piece of CSS I am looking for is located in template.css. In the HTML they are defined in a class called class="contentheading". This leads me to this in the CSS:
and I will change to this:
color: #555555;
font-weight: bold;
The title is now bold and the colour is a dark shade of grey so it's not as dark as pure black.
5. Logo Centred
I found the CSS to the position of the logo div inside template.css and this is what I found:
div#logo {
position: absolute;
left: 0;
top: 0;
float: none;
width: 289px;
height: 75px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 20px;
margin-top: 25px;
and changed them to this:
div#logo {
position: absolute;
left: 10;
top: 0;
float: none;
width: 300px;
height: 77px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: -25px;
margin-top: 25px;
Notice I changed the height and width slightly to be exactly the size of the logo. Strangely I couldn't set the position using the 'left value', as any value put it just off centre. Using that I decide to correct it's off centre position by changing the margin left value to a minus number.
6. Background
I want to modify the background to be a green to white gradient. This will keep the colour scheme I want, lighten up the page a bit and make it more interesting than a flat colour.
1. Body
I felt the main divs containing everything under the banner were too far down from the top menu so I edited the template.css to include:
'margin-top: -30px;'
and this has made the gap much smaller.
2. Search Form
I felt the spacing around all the elements in the search form were too big so I edited the template.css to reduce them so it was much more compact. I found this code in the file that controls the spacing around the form:
div.search input {
width: 145px;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
}
I need to change the bottom and top margins, so I changed the values to:
div.search input {
width: 120px;
border: 1px solid #ccc;
margin: 5px 0 8px 0;
}
This makes the form shorter so I can fit the search button to the right, and adjusted the distance above and below the form so the elements of the module are tighter. I also took off the module title, as the button and form make it clear what it is for so it didn't need a title.
3. Right Column
Scanning through the CSS and HTML I found that Joomla uses tables, and the column width was defined in the HTML with the table width.
It was set as td width="170" and I decreased it to td width="150"
This was the smallest amount without putting the account login text on to 2 lines. This frees up more space for the main articles, and makes the right column appear much tighter.
4. Article Headings
I feel as though the article titles are too plain as they don't look much different than the text in the article so I have edited the CSS to make the title bolder. The piece of CSS I am looking for is located in template.css. In the HTML they are defined in a class called class="contentheading". This leads me to this in the CSS:
h2, .contentheading {
color:#333333;
font-family:Arial,Helvetica,sans-serif;
font-size:1.4em;
font-weight:normal;
padding:0;
text-align:left;
vertical-align:bottom;
width:100%;
}
and I will change to this:
color: #555555;
font-weight: bold;
The title is now bold and the colour is a dark shade of grey so it's not as dark as pure black.
5. Logo Centred
I found the CSS to the position of the logo div inside template.css and this is what I found:
div#logo {
position: absolute;
left: 0;
top: 0;
float: none;
width: 289px;
height: 75px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 20px;
margin-top: 25px;
and changed them to this:
div#logo {
position: absolute;
left: 10;
top: 0;
float: none;
width: 300px;
height: 77px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: -25px;
margin-top: 25px;
Notice I changed the height and width slightly to be exactly the size of the logo. Strangely I couldn't set the position using the 'left value', as any value put it just off centre. Using that I decide to correct it's off centre position by changing the margin left value to a minus number.
6. Background
I want to modify the background to be a green to white gradient. This will keep the colour scheme I want, lighten up the page a bit and make it more interesting than a flat colour.
Login Module
One of the features we need to add is a login feature where people can create an account and sign in to access content we have marked for only registered users. To add this I went to the module manager and clicked 'New'. This gives us a variety of modules, and helpfully has tool tips giving descriptions if there was any confusion but they are named appropriately, and the one I need is called simply 'Login'.
The login module has now been added to the page. You can give it a title, so I called it 'Account Login' so people would recognise it easily. It is a standard and clean form and I have aligned it to the right side of my website to keep the page ordered in an intuitive manner.
The login module has now been added to the page. You can give it a title, so I called it 'Account Login' so people would recognise it easily. It is a standard and clean form and I have aligned it to the right side of my website to keep the page ordered in an intuitive manner.
Favicon
A favicon is a special image file with a '.ico' extension that appears left of the address bar in all modern browsers. It also appears in tabs in browsers that support tabs. See the circled example bellow:
This is a standard now and so I will want to include my own custom favicon, not the one that comes with Joomla. I have designed a favicon to go with the theme of typography and my colour scheme. It is 16x16 pixels at 72dpi resolution. I exported the image from Photoshop as a JPEG and used an online conversion tool on Dynamic Drive (although there are others available):
http://tools.dynamicdrive.com/favicon/
Here is the final result:
This is a standard now and so I will want to include my own custom favicon, not the one that comes with Joomla. I have designed a favicon to go with the theme of typography and my colour scheme. It is 16x16 pixels at 72dpi resolution. I exported the image from Photoshop as a JPEG and used an online conversion tool on Dynamic Drive (although there are others available):
http://tools.dynamicdrive.com/favicon/
Here is the final result:
Custom Brief
Brief
In this assignment we will be using the open source CMS (content management system) Joomla to produce a website based on the topic of Typography. CMS allows users or the client to create and edit articles on the website without having any web design knowledge or contacting a web designer.
To make this large project more manageable I have created a list of things that need to be completed. We have been provided with a blank install of Joomla on a web server.
1. Planning
Decide on the number of sections, categories and articles
Draw out a sitemap detailing which article belong to which categories etc
Create the relevant Sections, Categories and Articles in Joomla
Link at least 3 examples in the definitions articles.
2. Organisation
I need to organise my website using the structure of Joomla. I will create sections, which contain their own categories, which contain their own articles. To pass I need to include at least:
3 Sections
3 Categories
40 Articles
3. Content
Gather and create the content relevant to the needed articles:
Definitions:
Serif
Sans Serif
Slab Serif
Humanist
Grotesque
Modern
Retro
Old Style
Black Letter
Display
Transitional
Monospace
Type Terms:
X-Height
Ascenders
Decenders
Baseline
Kerning
Tracking
Leading
Alignment
Typographers:
1500 – 5299
1600 – 1699
170 – 1799
1900 – 1944
1945 - Present
Galleries:
Gets your Attention
Elegant
Fits the Bill
Type Families:
Bold
Italic
Black
Condensed
Extended
Light
4. Images
Create images to demonstrate certain content for the articles:
Definitions
Type Terms
Type Families
Individual Typefaces
Take photographs and screenshots for my ‘In Use’ galleries
5. Joomla Features
I must include certain features in order to pass. These include:
More than one menu
Nested items on a menu
A blog layout menu entry
A list layout menu entry
At least two page breaks
At least two 'read more' breaks from the home page
A search menu feature
A site wide search box
Search data collection
Visitor registration
Visitor entry page
Visitor exit page
Registered only visible pages
A comprehensive links page
Three categories of user for your site
User details form
Contact Us form
Site wide keywords and meta tags
Individual page meta tags and keywords
Pages organized through appropriate sections and categories.
I will check these features using a simple table that will be checked by my tutors.
6. User Types
I will need to implement a user account system and mark certain articles as only viewable by registered users. There will be:
Unregistered users who can view a certain proportion of the site.
Registered users who can see specially marked articles
An Editor rank, which allows the person to edit and create articles
Super Administrator who can access the back end of the site and do everything.
In this assignment we will be using the open source CMS (content management system) Joomla to produce a website based on the topic of Typography. CMS allows users or the client to create and edit articles on the website without having any web design knowledge or contacting a web designer.
To make this large project more manageable I have created a list of things that need to be completed. We have been provided with a blank install of Joomla on a web server.
1. Planning
Decide on the number of sections, categories and articles
Draw out a sitemap detailing which article belong to which categories etc
Create the relevant Sections, Categories and Articles in Joomla
Link at least 3 examples in the definitions articles.
2. Organisation
I need to organise my website using the structure of Joomla. I will create sections, which contain their own categories, which contain their own articles. To pass I need to include at least:
3 Sections
3 Categories
40 Articles
3. Content
Gather and create the content relevant to the needed articles:
Definitions:
Serif
Sans Serif
Slab Serif
Humanist
Grotesque
Modern
Retro
Old Style
Black Letter
Display
Transitional
Monospace
Type Terms:
X-Height
Ascenders
Decenders
Baseline
Kerning
Tracking
Leading
Alignment
Typographers:
1500 – 5299
1600 – 1699
170 – 1799
1900 – 1944
1945 - Present
Galleries:
Gets your Attention
Elegant
Fits the Bill
Type Families:
Bold
Italic
Black
Condensed
Extended
Light
4. Images
Create images to demonstrate certain content for the articles:
Definitions
Type Terms
Type Families
Individual Typefaces
Take photographs and screenshots for my ‘In Use’ galleries
5. Joomla Features
I must include certain features in order to pass. These include:
More than one menu
Nested items on a menu
A blog layout menu entry
A list layout menu entry
At least two page breaks
At least two 'read more' breaks from the home page
A search menu feature
A site wide search box
Search data collection
Visitor registration
Visitor entry page
Visitor exit page
Registered only visible pages
A comprehensive links page
Three categories of user for your site
User details form
Contact Us form
Site wide keywords and meta tags
Individual page meta tags and keywords
Pages organized through appropriate sections and categories.
I will check these features using a simple table that will be checked by my tutors.
6. User Types
I will need to implement a user account system and mark certain articles as only viewable by registered users. There will be:
Unregistered users who can view a certain proportion of the site.
Registered users who can see specially marked articles
An Editor rank, which allows the person to edit and create articles
Super Administrator who can access the back end of the site and do everything.
New Project: Joomla CMS
We are starting a new project to build a website in Joomla, an open source CMS that we will be using to construct a website on Typography. We will need to research and gather the content and upload it in the form of articles.
Subscribe to:
Posts (Atom)