The easiest way to create a website is using a template. However, to make the resource stand out, you need to change the default layout. And here you cannot do without basic knowledge of html and css.
Instructions
Step 1
Find the website template that suits you best on the Internet. Pay attention to its capabilities, the ability to adapt to the size of the monitor, the features of the menu and the layout of the columns. Download the version you like to your computer, unpack the archive. Check its performance by uploading the files to the root of the site. Perhaps the template contains errors and will not install correctly, then there will be no point in working with it in the future.
Step 2
Even if you are not going to completely redo the template, replace most of the images, and especially those that are located as a logo. Replace each picture in this way:
- open a graphic file in Photoshop;
- in the menu "Image" - "Image size" look at its parameters;
- open a new sheet with exactly the same dimensions;
- create the desired image using the application tools;
- flatten all layers and save (not for web) a new picture under the same name and in the same folder, setting the original format.
Thus, instead of one image, another should appear.
Step 3
As soon as you change all the pictures, zip the files folder (in the case of Joomla) and upload it through the site admin panel in the "Extensions" menu. See if the theme displays correctly with the new illustrations.
Step 4
The rest of the parameters should be changed in style.css. Moreover, it is much more convenient to do this not through the admin panel, but on a computer. It is reasonable to use localhost (Denver) to see the result of the transformations as soon as possible. This will avoid the need to upload the result to the server every time in order to view the results after the next edit.
Step 5
Download the free FireBug plugin for Mozilla Firefox. After installation, a yellow bug icon will appear in the upper right corner of the browser. Click on it or press the F12 key and at the bottom of the screen, the page code will appear in a collapsed version. It can be opened by hovering the mouse over the plus signs. And if you click on the line of an element, it will be highlighted at the top of the screen. On the right side of the window with the code, you will find styles indicating the lines that are responsible for the appearance. And it will immediately become clear where you need to edit the style file to change the design.
Step 6
Open style.css in Notepad ++. You can use other programs designed to edit the code, but for this purpose you cannot use the standard "Notepad", otherwise there will be errors due to the encoding. Use FireBug to find the parameters you want to change and edit them in Notepad ++ at the same time.
Step 7
Save the final css and upload the file to the server.
