Jak zedytować przez css gotowy szablon blogu

Dla specjalistów Webmastering
#1

Prowadzę od niedawna bloga na blox.pl i do edycji wyglądu użyłam szablonu. Udało mi się kilka rzeczy zmodyfikować po swojemu, ale nadal nie mogę dojść do kilku rzeczy. Oto mój adres: http://frenja.blox.pl/html

  • jak poszerzyć główną część gdzie pojawiają się posty (chciałabym, żeby całość była trochę szersza)

  • jak zrobić odstępy między elementami w bocznej szpalcie tzn. wizytówką facebooka, tłumaczem google, dilemmas magazine, licznikami itd. (wszystko jest teraz jakieś takie na siebie nawciskane)

Od razu mówię, proszę o łopatologiczną instrukcję, bo css to jak na razie dla mnie czarna magia. Jeśli będzie trzeba to skopiuję tu css mojego szablonu.

I jeszcze pytanie na marginesie czy uważacie, że ten blog jest czytelny? Czy te kolory pod tekstami nie wydają się być zbyt “oczojebne”?

#2

Aby poszerzyć główną część modyfikujemy ten fragment kodu:

#BlogSzerokaSzpalta {

width:549px;

}

Zmieniamy wartość width. Jeżeli chodzi o ten drugi element to tutaj sprawa się komplikuje, to znaczy: a) o ile translator opisany jest jeszcze jakimiś divami i odstępy możesz modyfikować poprzez:

.goog-te-gadget {

color:#666666;

font-family:arial;

font-size:11px;

white-space:nowrap;

}

dodanie w tym elemencie parametrów:

margin-top:wartość px;

margin-bottom: wartość px;

o tyle pozostałe elementy opisane divami nie są.

Teraz pytanie czy sama zamieszczałaś te elementy, czy są to gotowe moduły dostępne w skrypcie?

Co do części wizualnej. Mi tam nie przeszkadza. A nawet mi się podoba.

#3

Bardzo dziękuję za wskazówki. Niestety problem pierwszy nie został rozwiązany :frowning:

Wprowadziłam większą wartość w miejscu, w którym wskazałeś, ale wtedy zamiast główny boks się poszerzyć, to wydłuża mi się w prawo belka z kategoriami i boczna szpalta przesuwa w całość w prawo. A mi zależy na tym, żeby centrum (czyli ta cieniutka pionowa kreska) pozostało w tym samym miejscu i tylko część z wpisami przedłużyła się trochę na lewo. Czy to się da jakoś zrobić? Próbowałam sama jeszcze metodą prób i błędów zmieniać wartość width w Body Box i GłównyBox, ale z tego tez wychodziły dziwactwa.

Co do drugiej sprawy, to wyjdę na totalnego laika, ale cóż. Nie potrafię nawet dodać marginesów w translatorze, bo tam są te < > i nie wiem :oops: Oto kod który dotyczy translatora. Gdzie i jak mam dopisać to “margin-top:wartość px; margin-bottom: wartość px;” ?

A reszta elementów była generowana przez poszczególne strony np.

Facebook

Frenja Moda | Utwórz swoją wizytówkę

#4

Jeżeli chodzi o część pierwszą to problem tkwi w samym szablonie.

Linia oddzielająca pole centralne i prawą kolumnę to w rzeczywistości obrazek o wymiarach 770px na 10px.

Kiedy zwiększa się szerokość centralnej części to efektem tego jest “przesunięcie się” prawej kolumny jeszcze bardziej w prawo.

Także jeżeli chcemy zachować całość szablonu to niestety musimy zachować sfiksowane wymiary pól.

Co do drugiej części to:

Widać, że wszystkie te elementy są wygenerowane i powrzucane jeden po drugim.

Najprościej byłoby oprawić każdy z nich w znaczniki div.

Przykładowo:

Tutaj zamieszczamy wygenerowany kod.
[/code] w pliku styli *.css zamieszczamy:

[code] div.mod_spaces { margin-top:5px; margin-bottom:5px; }

I to dopiero tak przygotowany element zamieszczać w prawej kolumnie.

Oczywiście wartości elementów margin zmieniamy według uznania.

#5

Bardzo Ci dziękuję za pomoc! !!

Niestety nadal problem z odstępami został. Nie wiem co robię źle, ale już sobie chyba odpuszczę :frowning:

#6

OK to inaczej powstawiaj te konkretne elementy tak jak tutaj przedstawione:

Google translate:

[/code] Facebook:

[code]
Frenja Moda | Utwórz swoją wizytówkę100000545603278.617.1367798213.png
Dilemmas Magazine

#7

Udało się, jeszcze tylko muszę pokombinować przy licznikach i sprawa zakończona. Jesteś boski, dzięki! !!