Before you start changing the header of the site made on Okis.ru, download files for further work.
So, how to change the head cap on okis.ru? To begin with, unzipped the file you downloaded and find a site cap there, which has a name shapka.png. . We need to upload it to our site. How to do it? Go to the "Photo Load" item in the site management panel.
Here you can upload images to the site.
Before you load the cap of our cocktail site, be sure to remove the checkbox with "Reduce the size of an image up to 500 x 500 px"Since the hat is wider than 500 px. The tick was removed, now we press the "Overview", then find the shapka.png file and click "Open".
After you downloaded the image below you will see a link where the hat is located.
Go to CSS editor -\u003e Edit CSS.. This time we will use the auxiliary buttons. Click on the "Site Cap" button and enter the address of the link to the picture with the cap, which is shown in the administrator of your site, then click "Save".
Click "Update". You will see that in the field where all styles are written, a new code appeared:
div.art-Header-JPEG (Background: URL (/ Path_file / shapka.png);)
This is styles for the site cap.
In my case, the path to the file is: /img/cocktail60/shapka.png
So in my admin package the following code was written:
Div.art-Header-JPEG (background: url (/img/cocktail60/shapka.png);)
You have the same Path_K_File to the cap another
So you copy the link that is shown in your admin.
Update main page Site, and you will see that the hat has changed. But there is a small deficiency, which we will correct now - if you look closely, you will see that in the upper corners, the circuit of the cap, which does not fit into our design in our design.
The fact is that in all templates of the site Okis.ru, where there are rounded cornersThe hat consists of two parts: from main Picturewhich we downloaded and from circuit caps. Let's change the circuit of the cap. Go back to the "Download photo" item in the site control panel and download the file there. shapka_kontur.png. . Before loading the circuit of the caps, do not forget to remove the checkbox with "Reduce the size of the image up to 500 x 500 px". In the admin, there is no button "Caps Caps", so we will add styles manually for this element. IN editor CSS. With a new line, we need to register the following code:
div.art-Header-PNG (Background: URL (Path_Fail /shapka_kontur.png);)
In my case, the path to the file loop is such:
Therefore, I prescribe the following code:
div.art-Header-PNG (Background: URL (/Img/cocktail60/shapka_kontur.png.);}
Do not forget that your path to the file is different from my.
Save the changes.
If you update our site, you will see that the blue corners are no longer observed.
Now you know how to change the header of the site in the designer of the Ox site. In the next lesson, you will learn how to change the bottom of the site on Okis.ru.
Additional lessons for creating and maintaining the site on OKIS:
Lesson number9. How to organize communication on the site made on okis.ru
Lesson number 10. How to activate the site on OKIS.ru using WebMoney
Lesson number 11. Learning to add a new page on OKIS.ru and work with the contents of the page.
In this article we will talk about how to put the header on the site and how to change the cap on the site running on WordPress.
First, let's look at how to put the header to the site, created not on some kind of engine, but using an HTML editor, for example, Dreamweaver, NVU, etc. To begin with, I want to say that any hat for the site is primarily the usual picture made in jPG format or PNG. Therefore, change the header on the site created manually, it is very simple: open the page in the HTML page editor, go to the very top of the page, and then simply insert the image in this page. In NVU, this is done even easier: Press the image "Image" icon and then insert the address of the picture.
An important point is that the address of the reference to the picture must be hypertext, i.e. Begin from http: //, and therefore, first the picture you need to upload to your site, then copy the address of the link to the picture and this address is already inserted into the page or page of the site.
How to put a header on the site that is created on the popular WordPress engine or how to change the cap on the site? It is not so difficult, as it seems at first glance. The only moment I want to mention at the very beginning is the copyright to the template. You probably know that if you buy or download free templates for the WordPress, then you can't just take and change the cap on the site - so you break the copyright. You can freely change the caps only in that template, the rights to which belong to you, that is, you created it yourself.
Nevertheless, often many authors of templates go to meet creative webmasters, and allow you to change the caps, but you should still write to the author and ask permits. It will not only be a sign of good tone, but also will save you from the proceedings for violation of copyright.
ITC, how to change the header on the WordPress website:
1. Open the template on your computer. Find and open the Images folder in which the image of your template will be located. Site caps will be called Header. I recommend that you copy this picture somewhere else to another place (for example, on the desktop) - in case you will not like something in the new hat.
2. Take a new header for the site and open it in a photo editor in which you can change the size of the image. If you do not have a photo editor, right-click on the Header file and select: "Open with" and then select Paint from the list. it basic program To edit images, it is on any computer running with Windows.
3. See sizes in pixels using the Resize button. Close Paint.
4. Open a new header (also in Paint) and using the Resize button, put the same image size in pixels, which was from the previous picture. If the image is fuzzy or ugly, cancel the action using the Cancel button. Try making a new image by cutting it off (CROP) or select a new image. The size is of fundamental importance, otherwise the site you will "go."
5. When you got the desired picture, save it in the Images folder of your template, under the same Header name. Please note that if the original picture is created in JPG, the new picture should also be in this format. And if the original picture is created in PNG, then make a new picture in PNG too.
Why is it important? The fact is that the WordPress works on PHP, so in one of the files of your template on pHP Language It is written that the template refers to a picture of a specific format. If you change its format (instead of jpg, put PNG or GIF), then the cap will be displayed on it.
6. Now pour a new template for hosting (WP-Content / Themes folder).
On the freelance exchanges, customers are often asked to change the design of some fragment of the site, such as caps. The easiest way change site capSo it is to create it from scratch. Why do I think so? Please will be arguments.
When I open the source code of someone else's site, then with a rare exception, I see unstructured HTML code, inconsistently written CSS. And there is almost no comments. Focus in such a chaos, it is very difficult and I understand that I will do everything faster.
Such a mess happens on sites made unprofessional, so the customer is drawn with such masterpieces to the freelancers. Competently made sites, rarely convert, because the probability of stumble upon a poorly made site is very high.
Especially for this article, I made a screenshot of one wonderful cap, accidentally found on the Internet, at some site and I will improve it, describing the whole process in detail.
So looked cap to changes:
This creation has a clear lack of space for all elements. From such a dense neighborhood of the elements and the absence of an empty space, the eyes are going to a bunch. It is necessary to discharge the space, due to the creation of a new row for contact information.
What would I change in design?
- Font and color from the logo
- Size and color of the other font
- Remove the green stripe
- Block with contacts place on top panel
After change:
Between tags head. in HTML File:
// prescribe meta tag for adaptability
// Connect other fonts
// Connect the Font Awesome library
// Connect external file. styles come here to write styles
// Download and connect styling normalization file
Make a layout we will be on flexbox..
The first row is a panel with contacts (Top Header).
HTML Marking
In a block container with class top-Header., Let's place three flex elements - paragraphs with text.
Massage salon for your health and beauty
Tel. (+372) 5514704, 58079045
Info and recording: Daily from 9:00 to 21:00
CSS styles
/ * Shared styles for caps * /Body (
Font-Family: "Forum", CURSIVE;
Color: # 777;
Background-Color: #FFF;
}
Infoblocks will stand in a row thanks display: Flex. Property space-around. Equally distributes empty space between infoblocks. One-sided gray frame, visually delimit top panel From the cap.
/ * Flex Container for Upper Info Blocks * /
.top-header (
DISPLAY: FLEX;
Padding: 5px;
Font-Size: 100%;
Border-Bottom: 1px Solid # EFD0D0;
Position: relative;
}
We highlight some words with green.
/ * Green color info-blocks * /
.top-header .green (
Color: # B2DB41;
Font-Weight: Bold;
}
Temporarily highlight the red and black frames so that it is clear where the flex container, and where the flex elements.
Second Row - Cap (Header)
From left to right, the logo is first, and then the navigation menu.
HTML code
Starts with the opening tag header., inside which a block with a logo. The logo is inserted, as the link leading to the main page.
Massaažimaailm
CSS Code
/ * Flex Cap Container * /Header (
DISPLAY: FLEX;
Justify-Content: Space-Around;
Padding: 5px;
Border Bottom: 5px Solid # B2DB41;
}
/ * Styles for all links inside Flex Container * /
Header A (
Display: Block;
Color: # 212121;
Padding: 12px;
Text-Decoration: None; / * removes underscore * /
Font-Size: 100%;
Text-Shadow: 0 1px 0 #FFF;
Border-Radius: 4px;
}
Here we indicate the relative width of the block under the logo, which means the remaining 70%, will occupy navigation. Setting interest, one can more accurately distribute children elements in the parent container.
/ * Width of the child block under the logo * /
.wrap-logo (
width: 30%;
}
Setting the size of the font in%, we care about super big ScreensAfter all, pixels are hard as the size.
/ * Logo stylization * /
.wrap-logo #logo (
Font-Family: "Roboto Slab", Serif;
Font-Size: 200%;
Font-Weight: Bold;
}
The logo looks fresh if you make it two-color.
/ * Green color from part of the logo * /
.wrap-logo span (
Color: # B2DB41;
Hello dear friends! As a rule, newcomers choose a simple template of the site, but sooner or later there is a need to change the header. The question is simple, but many newcomers do not know how to change the headpress of the WordPress site. This article responds to this question.
Simple website template, replacement of site caps
At the time of creating a site (blog) there were no knowledge. Therefore, a very simple WordPress website template was chosen, including the site cap. At the same time, there were two pictures in the header:
- the top picture was a simple rectangle, painted under the color of the general template;
- the bottom cap of the caps represented the image of the clock and was also painted under the color of the general template, the so-called "header image".
The other day I decided to experiment with the cap of my site, remove the journey of two pictures, make a replacement of the header of the site. To do this, it was necessary to simply remove the lower picture - nothing complicated.
Next, enabling the upper picture of the site caps, faced a problem. After the final picture was installed, it turned out that it was also installed by default and in the footer (lower part of the site page).
I tried to find information on the Internet on how to solve the problem, but I did not find anything. I had to solve the problem of the method of trial and errors. A simple website template was not so simple.
How to change the head hat? So, in order. After removing the image of the header, it was decided to impose a picture in the form of coins in the head head and make an inscription. As it is done, I will not reflect in this article, this is a separate topic. But for the general understanding of the process, I will briefly describe.
Before you begin to replace the heading of the site, we need to know the address of the image. If you work in browser Mozilla. Firefox, you need to put the right mouse button on the cap (wallpaper) and click the right mouse button, press the "open background image" in the dialog box.
In a new window, an image of the site caps opens. In the address bar of the browser (above), the address of our site cap (pictures) is registered. The address of my header looks like this: copy and save this address.
Now we see where our picture is lying on the hosting: WP-CONTENT folder; Themes folder; Zeestyle folder; The IMAGIS folder finally, the name of the picture is header_bg.png. This is useful to us in the future.
IN google browser Chrome address learns almost as well. We bring the mouse to the site cap, press the right mouse button, select "Copy URL Pictures" dialog box, also copy and save the link. There are templates where pictures are opened with a more cunning way.
Next, open a picture in a new window and can work with it. You can edit it in Photoshop or other editor for images. Work with my site cap was performed in the PIXLR program (this online Photoshop). Read more about this in the articles "" and "".
After completing the picture, it must be saved with the same expansion and the same geometric dimensions as the old picture. To save the name, the edited picture is renamed (I do it in Total Commander.) And we assign the name HEADER_BG.PNG name. This name is taken from the above link (each name will have its own).
Replace the picture (caps) of the site can be made either via FTP, or directly on the server, I did directly. To do this, we go to our hosting, open our website, open the public_html folder, the WP-Content folder, Themes, Zeestyle, Images and find our header (picture) - Header_bg.png.
We delete the picture found, and you download a new edited picture in its place. We update and go to the site, I also update it and see that our edited cap (picture) is installed. Everything is very simple - the replacement of the header of the site is made.
As already mentioned at the beginning of the article, my hat was established not only at the top of the site page, and in the footer.
The reason was found and eliminated. The fact is that my template in the header and in the footer is represented by rectangles that are simply painted with dark blue, under the color of the main template. So it turns out that the source of the cap and the futret was the same picture (see the reference above), so changing the cap pictures of the cap changes and the image of the footer.
To solve this problem, it is necessary to divide the links, make a separate picture for the cap and separately for the futtern. To do this, we return to the adminpanel of our site, come in " Appearance"," Editor "and choose" Styles "," Style Table "(style.css).
Find Footer and see there the name of our picture in the line - Background: URL (images / header_bg.png) NO-REPEAT # 1D4C82; Pre-code "Style Table" is better to save. If you allow an error, you can always return to the original state.
We remember that header_bg.png is the name of the picture of our header. Now in the code instead of Header We write Footer (see Screen),
the rest do not touch. We update the file, go to the site, update and see that everything has become in place. Edited hat in its place, the foothold has an old editor. This work can be completed. Simple website template ready.
Just in case, I put a picture of the footer on the server, perhaps in the future I will edit. To do this, the caps of the caps were taken to the alterations and renamed Total Commander - instead of header_bg.png write Footer_bg.png and pour it on hosting. Press the image to the Images folder, where the picture of our hat is located.
Of course, such a situation may occur not on all templates, but templates having in the header and the foothold simple fill (like me) will have similarity and this method can be applied. If you know, work can be done in a couple of minutes. As you can see the site template, though simple, but I had to tinker before you understand how to change the header of the site.
Sincerely, Ivan Kunpan.
P.S. For correctly creating a blog, it is properly promoted, you need to do everything in a strict sequence. Such a sequence is shown in my intelligence card, which I developed on my own experience. . It will be useful and, you can also download the free book "How to write an article for blog".
Get new blog articles directly by mail. Fill out the form, click "Subscribe"
We start a series of lessons to edit the Joomla 2.5 template. In this lesson we will look at
It is necessary to immediately say that this process on different templates of different developers will take place in its own way. Therefore, I will try to tell the principle of searching for the location of the position of Heider, the logo and editing CSS. As always I recommend all manipulations with the site to do on denwer Local Server In order not to bother let's take a template installed on this site.
To begin with, it is necessary to determine which position of the module is our Header and what else in the header there are positions. To determine the positions of the modules in the template Joomla 2.5. After our site we recruit ? TP \u003d 1. That is, it will look like this: http: // Your_Sight /? TP \u003d 1.
We update page (F5) and ... I do not see anything. So B administrative part of the site Disabled display of site positions. We go to the admin page, go to the settings
and turn on the display of positions as shown in the photo below. Do not forget to survive.
We update the page again. Everything. The positions of the modules appeared. We see that there are several of them: Headerbar, Logo, Counter, Banner. At the same time we see that the conditional sizes of the positions are highlighted (Counter, Banner), but Headerbar, Logo.
We logically understand that the position of the HeaderBar module is responsible for the header of the site, and the Logo position for the logo.
My personal belief that you should always check simple ways to solve the problem, and if it did not work out, then to climb deep into. The simplest thing to go to the settings of the Joomla 2.5 template itself and see which settings there are there. In any case, as when installing simply template on Joomla 2.5, or after installing the Joomla 2.5 template from the QuickStart startup, the first thing you need to go to the template settings and deal with its setup capabilities. At the same time, there is even no need to Russify Joomla 2.5 as the pattern itself will not be translated into Russian.
Many template developers in its settings make it possible to edit hAPES (Header), as well as the Footer (footer) of the site and many other robes. However, among many settings in this template, the light path was not found.
And so, knowing the position of the header, as Headerbar goes to "Expansion - Module Manager" and in the "Position Selection" drop-down menu we are looking for a headerbar position. It is not there and that's right there, because there is no cap in the template itself. There is only a logo. The most correct I. fast way The output of the header on the site is in the "Module Manager" clamp the "Create" button.
And in the selection of the type of module, select "HTML code". With it, we can not only take part HTML codeBut also post a picture of our caps.
However, to output the header to the position of the module it must be pre-prepared, and for this we need to know the width and length of the position of the module. Remember the cool plugin Firebug for Firefox And start using it. With this expansion, we study the position of HeaderBar and see
what kind of positioning is answered by file Layout.css and its height is 110 pixels. By the way, you can change the width to the size you need in this cSS file. Now it is necessary to determine the length of our cap. In most templates, the width is set in the settings. We go to our template and in tincture we see that the length of our template is 1100 pixels. Now we can prepare our header with the necessary parameters using the graphics editing program (for example. Adobe Photoshop.). I will not tell how it is done. This is devoted entire sites.
The prepared file with the cap is closer to the "Images - Stories" folder of the site, but not template. Now we place it using the "HTML code" module. Headers hide. We choose the position of HeaderBar and persist.
By the way, so you can do what different pages The site was displayed a different Header. We prepare several hats, carry them into the above folder and stir up using several "HTML code" modules with an output at certain menu items.
Heider figured out. We will edit now the logo. Knowing the position of the module, namely logo check it. We go to the "Extensions - Module Manager" and in the "Position Manager" drop-down menu we are looking for a position LOGO. There is such a path to the picture with the name LOGO.png. But disabling it, we do not see changes on the site. So, this picture is used only when rolling is simply the template for the already installed Joomla 2.5. But when installing the Joomla 2.5 template from fast start "QuickStart" How we use a picture from another folder. And naturally from the template.
Therefore, we start looking for another way. Again, using the FireBug plug-in for Firefox, we investigate the template logo and see,
what kind of positioning is responsible for the same Layout.css file and to see where it is (path to the file) open it in a new tab. Via notePad ++ programs Open and looking for a string 259.
Here we can experiment with a width, length of the logo. Do not forget to save, and update the site page to view the result. Another huge advantage notepad ++ is something that you can always return to the source state of the file, but only if you have not closed the NotePad ++ window. Returning to the initial state using the "Cancel" button.
Well, to change the design of the logo, we will need Adobe Photoshop and the elementary knowledge of this program.
So we looked at you how to edit (change) header in joomla template 2.5.
Good luck to you in your endeavors.
