CSS კოდი

/ * Styles ყველა ბმულები შიგნით Flex კონტეინერი * /
Header a (
ჩვენება: ბლოკი;
ფერი: # 212121;
Padding: 12px;
ტექსტის გაფორმება: არა; / * შლის underscore * /
ფონტის ზომა: 100%;
ტექსტი-ჩრდილი: 0 1px 0 #FFF;
სასაზღვრო რადიუსი: 4px;
}

აქ ჩვენ მიუთითეთ ლოგოს ბლოკის ნათესავი სიგანე, რაც ნიშნავს 70% -ს, ნავიგაციას დაიკავებს. ინტერესის დადგენისას, მშობლის კონტეინერში ბავშვთა ელემენტების უფრო ზუსტად შეიძლება გავრცელდეს.

/ * ბავშვის ბლოკის სიგანე logo * /
.wrap-logo (
სიგანე: 30%;
}

შექმნის ზომა შრიფტის%, ჩვენ ზრუნავს სუპერ დიდი ეკრანებიყოველივე ამის შემდეგ, პიქსელი რთულია, როგორც ზომა.

/ * ლოგო სტილიზაცია * /
.wrap-logo #logo (
შრიფტის ოჯახი: "Roboto Slab", Serif;
შრიფტის ზომა: 200%;
შრიფტის წონა: თამამი;
}

ლოგო გამოიყურება სუფთა თუ თქვენ ორი ფერი.

/ * მწვანე ფერის ნაწილი ლოგო * /
.wrap-logo span (
ფერი: # B2DB41;

გამარჯობა ძვირფასო მეგობრებო! როგორც წესი, newcomers აირჩიოს უბრალო შაბლონი საიტი, მაგრამ ადრე თუ გვიან არის საჭირო იმისათვის, რომ შეცვალოს header. კითხვა მარტივია, მაგრამ ბევრმა ახალბედა არ იცის, როგორ შეცვალოთ WordPress Site- ის სათავეში. ეს მუხლი პასუხობს ამ კითხვას.

მარტივი საიტი თარგი, ჩანაცვლება საიტის caps

ადგილზე შექმნის დროს (დღიური) არ იყო ცოდნა. აქედან გამომდინარე, ძალიან მარტივი WordPress საიტი თარგი იყო შერჩეული, მათ შორის საიტი cap. ამავდროულად, ჰედერის ორი სურათი იყო:

• ზედა სურათი იყო მარტივი ოთხკუთხედი, რომელიც მოხატული ზოგადი თარგის ფერით;
• ქვედა ქუდი CAPS წარმოდგენილია სურათის საათის და ასევე მოხატული ქვეშ ზოგადი თარგის, ე.წ. "ჰედერის გამოსახულება".

მეორე დღეს მე გადავწყვიტე ექსპერიმენტი ჩემი საიტი, ამოიღონ მოგზაურობა ორი სურათით, გააკეთეთ ჩანაცვლება ჰედერის საიტი. ამის გაკეთება, აუცილებელი იყო უბრალოდ ამოიღონ ქვედა სურათი - არაფერი რთული.

შემდეგი, რაც საშუალებას მისცემს ზედა სურათს საიტის caps, წინაშე პრობლემა. საბოლოო სურათის დამონტაჟების შემდეგ აღმოჩნდა, რომ იგი ასევე დაინსტალირებულია ნაგულისხმევი და ქვედა ნაწილში (საიტის ქვედა ნაწილი).

მე შევეცადე ინფორმაციის მოძიება ინტერნეტში, თუ როგორ უნდა გადაწყდეს პრობლემა, მაგრამ მე ვერაფერს ვიპოვე. მე უნდა გადავწყვიტე სასამართლო პროცესის და შეცდომების მეთოდის პრობლემის მოგვარება. მარტივი საიტი თარგი არ იყო ასე მარტივი.

როგორ შევცვალოთ უფროსი ქუდი? ასე რომ, იმისათვის, რომ. სათაურის სურათის მოხსნის შემდეგ, გადაწყდა, რომ სურათის ჩამოყალიბება სათავეში მონეტების სახით და წარწერა გააკეთოს. როგორც ეს კეთდება, ამ სტატიაში არ აისახება, ეს ცალკე თემაა. მაგრამ პროცესის ზოგადი გაგებისათვის, მოკლედ აღწერს.

სანამ დაიწყებთ საიტის სასაქონლო პოზიციის შეცვლას, ჩვენ უნდა ვიცოდეთ გამოსახულების მისამართი. თუ თქვენ მუშაობთ ბრაუზერი Mozilla. Firefox, თქვენ უნდა დააყენოთ მაუსის მარჯვენა ღილაკს ქუდი (ფონი) და დააჭირეთ მაუსის მარჯვენა ღილაკს, დააჭირეთ "ღია ფონის სურათს" დიალოგურ ფანჯარაში.

ახალ ფანჯარაში, საიტის ქუდების იმიჯი იხსნება. ბრაუზერის მისამართების ბარი (ზემოთ), ჩვენი საიტის ქუდის მისამართია რეგისტრირებულია. ჩემი სათაურის მისამართი ასე გამოიყურება: ასლი და შენახვა ამ მისამართზე.

ახლა ჩვენ ვხედავთ, სადაც ჩვენი სურათი მასპინძლობს: WP- კონტენტის საქაღალდეში; თემების საქაღალდე; Zeestyle საქაღალდე; წარმოსახვითი საქაღალდე საბოლოოდ, სურათის სახელია header_bg.png. ეს სასარგებლოა ჩვენთვის მომავალში.

-ში google ბრაუზერი Chrome მისამართი თითქმის ასევე სწავლობს. ჩვენ მოუტანს მაუსის საიტის Cap, დააჭირეთ მაუსის მარჯვენა ღილაკს, აირჩიეთ "ასლი URL სურათები" დიალოგური ფანჯარა, ასევე ასლი და შენახვა ბმული. არსებობს თარგები, სადაც სურათები გაიხსნა უფრო cunning გზა.

შემდეგი, გახსენით სურათი ახალ ფანჯარაში და მასთან მუშაობა შეუძლია. თქვენ შეგიძლიათ შეცვალოთ ეს Photoshop ან სხვა რედაქტორი გამოსახულებები. მუშაობა ჩემი საიტის ქუდი შესრულდა PixLR პროგრამაში (ეს ონლაინ Photoshop). დაწვრილებით ამის შესახებ სტატიაში "" და "".

სურათის დასრულების შემდეგ, ის უნდა იყოს შენახული იგივე გაფართოებით და იგივე გეომეტრიული ზომები, როგორც ძველი სურათი. გადარჩენა სახელი, რედაქტირებული სურათი ეწოდა (მე ამას სულ მეთაური.) და ჩვენ მივცემთ სახელი header_bg.png სახელი. ეს სახელი აღებულია ზემოაღნიშნულიდან (თითოეული სახელი ექნება საკუთარ).

ჩანაცვლება სურათის (CAPS) საიტი შეიძლება გაკეთდეს არც FTP, ან პირდაპირ სერვერზე, მე პირდაპირ. ამისათვის ჩვენ მივდივართ ჩვენი ჰოსტინგის, გახსენით ჩვენი ნახვა, გახსენით public_html საქაღალდე, WP-Content Folder, თემები, Zeestyle, სურათები და იპოვოს ჩვენი header (სურათი) - header_bg.png.

ჩვენ წაშლა სურათის ნაპოვნი, და თქვენ ჩამოტვირთოთ ახალი რედაქტირებული სურათი თავის ადგილზე. ჩვენ განაახლეთ და მივდივართ საიტზე, მე ასევე განაახლებს და ვნახავ, რომ ჩვენი რედაქტირებული ქუდი (სურათი) დამონტაჟებულია. ყველაფერი ძალიან მარტივია - საიტის სათაურის ჩანაცვლება ხდება.

სტატიის დასაწყისში უკვე აღინიშნა, ჩემი ქუდი ჩამოყალიბდა არა მხოლოდ საიტის გვერდით და ძირი.

მიზეზი აღმოჩნდა და აღმოიფხვრა. ფაქტია, რომ ჩემი თარგის სათაურში და ქვედანაყოფში წარმოდგენილია მართკუთხედები, რომლებიც უბრალოდ მუქი ლურჯით არის დახატული, ძირითადი თარგის ფერით. ასე რომ, აღმოჩნდება, რომ CAP- სა და FUTRET- ის წყარო იყო იგივე სურათი (იხილეთ ზემოთ მითითებული მითითება), ასე რომ შეცვლის ქუდი ცვლილებების ქუდი სურათები და გამოსახულება ძირი.

ამ პრობლემის მოსაგვარებლად აუცილებელია კავშირების გაყოფა, ცალკე სურათზე ცალკე სურათისთვის ცალკე. ამის გაკეთება, ჩვენ დავბრუნდებით ჩვენს საიტზე AdminPanel- ში, მოდი " გარეგნობა"," რედაქტორი "და აირჩიოს" სტილის "," სტილის მაგიდა "(სტილი.სსი).

იპოვეთ ფუტკარი და ვნახოთ ჩვენი სურათის სახელი - ფონზე: URL (სურათები / header_bg.png) არა-გამეორება # 1d4c82; წინასწარი კოდი "სტილის მაგიდა" უკეთესია გადარჩენა. თუ შეცდომა დაუშვას, ყოველთვის შეგიძლიათ დაბრუნდეთ თავდაპირველ მდგომარეობაში.

ჩვენ გვახსოვს, რომ header_bg.png არის ჩვენი სათაურის სურათის სახელი. ახლა კოდექსში ნაცვლად header ჩვენ წერენ footer (იხილეთ ეკრანზე),

დანარჩენი არ შეხებია. ჩვენ განაახლეთ ფაილი, გადადით საიტზე, განახლება და ვნახოთ, რომ ყველაფერი გახდა. რედაქტირებული ქუდი თავის ადგილზე, დასაყრდენს აქვს ძველი რედაქტორი. ეს ნამუშევარი შეიძლება დასრულდეს. მარტივი საიტი თარგი მზად არის.

მხოლოდ იმ შემთხვევაში, მე დააყენა სურათს ქვედა სერვერზე, ალბათ მომავალში მე რედაქტირება. ამისათვის, ქუდების ქუდები გადაიყვანეს ცვლილებებზე და შეცვლილი მეთაური - ნაცვლად header_bg.png დაწერეთ footer_bg.png და დაასხით მას ჰოსტინგი. დააჭირეთ სურათს სურათების საქაღალდეში, სადაც ჩვენი ქუდის სურათს მდებარეობს.

რა თქმა უნდა, ასეთი სიტუაცია შეიძლება არ მოხდეს არა ყველა შაბლონზე, მაგრამ თარგები ჰედერით და დასაბუთებული მარტივი შევსებისას (ჩემნაირი) მსგავსება იქნება მსგავსება და ეს მეთოდი შეიძლება გამოყენებულ იქნას. თუ იცით, მუშაობა შეიძლება გაკეთდეს რამდენიმე წუთში. როგორც ხედავთ საიტი თარგი, თუმცა მარტივი, მაგრამ მე მქონდა tinker სანამ გესმით, თუ როგორ უნდა შეიცვალოს ჰედერის საიტი.

პატივისცემით, ივან კუნპანი.

P.S. ბლოგის სწორად შექმნას, სწორად არის ხელშეწყობა, თქვენ უნდა გააკეთოთ ყველაფერი მკაცრი თანმიმდევრობით. ასეთი თანმიმდევრობა არის ჩემი სადაზვერვო ბარათში, რომელიც მე განვითარებული ჩემი საკუთარი გამოცდილება. . ეს იქნება სასარგებლო და, თქვენ ასევე შეგიძლიათ ჩამოტვირთოთ უფასო წიგნი "როგორ დავწეროთ სტატია დღიური".

მიიღეთ ახალი დღიური სტატიები პირდაპირ ფოსტით. შეავსეთ ფორმა, დააჭირეთ "გამოწერა"

ჩვენ ვიწყებთ სერია გაკვეთილებს Joomla 2.5 თარგი. ამ გაკვეთილში შევხედავთ

აუცილებელია დაუყოვნებლივ თქვა, რომ ეს პროცესი სხვადასხვა დეველოპერების სხვადასხვა შაბლონებზე გაიმართება საკუთარი გზით. აქედან გამომდინარე, მე შევეცდები, რომ მეუბნებოდეს, რომ Heider- ის პოზიციის ადგილმდებარეობის ძიების პრინციპი, ლოგო და რედაქტირების CSS. როგორც ყოველთვის ვურჩევ ყველა მანიპულაციებს ადგილზე გავაკეთოთ denwer ადგილობრივი სერვერი იმისათვის, რომ არ შეგაწუხოთ მოდით ამ საიტზე დამონტაჟებული შაბლონი.

დასაწყისისთვის, აუცილებელია, რათა დადგინდეს რომელი პოზიცია მოდულის არის ჩვენი header და რა სათავეში არსებობს პოზიციები. თარგის მოდულების პოზიციების დასადგენად Joomla 2.5. ჩვენი საიტი ჩვენ გაწვევას Tp \u003d 1. ანუ, ეს ასე გამოიყურება: http: // your_sight /? tp \u003d 1.

ჩვენ განაახლეთ გვერდი (F5) და ... მე ვერ ვხედავ არაფერი. ასე რომ ბ საიტის ადმინისტრაციული ნაწილი შეზღუდული შესაძლებლობების მქონე საიტის პოზიციები. ჩვენ მივდივართ ადმინისტრაციის გვერდზე, გადადით პარამეტრებში

და ჩართეთ ქვემოთ მოცემულ ფოტოსურათებში არსებული პოზიციების ჩვენება. ნუ დაივიწყებთ გადარჩენას.

ჩვენ კვლავ განაახლებს გვერდს. ყველაფერი. მოდულების პოზიციები გამოჩნდა. ჩვენ ვხედავთ, რომ არსებობს რამდენიმე მათგანი: headerbar, ლოგო, counter, banner. ამავდროულად, ჩვენ ვხედავთ, რომ პოზიციების პირობითი ზომები ხაზს უსვამს (Counter, Banner), მაგრამ headerbar, ლოგო.

ჩვენ ლოგიკურად გვესმის, რომ headerbar მოდულის პოზიცია პასუხისმგებელია საიტის სათაურისთვის და ლოგოს პოზიცია ლოგოსთვის.

ჩემი პირადი რწმენა, რომ თქვენ ყოველთვის უნდა შეამოწმოთ მარტივი გზები პრობლემის მოსაგვარებლად, და თუ ეს არ შეიმუშავა, მაშინ ასვლა ღრმა შევიდა. ყველაზე მარტივი რამ წასვლა Joomla 2.5 თარგის პარამეტრებში და ნახეთ რომელი პარამეტრები არსებობს. ნებისმიერ შემთხვევაში, როგორც ინსტალაციისას Joomla 2.5- ზე, ან Joomla 2.5 თარგის ინსტალაციის შემდეგ, QuickStart Startup- ისგან, პირველი, რაც თქვენ უნდა წავიდეთ თარგი პარამეტრებში და გაუმკლავდეთ მის კონფიგურაციულ შესაძლებლობებს. ამავდროულად, არ არის საჭირო სჭირდება Russify Joomla 2.5 როგორც ნიმუში თავისთავად არ იქნება თარგმნილი რუსული.

ბევრი თარგი დეველოპერები თავის პარამეტრებში შესაძლებელია რედაქტირება hapes (header), ისევე, როგორც ძირი (ძირი) საიტი და ბევრი სხვა robes. თუმცა, ამ შაბლონში ბევრ პარამეტრს შორის, სინათლის გზა ვერ მოიძებნა.

და ა.შ., ჰედერის პოზიციის შესახებ, როგორც სათაურით, როგორც "გაფართოების მოდულის მენეჯერი" და "პოზიციის შერჩევა" ჩამოსაშლელი მენიუში ჩვენ ვეძებთ headerbar პოზიციას. ეს არ არის და ეს მართალია, რადგან თარგის თარგში არ არის. არსებობს მხოლოდ ლოგო. ყველაზე სწორი I. სწრაფი გზა საიტზე სათაურის გამომუშავება "მოდულის მენეჯერის" Clamp "შექმნა" ღილაკი.

და შერჩევის ტიპის მოდული, აირჩიეთ "HTML კოდი". მასთან ერთად, ჩვენ არ შეგვიძლია მხოლოდ მონაწილეობა HTML კოდიმაგრამ ასევე გამოაქვეყნებს სურათს ჩვენი ქუდები.

თუმცა, მოდულის პოზიციის გამომავალი უნდა იყოს წინასწარ მომზადებული, და ამისათვის უნდა ვიცოდეთ მოდულის პოზიციის სიგანე და სიგრძე. დამახსოვრება მაგარი მოდული Firebug Firefox და დაიწყე იგი. ამ გაფართოებით, ჩვენ ვსწავლობთ ჰედერბარის პოზიციას და ვხედავ

რა სახის პოზიციონირებს პასუხობს ფაილის განლაგებით და მისი სიმაღლე 110 პიქსელია. სხვათა შორის, თქვენ შეგიძლიათ შეცვალოთ სიგანე ზომა, რომელიც გჭირდებათ cSS ფაილი. ახლა აუცილებელია ჩვენი ქუდის სიგრძის განსაზღვრა. უმეტეს თარგებში, სიგანე დადგენილია პარამეტრებში. ჩვენ მივდივართ ჩვენს თარგში და tincture ჩვენ ვხედავთ, რომ ჩვენი თარგის სიგრძე 1100 პიქსელია. ახლა ჩვენ შეგვიძლია მოვამზადოთ ჩვენი ჰედერის მომზადება საჭირო პარამეტრებით გრაფიკული რედაქტირების პროგრამის გამოყენებით (მაგალითად. Adobe Photoshop.). მე არ ვამბობ, როგორ კეთდება. ეს არის მთელი საიტები.

მომზადებული ფაილი Cap უფრო ახლოს არის "სურათები - ისტორიები" საქაღალდე საიტი, მაგრამ არა თარგი. ახლა ჩვენ შევუერთდით მას "HTML კოდი" მოდულის გამოყენებით. სათაურები დამალვა. ჩვენ ვირჩევთ სათაურების პოზიციას და არსებობს.

სხვათა შორის, ასე რომ თქვენ შეგიძლიათ გააკეთოთ რა სხვადასხვა გვერდები საიტი გამოჩნდა სხვადასხვა სათაურზე. ჩვენ მოვამზადებთ რამდენიმე ქუდს, განახორციელებთ მათ ზემოთ საქაღალდეში და აურიეთ რამდენიმე "HTML კოდი" მოდულების გამოყენებით გარკვეული მენიუს ნივთებით.

Heider figured out. ჩვენ ახლა რედაქტირება ლოგო. იცის მოდულის პოზიცია, კერძოდ, ლოგო შეამოწმეთ. ჩვენ მივდივართ "გაგრძელება - მოდულის მენეჯერი" და "პოზიციის მენეჯერი" ჩამოსაშლელი მენიუში ჩვენ ვეძებთ პოზიციას ლოგოს. სურათზე ასეთი გზაა სახელით logo.png. მაგრამ გამორთვა, ჩვენ ვერ ვხედავთ ცვლილებებს საიტზე. ასე რომ, ეს სურათი გამოიყენება მხოლოდ მაშინ, როდესაც მოძრავი არის უბრალოდ შაბლონი უკვე დამონტაჟებული Joomla 2.5. მაგრამ როდესაც ინსტალაცია Joomla 2.5 თარგიდან სწრაფი დაწყება "Quickstart" როგორ ვიყენებთ სურათს სხვა საქაღალდეში. და ბუნებრივია თარგიდან.

აქედან გამომდინარე, ჩვენ ვეძებთ სხვა გზას. ისევ, Firebug დანამატი Firefox- ისთვის, ჩვენ გამოვიყენებთ თარგი ლოგოს და ვნახავთ,

რა სახის პოზიციონირება პასუხისმგებელია იმავე განლაგებაზე. CSS- ის ფაილზე და დაინახავს, \u200b\u200bთუ სად არის (ფაილის ბილიკი) გახსენით ახალ ჩანართში. ვია notepad ++ პროგრამები ღია და ეძებს string 259.

აქ ჩვენ შეგვიძლია ექსპერიმენტი სიგანე, ლოგოს სიგრძეზე. ნუ დაგავიწყდებათ, რომ შეინახოთ და განაახლოთ საიტის გვერდი. კიდევ ერთი უზარმაზარი უპირატესობა Notepad ++ არის ის, რასაც თქვენ ყოველთვის შეგიძლიათ დაბრუნდეთ ფაილის წყაროს მდგომარეობაში, მაგრამ მხოლოდ იმ შემთხვევაში, თუ არ დაიხურება Notepad ++ ფანჯარა. დაბრუნების საწყის სახელმწიფოში "გაუქმება" ღილაკის გამოყენებით.

კარგად, ლოგოს დიზაინის შესაცვლელად, ჩვენ გვჭირდება Adobe Photoshop და ამ პროგრამის ელემენტარული ცოდნა.

ასე რომ ჩვენ შევხედე თქვენ როგორ რედაქტირება (შეცვლა) სათაურში joomla თარგი 2.5.

წარმატებებს გისურვებთ თქვენს მცდელობებში.