Wyświetlanie bloków TP niezgodne ze stylem

[Link]

Witam,

Mam pewien (chyba drobny) problem.

Otóż: zainstalowałam na smf 1.1.11 TP 1.5.2 i styl Dogal. Na forum paski tytułowe działów są zaokrąglone, natomiast nagłówki bloków i artykułów TP są ostro zakończone. Czy jest możliwość jakoś to dopasować??

www.latoma.net/new

Z góry dziękuję - pozdrawiam Sandra

Sandra

Global Moder

Miłośniczka psów

La Toma Magic

Posty 181

 

[Link]

Witam,

Mam pewien (chyba drobny) problem.

Otóż: zainstalowałam na smf 1.1.11 TP 1.5.2 i styl Dogal. Na forum paski tytułowe działów są zaokrąglone, natomiast nagłówki bloków i artykułów TP są ostro zakończone. Czy jest możliwość jakoś to dopasować??

www.latoma.net/new

Z góry dziękuję - pozdrawiam Sandra

Pozdrawiam - Sandra
www.drlucy.pl
www.latoma.net

[Link]

Cześć Sandro

Twój "(chyba drobny) problem", można rozwiązać na 2 sposoby,

1 - to narysowanie tych zaokrąglonych rogów.

2 - sposób to CSS3 które są jeszcze w powijakach i nie wszystkie przeglądarki ..qmają co jest zgrane..

Zastosowałem tę metodę tutaj, na tym forum, choć stosują ją różnych miejscach sieci..
Pewnie pytasz, bo zobaczyłaś tutaj pozaokrąglane rogi? spoco,
- to miejsce gł. (po za pomocą dla skryptu SMF, naturalnie), służy również pokazywaniu możliwości samego skryptu no i w ogóle co można z tym zrobić, wszak to jednocześnie "Poligon"..

Sandro, podpowiem Ci co masz zrobić, szczególnie że to TinyPortal, który bardzo dobrze znam.. i bardzo lubię..

W samych stylach.css od tej skórki, tej klasy odpowiadającej za blocki nie znajdziesz..  poszukaj gdzie indzie..

- w ./Theme/default znajduje się plik tp-style.css lub podobnie (joke) około lini ~1250 znajdziesz klasy od block'ów:

GeSHi -› Code: [select]

/*  
*******************************************************************************
this is where you set the distance between blocks, use padding and target each panel if you like
********************************************************************************
*/
.block_leftcontainer,
.block_rightcontainer,
.block_centercontainer,
.block_uppercontainer,
.block_lowercontainer,
.block_topcontainer,
.block_bottomcontainer
{
    padding-bottom: 4px;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:154.74 KB/s

to trzeba zastosować, nie wspierana oficjalnie przez W3c - klasę border-radius, tylko, że..
- w takiej wersji zobaczy i wyświetli poprawnie tylko i wyłącznie Opera,
- żeby zobaczył zaokrąglone rogi FF to musisz dopisać przed: -moz-
- żeby zobaczyły przeglądarki typu Safari musisz dodać przed -webkid-
- przeglądarka Konqueror (to linuxowa zabawka i można odpuścić), ale podaję, dodajesz przed klasą: -khtml-
- IE to ostatni, ale za to komercyjny dupek i olej to, ponieważ trzeba użyć specjalnej metody a i tak lipa..

Czasem lepiej narysować te zaokrąglone rogi.. Ale wiadomo ..wszystkim nie dogodzi..

Przy klasie border-radius podaje się w px promień i proponuje zasięg do testowania od 5px do 9px nie ma co przesadzać..
Mi to wygląda gdzieś na radius: 8px chyba nawet to będzie max, (przetestuj później na 6px),i tak Ci to podam,
a Ty sobie to ustaw, żeby było podobnie jak masz na górze, okay?

Do tej, (podanej wyżej) , klasy dopiszę radiusa..

taki przykład z 8px:

GeSHi -› Code: [select]

/*  
*******************************************************************************
this is where you set the distance between blocks, use padding and target each panel if you like
********************************************************************************
*/
.block_leftcontainer,
.block_rightcontainer,
.block_centercontainer,
.block_uppercontainer,
.block_lowercontainer,
.block_topcontainer,
.block_bottomcontainer
{
    padding-bottom: 4px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:199.00 KB/s

Pamiętaj o tym, że te style są globalne dla wszystkich skórek, które będziesz tam mieć,
- dlatego może z tego kodu wytnij ten padding a całą resztę dopisz lokalnie, czyli do stylu, którego używasz.
hmm mogła byś się niechcący zdziwić, gdybyś zmieniła styl..

no dobrze.. czesz na małą drzemkę czy cóś.. 

Dopasuj, rozmiarem promienia w px tak żeby pasowało do tego co masz na górze strony.
Nie należy przeginać z ilością, ponieważ to obciąża procka odwiedzającego i stronka może trochę zwolnić.
ale najwięcej obciąża stosowanie cieni pod tekstem..

Okay, mam nadzieję, że przez to, Twoja strona stanie się piękniejsza

Pozdrawiam
roco

roco

Administrator

3wProducer

Imagination is more Important than Knowledge

Posty 679

 

[Link]

Cześć Sandro

Twój "(chyba drobny) problem", można rozwiązać na 2 sposoby,

1 - to narysowanie tych zaokrąglonych rogów.

2 - sposób to CSS3 które są jeszcze w powijakach i nie wszystkie przeglądarki ..qmają co jest zgrane..

Zastosowałem tę metodę tutaj, na tym forum, choć stosują ją różnych miejscach sieci..
Pewnie pytasz, bo zobaczyłaś tutaj pozaokrąglane rogi? spoco,
- to miejsce gł. (po za pomocą dla skryptu SMF, naturalnie), służy również pokazywaniu możliwości samego skryptu no i w ogóle co można z tym zrobić, wszak to jednocześnie "Poligon"..

Sandro, podpowiem Ci co masz zrobić, szczególnie że to TinyPortal, który bardzo dobrze znam.. i bardzo lubię..

W samych stylach.css od tej skórki, tej klasy odpowiadającej za blocki nie znajdziesz..  poszukaj gdzie indzie..

- w ./Theme/default znajduje się plik tp-style.css lub podobnie (joke) około lini ~1250 znajdziesz klasy od block'ów:

GeSHi -› Code: [select]

/*  
*******************************************************************************
this is where you set the distance between blocks, use padding and target each panel if you like
********************************************************************************
*/
.block_leftcontainer,
.block_rightcontainer,
.block_centercontainer,
.block_uppercontainer,
.block_lowercontainer,
.block_topcontainer,
.block_bottomcontainer
{
    padding-bottom: 4px;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:154.74 KB/s

to trzeba zastosować, nie wspierana oficjalnie przez W3c - klasę border-radius, tylko, że..
- w takiej wersji zobaczy i wyświetli poprawnie tylko i wyłącznie Opera,
- żeby zobaczył zaokrąglone rogi FF to musisz dopisać przed: -moz-
- żeby zobaczyły przeglądarki typu Safari musisz dodać przed -webkid-
- przeglądarka Konqueror (to linuxowa zabawka i można odpuścić), ale podaję, dodajesz przed klasą: -khtml-
- IE to ostatni, ale za to komercyjny dupek i olej to, ponieważ trzeba użyć specjalnej metody a i tak lipa..

Czasem lepiej narysować te zaokrąglone rogi.. Ale wiadomo ..wszystkim nie dogodzi..

Przy klasie border-radius podaje się w px promień i proponuje zasięg do testowania od 5px do 9px nie ma co przesadzać..
Mi to wygląda gdzieś na radius: 8px chyba nawet to będzie max, (przetestuj później na 6px),i tak Ci to podam,
a Ty sobie to ustaw, żeby było podobnie jak masz na górze, okay?

Do tej, (podanej wyżej) , klasy dopiszę radiusa..

taki przykład z 8px:

GeSHi -› Code: [select]

/*  
*******************************************************************************
this is where you set the distance between blocks, use padding and target each panel if you like
********************************************************************************
*/
.block_leftcontainer,
.block_rightcontainer,
.block_centercontainer,
.block_uppercontainer,
.block_lowercontainer,
.block_topcontainer,
.block_bottomcontainer
{
    padding-bottom: 4px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:199.00 KB/s

Pamiętaj o tym, że te style są globalne dla wszystkich skórek, które będziesz tam mieć,
- dlatego może z tego kodu wytnij ten padding a całą resztę dopisz lokalnie, czyli do stylu, którego używasz.
hmm mogła byś się niechcący zdziwić, gdybyś zmieniła styl..

no dobrze.. czesz na małą drzemkę czy cóś.. 

Dopasuj, rozmiarem promienia w px tak żeby pasowało do tego co masz na górze strony.
Nie należy przeginać z ilością, ponieważ to obciąża procka odwiedzającego i stronka może trochę zwolnić.
ale najwięcej obciąża stosowanie cieni pod tekstem..

Okay, mam nadzieję, że przez to, Twoja strona stanie się piękniejsza

Pozdrawiam
roco

[Link]

Hmmm...

albo coś źle robię, albo to nie to   dokonałam wpisów w tp-style.css i efekt żaden

może wkleję obrazek, żeby było wiadomo o co mi chodzi

Sandra

Global Moder

Miłośniczka psów

La Toma Magic

Posty 181

 

[Link]

Hmmm...

albo coś źle robię, albo to nie to   dokonałam wpisów w tp-style.css i efekt żaden

może wkleję obrazek, żeby było wiadomo o co mi chodzi

[3.04 KB]

forum.PNG   -› 3.04 KB, 297x157 - wyświetlony 643 razy



bloki.PNG   -› 11.3 KB, 295x107 - wyświetlony 634 razy

[Link]

nie nie, jest ok, po prostu TP generuje dynamicznie swoje klasy..

Pokażę Ci to na fotkach..

Wież, że dodałaś i masz tak:




To przykład, o czym mówiłem w związku z innymi przeglądarkami:



Tak widzi tez zapis FireFox.. normalnie ta klasa to border-radius i podajesz wielkość promienia w px
FF nie zobaczył tego wszystkiego tylko to co było dla niego, czyli trzeba było dodać na początku: -moz-

Klasy bloków zostały dynamicznie, (czy też virtualnie), wstawione do sekcji head co było widac w podglądzie strony:




Przyjrzyjmy się teraz klasom, które już zostały wygenerowane dla przeglądarki:



Strzałkami zaznaczyłem interesujące nas klasy.

Teraz przyjrzyjmy się temu pierwszemu blokowi:

to jest właśnie klasa, o której mówiłem wcześniej, czyli class = "block_leftcontainer"



Ale to nie on ma to "coś" co można wizualnie zaokrąglić..


Ma to to klasa diva poniżej, ta klasa:



To dynamicznie i zależnie od "sutuacji" jest generowana ta właśnie klasa: class = "tborder tp_leftblock_frame" i to o nią właśnie chodzi..

Można zobaczyć mechanizm w pliku: "TPsubs.template.php" (- powinien być w stylu default..)

To jest kawałek kodu, który odpowiada, za dynamiczne przydzielanie klas, wszelkim blokom:

GeSHi -› Code: [select]

    // check
    if($block['var4']=='')
        $block['var4']=0;

    if($block['var4']==0)
        $block['var4'] = $context['TPortal']['panelstyle_'.$side];

    // its a normal block..
    if(in_array($block['frame'],array('theme','frame','title','none')))
    {
        echo '
    <div class="&#39;, (($theme || $block[&#39;frame&#39;]==&#39;frame&#39;) ? &#39;tborder tp_&#39;.$side.&#39;block_frame&#39; : &#39;tp_&#39;.$side.&#39;block_noframe&#39;), &#39;">&#39;;

        // show the frame and title
        if ($theme || $block[&#39;frame&#39;] == &#39;title&#39;)
        {
            echo $types[$block[&#39;var4&#39;]][&#39;code_title_left&#39;];

            if($block[&#39;visible&#39;]==&#39;&#39; || $block[&#39;visible&#39;]==&#39;1&#39;)
                echo &#39;<a href="javascript: void(0); return false" onclick="toggle(\&#39;&#39;.$block[&#39;id&#39;].&#39;\&#39;); return false"><img id="blockcollapse&#39;.$block[&#39;id&#39;].&#39;" style="margin: 0; " align="right" src="&#39; .$settings[&#39;tp_images_url&#39;]. &#39;/&#39; , !in_array($block[&#39;id&#39;],$context[&#39;TPortal&#39;][&#39;upshrinkblocks&#39;])  ? &#39;TPcollapse&#39; : &#39;TPexpand&#39; , &#39;.gif" border="0" alt="" title="&#39;.$txt[&#39;block-upshrink_description&#39;].&#39;" /></a>&#39;;

            // can you edit the block?

// Created by GeSHi 1.0.8.10 | code: -› [code=PHP] | load:0.026s | speed:50.86 KB/s

Natomiast w podglądzie strony masz już gotowca, wygenerowaną klasę: tborder tp_leftblock_frame

Kod, z podglądu:

GeSHi -› Code: [select]

    <div class="block_leftcontainer">
    <div style="margin-bottom: 4px;" class="tborder tp_leftblock_frame"><h3 class="titlebg" style="margin: 0; padding: 5px;"><span class="header">Firma</span></h3>
        <div class="tp_leftblock_body" id="block8"><div class="windowbg"><div style="padding: 8px;"><div class="blockbody" style="overflow: auto;">
    <ul class="tp_catmenu">
        <li>&nbsp;&nbsp;
            <img src="tp-images/icons/TPdivider2.gif" alt="" />&nbsp;
            <a href="index.php?page=4">O nas</a></li>
        <li>&nbsp;&nbsp;
            <img src="tp-images/icons/TPdivider2.gif" alt="" />&nbsp;
            <a href="index.php?page=3">Misja i cele</a></li>
        <li>&nbsp;&nbsp;
            <img src="tp-images/icons/TPdivider2.gif" alt="" />&nbsp;
            <a href="index.php?page=9">Baza szkoleniowa</a></li>
        <li>&nbsp;&nbsp;
            <img src="tp-images/icons/TPdivider2.gif" alt="" />&nbsp;
            <a href="index.php?action=contact">Kontakt</a></li>
    </ul></div></div></div>
        </div>
    </div>
    </div>
    <div class="block_leftcontainer">
    <div style="margin-bottom: 4px;" class="tborder tp_leftblock_frame"><h3 class="titlebg" style="margin: 0; padding: 5px;"><span class="header">Oferta szkoleniowa</span></h3>
    itd.. itd..

// Created by GeSHi 1.0.8.10 | code: -› [code=PHP] | load:0.029s | speed:39.46 KB/s

Poznajesz? to Twój pierwszy od góry block. Natomiast "pojemnik" (div), z klasą, o której wcześniej mówiłem jest wyżej
 i dopiero w nim znajduje się właściwy block z brzydkim i niepasującym do reszty borderem..

GeSHi -› Code: [select]

    <div class="block_leftcontainer">
    <div style="margin-bottom: 4px;" class="tborder tp_leftblock_frame">

// Created by GeSHi 1.0.8.10 | code: -› [code=PHP] | load:0.025s | speed:4.04 KB/s

To był block po lewej stronie, teraz dalej, z podglądu strony widać, że ten środkowy, ma taką klasę: class = "tborder tp_centerblock_frame"

Wygląda podobnie jak w blockach po lewej, tylko inne nazewnictwo:

GeSHi -› Code: [select]

    <div class="block_centercontainer">
    <div style="margin-bottom: 4px;" class="tborder tp_centerblock_frame"><h3 class="titlebg" style="margin: 0; padding: 5px;"><span class="header">Witamy</span></h3>
        <div class="tp_centerblock_body" id="block15"><div class="windowbg"><div style="padding: 8px;"><div class="blockbody" style="overflow: auto;"><div class="block_article">
    <div class="blockarticle render1">
        <div class="article_info">

// Created by GeSHi 1.0.8.10 | code: -› [code=PHP] | load:0.029s | speed:14.80 KB/s

Czyli mamy już te dwie interesujące nas klasy: tborder tp_leftblock_frame i tborder tp_centerblock_frame

W zasadzie to 4 klasy, połączone w dwie, które dla tego zapisu, połączymy w jedną.. hmm wyszło papalap, ale mam nadzieję, że nadążasz..

Oczywiście w stylach, w zapisie, należy klasę poprzedzić kropką ., co też jest względne..

Ta klasa wygląda u Ciebie w tym stylu tak:

GeSHi -› Code: [select]

/* This is used on tables that should just have a border around them. */
.tborder {
    padding: 0px;
    border: solid 2px #F4F9F2;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:48.30 KB/s

Jak dla mnie trochę siermięga.. już może (?) lepiej ten border wyglądałby tak: border: double 3px #F4F9F2; przynajmniej spróbuj..

Ale najważniejsze to wnioski końcowe..

Podaję zapis wynikający z powyższych wniosków..

GeSHi -› Code: [select]

/*******************************************
    Hack na zaokrąglone rogi bloków by roco *
*******************************************/
.tborder .tp_centerblock_frame, .tborder .tp_leftblock_frame {
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:108.31 KB/s

Klasa "tborder" normalnie występuje sobie sama, ale to właśnie taki "myk" czy inaczej warunek..

To co podałem w ostatnim code css daj na samym początku style.css w stylu, którego używasz.

Dopiera jesli dalej nie będzie rezultatów, to usuń po kropeczce z obu .tborder, albo napisz.. wstawimy to gdzie indziej..


Sandro, sorry, miałem odpisać parę godzin temu, ale jestem w rozjazdach i robię sto rzeczy na raz..
Mam jednak nadzieję, że to napisałem, przyda Ci się na przyszłość..


Działanie jest proste, należy znaleźć potrzebną klasę odpowiadającą, za interesujący nas element i poddać obróbce,
ew. dopisać, jak robimy teraz.. Zobacz takiej klasy w ogóle nie ma, a w podglądzie strony jest..
Więc przynajmniej jest się czego trzymać..

Pozdrawiam
roco

PS. pochwal, się, kiedy Ci się uda

roco

Administrator

3wProducer

Imagination is more Important than Knowledge

Posty 679

 

[Link]

nie nie, jest ok, po prostu TP generuje dynamicznie swoje klasy..

Pokażę Ci to na fotkach..

Wież, że dodałaś i masz tak:




To przykład, o czym mówiłem w związku z innymi przeglądarkami:



Tak widzi tez zapis FireFox.. normalnie ta klasa to border-radius i podajesz wielkość promienia w px
FF nie zobaczył tego wszystkiego tylko to co było dla niego, czyli trzeba było dodać na początku: -moz-

Klasy bloków zostały dynamicznie, (czy też virtualnie), wstawione do sekcji head co było widac w podglądzie strony:




Przyjrzyjmy się teraz klasom, które już zostały wygenerowane dla przeglądarki:



Strzałkami zaznaczyłem interesujące nas klasy.

Teraz przyjrzyjmy się temu pierwszemu blokowi:

to jest właśnie klasa, o której mówiłem wcześniej, czyli class = "block_leftcontainer"



Ale to nie on ma to "coś" co można wizualnie zaokrąglić..


Ma to to klasa diva poniżej, ta klasa:



To dynamicznie i zależnie od "sutuacji" jest generowana ta właśnie klasa: class = "tborder tp_leftblock_frame" i to o nią właśnie chodzi..

Można zobaczyć mechanizm w pliku: "TPsubs.template.php" (- powinien być w stylu default..)

To jest kawałek kodu, który odpowiada, za dynamiczne przydzielanie klas, wszelkim blokom:

GeSHi -› Code: [select]

    // check
    if($block[&#39;var4&#39;]==&#39;&#39;)
        $block[&#39;var4&#39;]=0;

    if($block[&#39;var4&#39;]==0)
        $block[&#39;var4&#39;] = $context[&#39;TPortal&#39;][&#39;panelstyle_&#39;.$side];

    // its a normal block..
    if(in_array($block[&#39;frame&#39;],array(&#39;theme&#39;,&#39;frame&#39;,&#39;title&#39;,&#39;none&#39;)))
    {
        echo &#39;
    <div class="&#39;, (($theme || $block[&#39;frame&#39;]==&#39;frame&#39;) ? &#39;tborder tp_&#39;.$side.&#39;block_frame&#39; : &#39;tp_&#39;.$side.&#39;block_noframe&#39;), &#39;">&#39;;

        // show the frame and title
        if ($theme || $block[&#39;frame&#39;] == &#39;title&#39;)
        {
            echo $types[$block[&#39;var4&#39;]][&#39;code_title_left&#39;];

            if($block[&#39;visible&#39;]==&#39;&#39; || $block[&#39;visible&#39;]==&#39;1&#39;)
                echo &#39;<a href="javascript: void(0); return false" onclick="toggle(\&#39;&#39;.$block[&#39;id&#39;].&#39;\&#39;); return false"><img id="blockcollapse&#39;.$block[&#39;id&#39;].&#39;" style="margin: 0; " align="right" src="&#39; .$settings[&#39;tp_images_url&#39;]. &#39;/&#39; , !in_array($block[&#39;id&#39;],$context[&#39;TPortal&#39;][&#39;upshrinkblocks&#39;])  ? &#39;TPcollapse&#39; : &#39;TPexpand&#39; , &#39;.gif" border="0" alt="" title="&#39;.$txt[&#39;block-upshrink_description&#39;].&#39;" /></a>&#39;;

            // can you edit the block?

// Created by GeSHi 1.0.8.10 | code: -› [code=PHP] | load:0.026s | speed:50.86 KB/s

Natomiast w podglądzie strony masz już gotowca, wygenerowaną klasę: tborder tp_leftblock_frame

Kod, z podglądu:

GeSHi -› Code: [select]

    <div class="block_leftcontainer">
    <div style="margin-bottom: 4px;" class="tborder tp_leftblock_frame"><h3 class="titlebg" style="margin: 0; padding: 5px;"><span class="header">Firma</span></h3>
        <div class="tp_leftblock_body" id="block8"><div class="windowbg"><div style="padding: 8px;"><div class="blockbody" style="overflow: auto;">
    <ul class="tp_catmenu">
        <li>&nbsp;&nbsp;
            <img src="tp-images/icons/TPdivider2.gif" alt="" />&nbsp;
            <a href="index.php?page=4">O nas</a></li>
        <li>&nbsp;&nbsp;
            <img src="tp-images/icons/TPdivider2.gif" alt="" />&nbsp;
            <a href="index.php?page=3">Misja i cele</a></li>
        <li>&nbsp;&nbsp;
            <img src="tp-images/icons/TPdivider2.gif" alt="" />&nbsp;
            <a href="index.php?page=9">Baza szkoleniowa</a></li>
        <li>&nbsp;&nbsp;
            <img src="tp-images/icons/TPdivider2.gif" alt="" />&nbsp;
            <a href="index.php?action=contact">Kontakt</a></li>
    </ul></div></div></div>
        </div>
    </div>
    </div>
    <div class="block_leftcontainer">
    <div style="margin-bottom: 4px;" class="tborder tp_leftblock_frame"><h3 class="titlebg" style="margin: 0; padding: 5px;"><span class="header">Oferta szkoleniowa</span></h3>
    itd.. itd..

// Created by GeSHi 1.0.8.10 | code: -› [code=PHP] | load:0.029s | speed:39.46 KB/s

Poznajesz? to Twój pierwszy od góry block. Natomiast "pojemnik" (div), z klasą, o której wcześniej mówiłem jest wyżej
 i dopiero w nim znajduje się właściwy block z brzydkim i niepasującym do reszty borderem..

GeSHi -› Code: [select]

    <div class="block_leftcontainer">
    <div style="margin-bottom: 4px;" class="tborder tp_leftblock_frame">

// Created by GeSHi 1.0.8.10 | code: -› [code=PHP] | load:0.025s | speed:4.04 KB/s

To był block po lewej stronie, teraz dalej, z podglądu strony widać, że ten środkowy, ma taką klasę: class = "tborder tp_centerblock_frame"

Wygląda podobnie jak w blockach po lewej, tylko inne nazewnictwo:

GeSHi -› Code: [select]

    <div class="block_centercontainer">
    <div style="margin-bottom: 4px;" class="tborder tp_centerblock_frame"><h3 class="titlebg" style="margin: 0; padding: 5px;"><span class="header">Witamy</span></h3>
        <div class="tp_centerblock_body" id="block15"><div class="windowbg"><div style="padding: 8px;"><div class="blockbody" style="overflow: auto;"><div class="block_article">
    <div class="blockarticle render1">
        <div class="article_info">

// Created by GeSHi 1.0.8.10 | code: -› [code=PHP] | load:0.029s | speed:14.80 KB/s

Czyli mamy już te dwie interesujące nas klasy: tborder tp_leftblock_frame i tborder tp_centerblock_frame

W zasadzie to 4 klasy, połączone w dwie, które dla tego zapisu, połączymy w jedną.. hmm wyszło papalap, ale mam nadzieję, że nadążasz..

Oczywiście w stylach, w zapisie, należy klasę poprzedzić kropką ., co też jest względne..

Ta klasa wygląda u Ciebie w tym stylu tak:

GeSHi -› Code: [select]

/* This is used on tables that should just have a border around them. */
.tborder {
    padding: 0px;
    border: solid 2px #F4F9F2;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:48.30 KB/s

Jak dla mnie trochę siermięga.. już może (?) lepiej ten border wyglądałby tak: border: double 3px #F4F9F2; przynajmniej spróbuj..

Ale najważniejsze to wnioski końcowe..

Podaję zapis wynikający z powyższych wniosków..

GeSHi -› Code: [select]

/*******************************************
    Hack na zaokrąglone rogi bloków by roco *
*******************************************/
.tborder .tp_centerblock_frame, .tborder .tp_leftblock_frame {
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:108.31 KB/s

Klasa "tborder" normalnie występuje sobie sama, ale to właśnie taki "myk" czy inaczej warunek..

To co podałem w ostatnim code css daj na samym początku style.css w stylu, którego używasz.

Dopiera jesli dalej nie będzie rezultatów, to usuń po kropeczce z obu .tborder, albo napisz.. wstawimy to gdzie indziej..


Sandro, sorry, miałem odpisać parę godzin temu, ale jestem w rozjazdach i robię sto rzeczy na raz..
Mam jednak nadzieję, że to napisałem, przyda Ci się na przyszłość..


Działanie jest proste, należy znaleźć potrzebną klasę odpowiadającą, za interesujący nas element i poddać obróbce,
ew. dopisać, jak robimy teraz.. Zobacz takiej klasy w ogóle nie ma, a w podglądzie strony jest..
Więc przynajmniej jest się czego trzymać..

Pozdrawiam
roco

PS. pochwal, się, kiedy Ci się uda

[Link]

Dzięki Roco, już jest zdecydowanie lepiej.

Musiałam jeszcze uzupełnić klasy odpowiedzialne za wyświetlanie tła nagłówka, bo byłyo "kanciaste" i wchodziło na zaokrąglenie ramki.

Teraz mam jeszcze pytanko, jak zrobić, żeby zaokrąglona była tylko góra tła a dół pozostał "kanciasty"?

Pokażę na rysunku o co mi chodzi

Sandra

Global Moder

Miłośniczka psów

La Toma Magic

Posty 181

 

[Link]

Dzięki Roco, już jest zdecydowanie lepiej.

Musiałam jeszcze uzupełnić klasy odpowiedzialne za wyświetlanie tła nagłówka, bo byłyo "kanciaste" i wchodziło na zaokrąglenie ramki.

Teraz mam jeszcze pytanko, jak zrobić, żeby zaokrąglona była tylko góra tła a dół pozostał "kanciasty"?

Pokażę na rysunku o co mi chodzi

[5.89 KB]

jest.PNG   -› 5.89 KB, 145x153 - wyświetlony 637 razy



ma_byc.PNG   -› 3.95 KB, 141x144 - wyświetlony 608 razy

[Link]

Ech, niby lepiej, ale kforum i kalendarz wygląda byle jak chyba przedobrzyłam

Sandra

Global Moder

Miłośniczka psów

La Toma Magic

Posty 181

 

[Link]

Ech, niby lepiej, ale kforum i kalendarz wygląda byle jak chyba przedobrzyłam

Pozdrawiam - Sandra
www.drlucy.pl
www.latoma.net

[Link]

Sandro

Zajrzałem do Ciebie i zauważyłem efekty, jednak pozwól, że coś Ci powiem.

- dodałaś przecinek po .tborder, skutkiem czego - dosłownie wszystko co zawiera tborder, a to jest gł określenie borderów wszelkich tabelek, - będzie zaokrąglone.

Najważniejsze, że jest skutek, twojego działania na pliku style.css. Teraz powiem Ci jak zrobić żeby były zaokrąglone tylko górne rogi..
Tu też, na tym forum, dostałem rozpędziochy i ot tak sobie pozaokrąglałem wsio co popadło hehe, ale to poprawię..

Taki przykład..

Mamy border-radius: 8px; i jeśli tak zapiszemy, to 4 rogi będą miały zaokrąglenie o promieniu 8px każy

Oczywiście można tym regulować przestrzennie, dosłownie sferycznie, uzyskując różne efekty.
Przykłady masz w załączniku, - tylko 2 górne rogi są zaokrąglone, ale każdy inaczej, jak się dobrze przyjrzysz..

Okay, jak zrobić, żeby tylko góra była zaokrąglona?

Można to zapisac tak: (to przykład pod Operę, bez hacków pod inne browsery..)

GeSHi -› Code: [select]

.tborder .tp_leftblock_frame {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:31.94 KB/s

to tylko przykład.. ale widac na nim, że można radius odnieść do konkretnych "rogów"
Tak samo robimy dopisując hucki dla innych przeglądarek, to nie oszczędzaj, dorób to dla innych browserów.. i zapomnij o IE

Ten przykładowy kod można zapisać w inny sposób:

GeSHi -› Code: [select]

.tborder .tp_leftblock_frame {
    border-radius: 8px 8px 0 0;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:21.09 KB/s

Co dokładnie oznacza, - lewy róg - radius = 8px. prawy róg radius = 8px, a dolne oba rogi, nie posiadają żadnego radiusa..

Musisz wziąć poprawkę na to, że w takiej ramce komórki tabeli, jest jeszcze coś, co również być może wymaga takiego samego zaokrąglenia,
dla osiągnięcia lepszej hmm gładkości?

Sandro, ja proponuję, w tych klasach spróbować, wychlastać border, bo i tak osiągniesz zaokrąglenie, i będzie efekt, jakby to była grafika.. a nie ramka..

Na pewno nie może tam być przecinka po .tborder.. to celowe działanie, w zasadzie można rzec - warunek..

Spróbuj z takim zapisem:

GeSHi -› Code: [select]

/*******************************************
    Hack na zaokrąglone rogi bloków by roco *
*******************************************/
.tborder .tp_centerblock_frame, .tborder .tp_leftblock_frame {
    border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -khtml-border-radius: 8px 8px 0 0;
    border:none;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:103.64 KB/s

Jak widzisz to podobnie jak z innymi elementami w stylach, z tą różnicą, że nie zaczyna się od górnego boku, tylko od górnego lewego rogu.. easy..

Ew. coś można pokombinować z tym borderem, ma go tam nie być, tzn. najpierw sobie zobacz jak to wygląda..
Chodzi o to, żeby było podobnie w części forum.. może nie to samo, ale podobnie w znaczeniu zaokrągleń.. tak sądzę..

Sandro najpierw to zrób, sprawdź czy wsio działa po Twojej myśli, a później dopiero pogadajmy już o ostatecznym wyglądzie, okay?

Pozdrawiam
roco

roco

Administrator

3wProducer

Imagination is more Important than Knowledge

Posty 679

 

[Link]

Sandro

Zajrzałem do Ciebie i zauważyłem efekty, jednak pozwól, że coś Ci powiem.

- dodałaś przecinek po .tborder, skutkiem czego - dosłownie wszystko co zawiera tborder, a to jest gł określenie borderów wszelkich tabelek, - będzie zaokrąglone.

Najważniejsze, że jest skutek, twojego działania na pliku style.css. Teraz powiem Ci jak zrobić żeby były zaokrąglone tylko górne rogi..
Tu też, na tym forum, dostałem rozpędziochy i ot tak sobie pozaokrąglałem wsio co popadło hehe, ale to poprawię..

Taki przykład..

Mamy border-radius: 8px; i jeśli tak zapiszemy, to 4 rogi będą miały zaokrąglenie o promieniu 8px każy

Oczywiście można tym regulować przestrzennie, dosłownie sferycznie, uzyskując różne efekty.
Przykłady masz w załączniku, - tylko 2 górne rogi są zaokrąglone, ale każdy inaczej, jak się dobrze przyjrzysz..

Okay, jak zrobić, żeby tylko góra była zaokrąglona?

Można to zapisac tak: (to przykład pod Operę, bez hacków pod inne browsery..)

GeSHi -› Code: [select]

.tborder .tp_leftblock_frame {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:31.94 KB/s

to tylko przykład.. ale widac na nim, że można radius odnieść do konkretnych "rogów"
Tak samo robimy dopisując hucki dla innych przeglądarek, to nie oszczędzaj, dorób to dla innych browserów.. i zapomnij o IE

Ten przykładowy kod można zapisać w inny sposób:

GeSHi -› Code: [select]

.tborder .tp_leftblock_frame {
    border-radius: 8px 8px 0 0;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:21.09 KB/s

Co dokładnie oznacza, - lewy róg - radius = 8px. prawy róg radius = 8px, a dolne oba rogi, nie posiadają żadnego radiusa..

Musisz wziąć poprawkę na to, że w takiej ramce komórki tabeli, jest jeszcze coś, co również być może wymaga takiego samego zaokrąglenia,
dla osiągnięcia lepszej hmm gładkości?

Sandro, ja proponuję, w tych klasach spróbować, wychlastać border, bo i tak osiągniesz zaokrąglenie, i będzie efekt, jakby to była grafika.. a nie ramka..

Na pewno nie może tam być przecinka po .tborder.. to celowe działanie, w zasadzie można rzec - warunek..

Spróbuj z takim zapisem:

GeSHi -› Code: [select]

/*******************************************
    Hack na zaokrąglone rogi bloków by roco *
*******************************************/
.tborder .tp_centerblock_frame, .tborder .tp_leftblock_frame {
    border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -khtml-border-radius: 8px 8px 0 0;
    border:none;
}

// Created by GeSHi 1.0.8.10 | code: -› [code=CSS] | load:0.003s | speed:103.64 KB/s

Jak widzisz to podobnie jak z innymi elementami w stylach, z tą różnicą, że nie zaczyna się od górnego boku, tylko od górnego lewego rogu.. easy..

Ew. coś można pokombinować z tym borderem, ma go tam nie być, tzn. najpierw sobie zobacz jak to wygląda..
Chodzi o to, żeby było podobnie w części forum.. może nie to samo, ale podobnie w znaczeniu zaokrągleń.. tak sądzę..

Sandro najpierw to zrób, sprawdź czy wsio działa po Twojej myśli, a później dopiero pogadajmy już o ostatecznym wyglądzie, okay?

Pozdrawiam
roco

[7.72 KB]

radius1.jpg   -› 7.72 KB, 210x51 - wyświetlony 599 razy



radius3.jpg   -› 25.35 KB, 586x86 - wyświetlony 592 razy

[Link]

Roco, dodałam przecinek, bo jak go nie ma, to zaokrąglony jest tylko środkowy blok.

Teraz efekt jest dokładnie taki o jaki mi chodziło - bardzo dziękuję za pomoc.

Jeśli masz jakieś sugestie odnośnie ostatecznego wyglądu to chętnie posłucham

Pozdrawiam - Sandra

Sandra

Global Moder

Miłośniczka psów

La Toma Magic

Posty 181

 

[Link]

Roco, dodałam przecinek, bo jak go nie ma, to zaokrąglony jest tylko środkowy blok.

Teraz efekt jest dokładnie taki o jaki mi chodziło - bardzo dziękuję za pomoc.

Jeśli masz jakieś sugestie odnośnie ostatecznego wyglądu to chętnie posłucham

Pozdrawiam - Sandra

Pozdrawiam - Sandra
www.drlucy.pl
www.latoma.net

[Link]

Sandro

Jest w sumie hmm względnie ok.. Ja bym powalczył z ramkami w blokach, tj usunął bym zewnętrzne i dał wewnątrz, wtedy zawartość boxa byłaby oramkowana, a nagłówek miał tylko zaokrąglone rogi.. Trzeba trochę przysiąść nad tymi klasami w stylach i pobawić się z godzinkę..

Mówiłem o tym, że kiedy pierwszy etap masz za sobą to warto rozważyć inne rzeczy..

np. żeby było smooth, zamiast wewnątrz kanciasto.., a na zewnątrz na okrągło..



to są przykłady możliwości:



Można też fajnie pobawić się obrazkami do bodrera, przykład:



itd..

Sandro, trochę się naszukałem w zakładkach, ale proszę specjalnie dla Ciebie
- Specyfikacjia border-radius (uwaga to CSS-3 a nie obowiązujące: CSS-2.1):
Spec. - Border-Radius - CSS3

Tam masz z przykładami i rysunkami, podane w bardzo przejrzysty sposób, - co do czego i jak..

Oczywiście, jak masz pytania to zapraszam, tylko trochę ciągle jestem zajęty i nie udaje mi się chwilowo
- odpowiadac od razu, okay?

Pozdrawiam
roco

roco

Administrator

3wProducer

Imagination is more Important than Knowledge

Posty 679

 

[Link]

Sandro

Jest w sumie hmm względnie ok.. Ja bym powalczył z ramkami w blokach, tj usunął bym zewnętrzne i dał wewnątrz, wtedy zawartość boxa byłaby oramkowana, a nagłówek miał tylko zaokrąglone rogi.. Trzeba trochę przysiąść nad tymi klasami w stylach i pobawić się z godzinkę..

Mówiłem o tym, że kiedy pierwszy etap masz za sobą to warto rozważyć inne rzeczy..

np. żeby było smooth, zamiast wewnątrz kanciasto.., a na zewnątrz na okrągło..



to są przykłady możliwości:



Można też fajnie pobawić się obrazkami do bodrera, przykład:



itd..

Sandro, trochę się naszukałem w zakładkach, ale proszę specjalnie dla Ciebie
- Specyfikacjia border-radius (uwaga to CSS-3 a nie obowiązujące: CSS-2.1):
Spec. - Border-Radius - CSS3

Tam masz z przykładami i rysunkami, podane w bardzo przejrzysty sposób, - co do czego i jak..

Oczywiście, jak masz pytania to zapraszam, tylko trochę ciągle jestem zajęty i nie udaje mi się chwilowo
- odpowiadac od razu, okay?

Pozdrawiam
roco

[Link]

Wielkie dzięki Roco za pomoc i poświęcony czas.

Jutro sobie poczytam i ew. jeszcze poeksperymentuję (chociaż jak wiesz nie lubię ulepszać dobrego - chyba że przestaje być dobre )

Pozdrawiam i życzę dobrej nocki - Sandra

Sandra

Global Moder

Miłośniczka psów

La Toma Magic

Posty 181

 

[Link]

Wielkie dzięki Roco za pomoc i poświęcony czas.

Jutro sobie poczytam i ew. jeszcze poeksperymentuję (chociaż jak wiesz nie lubię ulepszać dobrego - chyba że przestaje być dobre )

Pozdrawiam i życzę dobrej nocki - Sandra

Pozdrawiam - Sandra
www.drlucy.pl
www.latoma.net

[Link]

Poćwiczyłam trochę, przeniosłam wpisy z pliku stule.css do tp-style.css i jest lepiej.

Pozostały do wyeliminowania dwa problemy, próbowałam sama, ale chyba nie dam rady ):

1. zaokrąglone jest tło nagłówków na forum (temat, zaczęty przez, odpowiedzi itp)
2. strona z formularzem kontaktowym wyświetla się bez ramek

Pokażę to ma rysunkach

Sandra

Global Moder

Miłośniczka psów

La Toma Magic

Posty 181

 

[Link]

Poćwiczyłam trochę, przeniosłam wpisy z pliku stule.css do tp-style.css i jest lepiej.

Pozostały do wyeliminowania dwa problemy, próbowałam sama, ale chyba nie dam rady ):

1. zaokrąglone jest tło nagłówków na forum (temat, zaczęty przez, odpowiedzi itp)
2. strona z formularzem kontaktowym wyświetla się bez ramek

Pokażę to ma rysunkach

[4.99 KB]

forum.PNG   -› 4.99 KB, 291x140 - wyświetlony 599 razy



kontakt.PNG   -› 10.01 KB, 366x370 - wyświetlony 614 razy

[Link]

Sandro

Jednak nie rozumiem co jest tym problemem? - brak ramki w formularzu? i zaokrąglanie się nagłówków w gł. indexie działow?

W formularzu, to wiesz edycja pliku hmm jak mu tam? "formularz.template.php"? jeśli jest templatka od niego, to dodajesz klasę tborder, lub direct gdzie masz tę tabelę formularza, to dodajesz bordery tam gdzie trzeba, czyli do komórek, ale tylko zewnętrzne.
Natomiast w gł. indexie, to proste, stylujesz podobnie jak w formularzu, czyli lokalnie w pliku BoardIndex.template.php i jeśli nie ma tego pliku w tym konkretnym stylu, to easy, kopiujesz go tam ze stylu default a następnie obrabiasz.
Wystarczy że dasz border-radius:0; i go wyzerujesz..

Sandro jeśli dobrze zrozumiałem problem, to edycja lokalna może pomóc, a nie globalnie w stylach.css, ponieważ wpływa to na inne elementy jak widać..

Pozdrówka
roco

PS. jeśli dalej problem, lub cos niejasne, to pisz, ew. wyklaruj swoje pytania, o ile nie zajarzyłem..

roco

Administrator

3wProducer

Imagination is more Important than Knowledge

Posty 679

 

[Link]

Sandro

Jednak nie rozumiem co jest tym problemem? - brak ramki w formularzu? i zaokrąglanie się nagłówków w gł. indexie działow?

W formularzu, to wiesz edycja pliku hmm jak mu tam? "formularz.template.php"? jeśli jest templatka od niego, to dodajesz klasę tborder, lub direct gdzie masz tę tabelę formularza, to dodajesz bordery tam gdzie trzeba, czyli do komórek, ale tylko zewnętrzne.
Natomiast w gł. indexie, to proste, stylujesz podobnie jak w formularzu, czyli lokalnie w pliku BoardIndex.template.php i jeśli nie ma tego pliku w tym konkretnym stylu, to easy, kopiujesz go tam ze stylu default a następnie obrabiasz.
Wystarczy że dasz border-radius:0; i go wyzerujesz..

Sandro jeśli dobrze zrozumiałem problem, to edycja lokalna może pomóc, a nie globalnie w stylach.css, ponieważ wpływa to na inne elementy jak widać..

Pozdrówka
roco

PS. jeśli dalej problem, lub cos niejasne, to pisz, ew. wyklaruj swoje pytania, o ile nie zajarzyłem..

[Wyświetlanie bloków TP niezgodne ze stylem]

Code: [select]  -› [ Topic: Wyświetlanie bloków TP niezgodne ze stylem ]

[Wyświetlanie bloków TP niezgodne ze stylem]

Code: [select]  -› [ Topic: Wyświetlanie bloków TP niezgodne ze stylem ]