Cum să fixezi caseta de descriere fără a bloca scroll-ul pe Tumblr

Introducere

Dacă tema Tumblr-ului tău permite ca caseta de descriere să se miște pe pagină împreună cu postările, există șansa să o fixezi în locul său. Pentru asta tema trebuie să aibă o opțiune în CSS care să specifice poziționarea fixă.

1. Verificarea codului HTML

1. Conectează-te la Tumblr și dă clic pe pictograma de Setări (țintă cu roată). Din bara laterală, selectează blogul și apasă Edit Theme.
2. În colțul din stânga găsești butonul Edit HTML. Codul HTML al temei va apărea în partea stângă, iar previzualizarea blogului în partea dreaptă.
3. Apasă Ctrl+F pentru a deschide bara de căutare și introdu câteva cuvinte exact cum apar în caseta de descriere. Acest lucru te duce direct la linia de cod care conține descrierea.
4. Parcurge linia de sus până la secțiunea care închide caseta, de obicei cu un selector de tip block:Description.
5. Examinează liniile de deasupra pentru a găsi atributul care face ca caseta să fie mobilă (ex: float sau unstuck). Acest atribut se află de obicei într-un div id="float".
6. Înlocuiește acest atribut cu fixed, de exemplu: <div id="fixed">. Apasă Update Preview și testează scroll-ul. Dacă caseta rămâne fixă, salvează modificările.
7. Dacă nu funcționează, trebuie să cauți în CSS pentru a găsi cuvântul potrivit.

2. Localizarea codului CSS

1. În partea de sus a codului HTML, caută stylesheet (Ctrl+F). Acesta de obicei apare în primele 50 de linii, sub forma rel="stylesheet".
2. Încălzește URL-ul CSS (începe cu http: și termină cu .css) și deschide-l într-o filă nouă.
3. Deși la început poate apărea cod “scris pe hârtie”, dacă derulezi vei vedea stiluri CSS similare cu cele din HTML.
4. Folosește din nou Ctrl+F pentru a căuta cuvântul găsit în HTML (ex: float). Caută în jurul său posibile opțiuni opuse: fixed, static, stuck.
5. Înlocuiește în codul HTML atributul găsit cu cel care fixează caseta (ex: fixed).
6. Actualizează previzualizarea și salvează dacă rezultatul este corect.

3. Sfaturi și avertismente

Sfaturi utile

În unele teme dezvoltatorul poate să nu fi inclus opțiunea de poziționare fixă în CSS. În acest caz, poți încerca să adaugi tu un fragment CSS:

.description-box { position: fixed; top: 10px; width: 200px; }

Avertismente

Nu salva modificările înainte de a verifica cu atenție previzualizarea. O schimbare neașteptată a codului HTML poate corupe complet aspectul blogului.