Yeoman

Jestem fanem rapu, a Donatan jest z nim wiadomo związany ściśle i myślę że jakby to robił jakiś raper to bym był zniesmaczony, a Don jest muzykiem, beatmakerem i nie ma go za co winić że idzie na przód. Zrobił hit, promuje hit. Jakoś Równonocy nie widzę w publicznych mediach i jest git. Poza tym Cleo niczego sobie dziewczyna

Nie widzisz tekstu bo masz to: (przynajmniej ja nie widzę tego tekstu poprzez to)

margin-left: 50%;
margin-top: 60%;

A ten obrazek który podajesz w background url to jakoś go nie doczytuje i jest 404 error.

Jesli podałeś background i w środku diva wrzuciłeś tekst to o ile nie jest on tego samego koloru co tło wnet bedzie go widać.

Mimo wszystko jeśli chciałbyś wiedzieć jak się go używa...

W konsoli dajesz: (cmd w windowsie)

npm install -g recess 

Na linux'a potrzeba praw do globalnego instalowania więc dajesz:

sudo npm install -g recess

Jeśli się zainstaluje poprawnie to w konsoli po prostu wpisujesz komendę:

recess sciezka/do/pliku/style.css

Przetestowane u mnie. Jak wpiszesz samo słowo recess w konsole to Ci wyświetli listę przełączników (opcji) do wykorzystania.

 

po co jeszcze nadkładać białych znaków do pliku?

W sumie dla mnie to tylko jedna odpowiedz pasuje - do kopii roboczej, aby lepiej się pracowało Później posłużyć się narzędziami do konwertowania, minifikacji, kompresji etc i mamy ładnego dista W przeciwnym wypadku nieco zbędne.

Na początek poleciłbym zbudować to menu na listach.

<ul class="navigation">
  <li id="przycisk">
    <a href="">Home</a>
  </li>
  <li id="przycisk2">
    <a href="">STYLE</a>
  </li>
  <li id="przycisk">
    <a href="">Kontakt</a>
  </li>
</ul>

Jeśli chodzi o menu rozwijane to musisz dodać do itemu, kolejną, zagnieżdżoną listę menu. Przykład:

<ul class="navigation">
  <li id="przycisk">
    <a href="">Home</a>
    <ul class="subnav">
      <li class="sublink">
        <a href="#">sublink</a>
      </li>
    </ul>
  </li>
  <li id="przycisk2">
    <a href="">STYLE</a>
  </li>
  <li id="przycisk">
    <a href="">Kontakt</a>
  </li>
</ul>

Domyślnie w CSS dajesz aby .subnav był ukryty czyli:

.subnav { display: none; }

A po najechaniu na rodzica dajesz w tym przypadku:

#przycisk:hover > .subnav { display: block; }

Oczywiście będziesz musiał ostylować takowe menu przykładowo na wyświetlanie absolutne względem rodzica.

Menu dla tego przykładu: http://jsfiddle.net/DV7Pk/1/

Pozdrawiam

I ja chętnie pomogę

A możesz uzasadnić dlaczego Ciebie to raduje ?

Mam dwie prośby do wszystkich.

1. Kod powinien być zawsze wklejony na forum - zewnętrzne serwisy mogą paść w każdej chwili.

Tu prośba do administracji, aby długi kod był ucinany w pewien sposób i dawał możliwość rozwinięcia.

Wciąż widuję wielokilometrowe wklejki, co jest dobre chyba tylko dla masochistów w pomaganiu

 

2. Gdy proponujecie narzędzia ułatwiające, wypadałoby polecać odpowiedni do danej rzeczy serwis.

Używanie Jsfiddle wyłącznie do css/html jest przegięciem. Są dedykowane temu celowi serwisy i są w tym dużo lepsze.

Po przejrzeniu wszystkiego co istniało w końcówce zeszłego roku proponuję: http://cssdesk.com

1. Zgodzę się z tym przycinaniem (przykładowo jakiś scroll nawet mógłby być), ale jak ktoś wkleja i nie formatuje kodu to w oczy razi mnie strasznie

2. Przegięciem ? Przegięciem byłoby uzywać jsfiddle dla css'a nie używając ramki 'css' Ktos lubi jsfiddle, ktoś cssdesk. Mi osobiście ten drugi nie hula (nie generuje rezultatu).

Koledze chodziło o to, żebyś na forum wrzucił link z demem zamiast suchego kodu Pisanie w notepad++ nie jest niczym złym, chociaż polecam Aptanę Studio z darmówek

Wrzuć demo, to coś zaradzimy.

A to już nie chce się samemu wkleić tego do demka ? hehe żarcik ;P

Kilka szczegółów dotyczących kodu.

1. Proponuję stylować po klasach,  nie po ID.

2. Stosuj nazewnictwo bardziej unikalne, bo troszkę ułatwi Ci to później problemów i lepiej się będzie czytało kod (mówię o box w box)

3. Odnoś się do samego ID lub klasy - pomijaj tagi elementów.

4. Flex nie zadziała na starszych wersjach przeglądarek (w tym IE) - a jeśli już byś chciał to masz tutaj:

html, body {
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
}
#box {
    padding: 0;
    margin: 0;
}

<div id="Standard">
    <div id="box-wymiar">
            <p id="box">
                BOKSIK
            </p>
    </div>
</div>

5. Proponuję edytor SublimeText

6 . Nie pisz 0px tylko po prostu 0

7.  .. coś tam bym jeszcze znalazł ale starczy Ci na tyle feedback'u

 

Jeśli strona ma być responsywna to wysokość i szerokość boxa nie powinny być hardcodowane. Nie podawaj ich na sztywno. Dałeś szerokość 400px, a co jeśli smartfon będzie miał szerokość 320px?

A tak:

@media only screen and (max-width : 320px) {
    div#box-wymiar{
        width: 100%;
    }
}

No ale wiadomo, po prostu od razu dać 100% lub w ogóle nie dawać.

Pozdrawiam

W pliku PHP pozmieniaj pozycje:

Nie dziękuj <i class=\"fa fa-minus\"></i>
Podziękuj <i class=\"fa fa-plus\"></i> 

na:

<i class=\"fa fa-minus\"></i> Nie dziękuj
<i class=\"fa fa-minus\"></i> Podziękuj 

W pliku JS zamiast:

lin.appendChild(icon); 

zmień na:

lin.insertBefore(icon, lin.firstChild);

Oczywiście w dwóch funkcjach -  thx_action, rthx_action i powinno śmigać pięknie

Ok na PW Ci podeślę pliki.

Logujesz się, wybierasz swoją domene.

Po wybraniu domeny masz następną stronę gdzie niżej zobaczysz dział 'zaawansowane' i tam klikasz w link 'przekierowania url'.

Tylko tutaj będzie to w takiej formie że wchodząc na domene przykładowo mojanazwa.pl przekieruje adres na mojanazwa.pl/wordpress/

Mam nadzieje że był jakiś powód tego by wrzucać bloga do podkatalogu ?

Musisz zrobić nowe przekierowanie o ile masz dostęp np. do DirectAdmina. Jeśli nie to skontaktuj się z administracją i poproś aby to zrobili.

Dziwne...

Mam dokładnie taki kod i działa fajnie.

icon.className = "fa fa-minus"

powyższy wpis spróbuj na wszelki wypadek domknąć za pomocą średnika, ponieważ umknęło mi to, aczkolwiek nie sądzę by to miało aż taki wpływ na to.

Podane wyżej rozwiązanie działa prawie identycznie jak rozwiązanie z tekstem.

Jaką przeglądarką testujesz ? Jakieś błędy w konsoli ? jak zachowuje się element ikony w środku znacznika <a> w czasie kliknięcia ? Usuwa go całkowicie czy może ukrywa czy może też po prostu coś nie tak z fontami ?

Możesz podać link do forum ?

Co masz na myśli pisząc używć ?

Da się dodać ikonkę ale z tego co widzę to znów jak klika się w dziękuje/nie dziękuje to on usuwa ikonę z htmla, a więc trzeba stworzyć element w JS i go przypisać do dwóch funkcji po kliknięciu.

Przede wszystkim w templatce musisz sobie dać link css do FontAwesome + wgrać folder z fontami.

Generalnie w pliku thx.php możesz podać to tak:

if(!$b) {
	$post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"javascript:return thx({$post['pid']});\" href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\">Podziękuj <i class=\"fa fa-plus\"></i></a>";
	}
else if($mybb->settings['thx_del'] == "1") {
	$post['thanks'] = "<a id=\"a{$post['pid']}\" onclick=\"javascript:return rthx({$post['pid']});\" href=\"showthread.php?action=remove_thank&tid={$post['tid']}&pid={$post['pid']}\">Nie dziękuj <i class=\"fa fa-minus\"></i></a>";
}

Dodałem sobie odpowiednie ikony fa fa-minus oraz fa fa-plus które po odświeżeniu będą na miejscu.

W pliku thx.js dałem tak:

var icon = document.createElement('i');

function thx_action(response)
{
	lin=thx_common(response)
	if(lin!=null)
	{
		lin.onclick= new Function("","return rthx("+pid+");");
		lin.href='showthread.php?action=remove_thank&pid='+pid;
		lin.textContent = "Nie dziękuj";
		icon.className = "fa fa-minus"
		lin.appendChild(icon);
	}
}

function rthx_action(response)
{
	lin=thx_common(response)
	if (lin!=null) 
	{
		lin.onclick = new Function("", "return thx(" + pid + ");");
		lin.href = 'showthread.php?action=thank&pid=' + pid;
		lin.textContent = "Podziękuj";
		icon.className = "fa fa-plus";
		lin.appendChild(icon);

	}
}

Tutaj stworzyłem nowy element <i> ponieważ po kliknięciu znika ikona którą dodajemy w pliku PHP.

Następnie w odpowiedniej funkcji dodaje odpowiednią klasę i dołączam całość wewnątrz <a>.

U mnie działa to fajnie, stabilnie.

Ogólnie szkoda że nie ma tam jQuery.

Ok zbadałem ten przypadek z braku zajęcia

thx.php

if(!$b) {
	$post['thanks'] = "<a class=\"thanks\" id=\"a{$post['pid']}\" 
			      onclick=\"javascript:return thx({$post['pid']});\" 
			      href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\">Podziękuj</a>";
}
else if($mybb->settings['thx_del'] == "1") {
	$post['thanks'] = "<a class=\"removeThanks\" id=\"a{$post['pid']}\" 
			      onclick=\"javascript:return rthx({$post['pid']});\" 
			      href=\"showthread.php?action=remove_thank&tid={$post['tid']}&pid={$post['pid']}\">Nie dziękuj</a>";
}

Tutaj wywaliłem na dobre <img> i ustawiłem w linku treść, którą sprawdza się po odświeżeniu przykładowo.

Kolejną linijkę wywaliłem z xml'a (<image>)

$output = "<thankyou>
		<list><![CDATA[$list]]></list>
		<display>".($list ? "1" : "0")."</display>
		<del>{$mybb->settings['thx_del']}</del>
	   </thankyou>";
echo $output;

Usunąłem to bo przecież tego nie chcesz mieć, a tylko CSS.

Teraz pokaże co zrobiłem żeby tekst się zmieniał. Każdorazowo po kliknięciu leci nowe żądanie a więc przypisałem to tak:

thx.js

function thx_action(response)
{
	lin=thx_common(response)
	if(lin!=null)
	{
		lin.onclick= new Function("","return rthx("+pid+");");
		lin.href='showthread.php?action=remove_thank&pid='+pid;
		lin.textContent = "Nie dziękuj";
	}
}

function rthx_action(response)
{
	lin=thx_common(response)
	if (lin!=null) 
	{
		lin.onclick = new Function("", "return thx(" + pid + ");");
		lin.href = 'showthread.php?action=thank&pid=' + pid;
		lin.textContent = "Podziękuj";
	}
	
	
}

Dodałem do nich lin.textContent i jeśli klikniesz w link to wywołasz funkcję która ustawi tekst odpowiedni dla akcji.

Z tego pliku poleciało także to:

img = document.getElementById('i' + pid);
img.src = xml.getElementsByTagName('image').item(0).firstChild.data;

Powinno zadziałać. U mnie błędów nie ma.

Teraz tylko dodaj klasę do <a> i będziesz mógł stylowac swój button

Zrób otoczkę dla zmiennej (np. span) i nadaj mu klasę.

Powiedzmy że:

<span class="thanksButton"><?php $zmienna; ?></span>

W css możesz dać tak:

.thanksButton a img {
    display: none !important;
}

a[href*="showthread.php?action=thank"]:before {
    content: "Podziękuj";
}

a[href*="showthread.php?action=remove_thank"]:before {
    content: "Nie dziękuj";
}

.thanksButton a {
    // Twój css dla buttona
}

Możesz to też zrobić za pomoca jQuery chociażby w podobny sposób co będzie chyba troszkę lepszym rozwiązaniem bo jeśli zależy Ci na uzytkownikach z IE7 to :before nie zadziała.

Przykładowo w jQuery możesz sprawdzić:

Link

Te metody powinny jakoś pomóc