The main role of the footer is to keep the visitor on your site longer. And if a visitor finds a link to a third-party resource here, then there is a high probability that the visitor will leave your site. After installing a new Joomla template on the site, we immediately find a copyright in the footer - a link to the developer, as well as information on which framework this template works on.
In this lesson we will look at how to remove unnecessary information from the footer, and also design the footer.
Copyright information used software can be disabled in the Module Manager. Open the menu "Extensions" → "Module Manager"
In the Module Manager, through the “Select position” filter, we find the “footer” module.
We enter the module settings and find the top two lines from the footer:
Built with HTML5 and CSS3
Copyright © 2014 YOOtheme
You can replace the information placed in the "Custom HTML code" module in the "footer" position with your own.
Let's save the changes and refresh the site page. So, our Copyright has appeared, but the default one has disappeared.
But we still have the bottom line in the footer unchanged: – link on which framework this template is made.
Let's see how to remove it. Let's use the Firefox Mozilla extension and analyze this inscription.
Open and enter the link: "href="http://www.yootheme.com">Warp Theme Framework" to search and see that it is in the template in the file config.php. Let's go to the file by directory: Z:\home\localhost\www\your_site\templates\your_template\warp\config.php
Open the file using the Notepad++ text editor config.php, and enter the copied link into the search form: href="http://www.yootheme.com">Warp Theme Framework
Comment out the line: // "branding" => "Powered by Warp Theme Framework" and save the changes. After updating the site page, the bottom line in the footer: "Powered by Warp Theme Framework" will disappear. If you decide after the word "branding" => write your brand in Russian, then do not forget to change the encoding to "Encode to UTF-8 (no BOM)."
You can add a short menu in the footer, in case your user, having read the site page to the end, becomes interested in some topic. And finally, let's make a light background for the footer. To do this, let's use the extension again and analyze the footer itself.
In the case of a free template from the YooTheme studio, no color design is provided for the footer. In our case, the file is responsible for the design of CSS styles theme.css, and the path to it can be seen after hovering over the file name in the upper right corner (see screenshot above). To design a light gray background for the footer, you can add the following line to the theme.css file inside the class responsible for designing the footer: background: none repeat scroll 0 0 #EEEEEE;
So, today we learned how to remove copyrights from the footer, design the footer at your own discretion, and also give the footer your own background.
If this article was useful to you, I will be grateful for your like.
Hello readers of the No Zombies Allowed blog. Today I want to tell you about how replace site background. With your own background, your site will become unique and stand out from the gray mass of copy-paste templates. Changing the background of a website is not difficult and can be done in 10 minutes. And now I will tell you how to replace the background for the most popular engines - Ucoz, Joomla, WordPress.
We will change the background of the site using CSS styles. The background can be set in several ways:
You need, of course, to choose only 1 method from those presented. Instead of #FAFAFA and others like that, put your color. Next in the CSS body you need to insert the background style of your site.
In order to change the background of the site on Ucoz you need to go to: Control Panel - Design - Design Management (CSS) - Style Sheet (CSS). Next, find the code by type:
Body ( font: 13px Arial, sans-serif; line-height: 1.5; background-color: #FFF; )
And then change one of the suggested methods above to your background.
In the screenshot, I highlighted with a red line where to go and what style to change. 
It is advisable that you do not change anything other than background. Those. do not touch padding, line-height, font and the like - this can change not only the background of the site :)
To change the background of a site on Joomla you need to go to the administration panel, then Extensions – Template Manager and select the “Templates” tab
You will see all the CSS files of your template
Typically, the CSS in which background styles are stored is template.css or main.css. If you still don’t know what CSS file you need, use . After you have chosen required file CSS click and edit. Find the body style in this file and change the background
Body ( background: #fff; color: #000000; font-size: 100%; padding: 0px; text-align: center; )
Do you need to change the background on WordPress? - this will be no more difficult to do than on any other. In order to change the background, go to the admin panel, then Appearance - Editor.
This will open your template's main CSS file. All you need is to find the body styles (they are usually at the very beginning of the file) and replace the background with yours.
I tried to explain as briefly as possible how change the background on the site. If I missed something and something is unclear to you, write in the comments. Thank you for your attention:) Sincerely yours, No Zombies Allowed.
It often happens that something in a template doesn’t suit you. For example, the color of an element, its size, font size, etc. Unfortunately, you can’t make changes to the template settings. Don't be upset, you can edit the code in the CSS file.
Now I will select a certain element on the site, find and edit the CSS file code responsible for this element, thereby changing its appearance.
All this is very easy to do using a browser. Mozilla Firefox, and the Firebug add-on installed in it.
Us setting F irebug in Mozilla Firefox
Open your browser Mozilla version 3 or higher and go to the official Firebug website. There you will see this orange icon “Install F irebug", click on it. You will be transferred to " mozilla.org".
By going to "mozilla.org", click "Add to Firefox".
In the window that opens, click “install”, after installation, restart the browser. Firebug is ready to go!
Editing a joomla 3 template
Now in your browser you need to open the page of your site with the element you want to edit. I will show you an example of a test site running joomla 3 installed in Denver. And I will adjust the main menu block.
After the site page is open, enable Firebug. To do this, click on the picture of the beetle located in the upper right corner of the browser Mozilla. The color should change from gray to yellow.
A panel will open at the bottomFirebug, it looks like this. (To enlarge the image, click on it).
To find the code of the element we are interested in,In the upper left corner of the panel, click on the “object selection” icon.
Next, move the cursor over the object you want to edit and left-click on it. For me this is the “main menu” block. 
After selecting it, the code responsible for this block is displayed on the right side of the panel. 
Now I will change this code directly in the panel and display screenshots with the updated block. You can play around as much as you like, after refreshing the page everything will come back. Once you have achieved the desired results, you will need to make changes to the CSS file. At the end of the article I will show you how.
1. background-color : #F5F5F5; this line is responsible for the background color. Mchange to turquoisebackground-color: #00FFFF;
2. border : 1px solid #E3E3E3 ;this line defines the boundaries of the block. Let's put five pixels instead of one and change the color to brown border : 5px solid #800000 ;
3. border-radius : 4px;
The radius and rounding at the corners are indicated here. We put 24 instead of 4 border-radius:
24px ; 
This is how you can edit a joomla 3 template, customizing its appearance. Almost everything on the site changes: colors, fonts, sizes, etc.
How to change the CSS of a joomla 3 template
After practicing in the panel and achieving the desired results, you need to make changes to the CSS file. Everything here is also quite simple.
Hover your mouse over the header with the name of the CSS file, next to it in brackets you can see the line number with the code, in my case “line 2116”. The path to the CSS file will open in front of you. 
1. Follow the path "sajtnajoomla.ru/templates/protostar/css/template.css"
2. Open file " template.css", using Notepad++.
3. Find line 2116 and edit the CSS code of the joomla 3 template.
Don't forget to make a copy of the CSS file you'll be editing first! That's all, if you have any questions, ask them in the comments.
Lessonjoomla No. 15. Changing the template design.
Hello, dear readers of the blog site! In this lesson you will learn how you can change samplejoomla. We will redesign the site header and put our own pictures in it.
On this moment You should already have downloaded this new template from any site you found.
It is advisable to have several of them so that you can choose. You can read where to look for them in the previous lesson No. 14. The easiest way is to save all these files in one folder so as not to get confused later.
In order for the design of our site to change, a new template must be installed. How to do it?
Launch Denwer on your computer to get started.
Go to the administrative panel in the “Extensions” menu - install/uninstall.
In the “download package file” line, we are interested in the “Browse” button. Click on it and now we need to select the template prepared for installation. If it is in a separate folder, which I tell you about all the time, then you will quickly find it. Click on zip archive, highlighting the template, then open.
You can simply select the files in order to see what works for you and what doesn't.
Then we need to click on the “download file/install” button itself.
A message should appear indicating that the template was installed successfully.
Sometimes for some reason an error may appear, then try installing again. This error may appear both when opening the file before installation and after it.
If it didn’t work out, choose another template for yourself, and then simply delete this one.
Some of them may not be very good good quality because they are free.
Where can I look at the new templates?
They will be where everyone else is.
We go to the extension manager - templates, and there we find everything that we just installed. There are small pictures next to them; they pop up when you hover over the name.
This is what I have in the screenshot.
To check what we have done, we need to click to the left of the name (in the circle).
And then click on the “default” button, after which there will be a yellow asterisk in the line next to the name.
After this, the appearance of the site will change. Let's go to view and check.
What surprises might await you when changing patterns?
Using this screenshot as an example, you will now understand everything.
After installation, I made one of the default templates. The preview shows that the top menu has disappeared somewhere.
Why did this happen, since we did everything right?
If you go in and check the positions for the modules, as we did in the last lesson, then it’s clear that here it’s simply not possible to display the top menu the way we want.
What is the way out? Rearrange the top menu or look for a different template. I chose the second option.
Now everything has turned out exactly as it should.
Some positions for modules may simply be missing. If the top menu is now in the user3 position, then after installing a template that does not have such a position, the top the menu will disappear. You will have to move it to the right or left, or look for a new template for yourself. Let's try to check what positions there are. You already know how to do this.
Go to the “Template Manager”, select the name and then change it.
Therefore, you need to choose the position that is provided. For example, top or right.
If you buy a template for money, then they will do whatever you want. But we are not spending anything yet, because we are creating the site ourselves. This means that you will have to try a little yourself and, by brute force, choose exactly what is suitable.
Therefore, I recommend downloading more than one template. There is no need to rush, the main thing is that there are all the positions for the modules that you need. Look, choose, make different templates by default until you like one thing, the most beautiful and convenient for all menu items.
Before preparing the site for loading, we will definitely remove everything unnecessary. How to do this will be written separately.
How to change the design?
The pre-made template has a logo that you don't need. Different pictures in the header you will definitely want to change it to your own.
Let's look at where all these ready-made pictures are stored.
Go to “my computer” - drive Z – home – mysite – www
We go to the templates folder, this is where all the templates are stored.
I currently have 13 of them.
Now you need to find by name the one that is currently selected by default.
Go back to the admin panel and check the name that has a yellow star next to it, and then find this folder here.
As an example, I have another template related to dentists.
This is what the hat looks like at the moment.
Naturally, it doesn’t suit me; the picture must be replaced.
But how to do this?
You can’t just insert any photo, you need a little trick.
If you want to change the picture, first prepare a new one.
Quite a difficult task at first glance, but we can handle it!
Read what the order should be, and then simply repeat it on your site.
We go to the folder of the template that you will redo through “My Computer”. We are interested in pictures, so we select the images folder.
Take your time so as not to mix up the folders.
So, how to find the file you need, what is it called and what exactly needs to be done?
You won’t find the word hat here, even if you search for a very long time.
You'll have to work a little harder and pay attention to the file called header. After it it can be written - .jpg or - .png or - .gif
Such a file can have different names, for example, logo or even banner.
To avoid mistakes, look at the left column; when you click on the name, the corresponding pictures will appear in it.
This screenshot shows that I am interested in the file banner1.jpg
If you are going to change the site header, or rather the header file, then you will have to make it the same. It must have this name, size and extension. If the source file contains png, then you need to make exactly the same file, for example, in Photoshop.
And replace the old file with the new file. After such a clever substitution, the header of your site will also change.
The procedure for working with the file is as follows.
2) In any graphic editor you need to create your own picture. It should have exactly the same name, size in pixels and extension.
They say that in the future only those who cannot swim will be accepted into the Marine Fleet. They protect their ship much better!!!
I show with a specific example.
My file is called like this: banner1.jpg (its size is 979x354).
In CorelDraw I made a simple picture, it is exactly the same size, called banner1, and I saved it in jpg format
Then again go to the folder with this template, select the images folder in it and insert a new file with your picture here.
You will definitely be asked: “Replace the file?”
You agree, after this the new image will be responsible for your design in the site header, and the old one will simply disappear.
Look what happened in this screenshot.
The principle of replacement is simple, do everything in order and take your time.
In exactly the same way, you can change the logo and change the color of each button.
First, save the old file, then prepare a new one in a graphic editor. And replace the old one with a new one. Here in the template there is a logo for dentists. Of course, you will have to change it to your own.
If you change the name or size, nothing will work.
Sometimes after replacement, the old image is still loaded, although it is no longer there. This happens because the old image is loaded from the cache.
In this case, you need to update the site (F5 button).
If you want to change the size of the header and replace the -jpeg format with –gif, you can do the editing via HTML and CSS, but this is too difficult for beginners. Therefore, it is recommended to start by simply replacing the files with your own. This is the easiest way to change the design.
It is advisable to draw pictures in vector graphics, because when enlarged they do not lose their quality.
But if you have never worked in CorelDraw, draw in Photoshop. Even after your resource is on the Internet, everything can be changed.
Outputting standard modules
Dear readers, we continue to publish materials dedicated to you Joomla 3. Today we’ll talk about how to change the background of your website. This is quite easy to do on Joomla.
First you need to open your website in any browser, for example we use a browser Google Chrome.
1) Click right click mouse in the place on your site where you want to change the background and select "View code"(the name may differ in other browsers).
For example, we decided to change the background of our website to red. Therefore, click on the right or left side of the site.
2) A window will appear in front of us where the source code of the page will be indicated.
Here we are interested in the meaningbackground - color. As you can see, the site is set to a grayish tint. Let's change it to bright red. To do this, click on the color box and select the shade we need. Remember the digital designation of this color (for example, for white it isf000000 ).
Now closing the window source code, we will see that the background color on the site has actually changed.
Select the shade you need and move on to the next step.
3) Having selected the option we need, you need to set the color setting in the administrative panel of your site. To find out exactly where the file responsible for the background color is located, open the “View Code” window again.
Now hover over the title opposite the tag body and you will see in which file the code responsible for changing the background color is located. By the way, the numbers after the colon indicate the line number where this code is located.
Launch your control panel and find this file.
