Wikizone - Benutzerbeiträge [de]

Mac Terminal - Snippets

2016-12-08T20:45:14Z

149.172.227.142: Die Seite wurde neu angelegt: „== DNS Einträge abfragen == Beispiel: MX Einträge einer Domain dig +short mx meine-domain.de“

== DNS Einträge abfragen ==
Beispiel: MX Einträge einer Domain
dig +short mx meine-domain.de

Abstimmung wordpress

2016-12-08T07:56:31Z

149.172.227.142: /* Umfrage erstellen */

siehe auch [[DEKRA Direkt Blog]]
Der Blog '''DEKRA Direkt''' wird als interner Konzernblog verwendet und soll als Kontaktmittel der Mitarbeiter zur Vorstandsebene dienen. Dazu gibt es unter anderem die DEKRA Direkt Mitarbeiter Umfrage.

== Todo ==
* Backendanzeige der Votes ist Buggy
* Besser zum Testen wäre es wenn die Umfrage zunächst in eine Kategorie Test geht die auf der Startseite nicht dargestellt wird. - OK ist über Plugin realisiert.

Wordpress Extension Yop Poll - verwendet bei Mascha im Blog intern:

== yop poll Anpassungen ==
=== yop poll Tabellen ===
<pre>
------------ ----------------- --------------
yop_polls yop_poll_answers yop_poll_logs
------------ ----------------- --------------
id --------------| id --------------| id
name |-poll_id | pn
question answer | poll_id
total_votes votes | vote_id
total_answers ... |- answer_id
... --------------
------------ -----------------

---------------------- ----------------------------
yop_poll_custom_fields yop_poll_votes_custom_fields
---------------------- ----------------------------
id id
poll_id poll_id
custom_field vote_id
... custom_field_id
---------------------- user_id
custom_field_value
----------------------------
</pre>

Da bei einem custom text field bei der fragesstellung nur einzeiliger text möglich war, musst die datei
/wp-content/plugins/yop-poll/inc/yop_poll_model.php

In der datenbank die Tabelle:

kas_wp_yop_poll_votes_custom_fields

Feld: custom_field_value

von varchar (255) auf Text geändert.

== SQL-Abfragen für Antworten mit Kommentar ==
=== SQL nur Ergebnisse ===
<pre>
SELECT `id` , `poll_id` , `answer_id` , `ip` , `http_referer` , `vote_date` , `pn`
FROM `kas_wp_yop_poll_logs`
WHERE `poll_id` =38
ORDER BY `answer_id` ASC
LIMIT 0 , 500
</pre>
=== SQL Abfrage mit Kommentaren ===
<pre>
</pre>

Alte Abfrage
<pre>
SELECT *
FROM `kas_wp_yop_poll_logs`
LEFT OUTER JOIN `kas_wp_yop_poll_votes_custom_fields` ON `kas_wp_yop_poll_logs`.`vote_id` = `kas_wp_yop_poll_votes_custom_fields`.`vote_id`
WHERE `kas_wp_yop_poll_logs`.`poll_id` =13
</pre>
=== Weitere Abfragen ===
Welche Custom Fields gehören zu welchen Umfrage (Pivot Version)

Dynamische Version (funktioniert noch nicht aber die Richtung dürfte stimmen)
<pre>
SET @sql = NULL;
SELECT
GROUP_CONCAT(DISTINCT
CONCAT(
'max(case when custom_field = ''',
custom_field,
''' then custom_field end) AS ',
custom_field
)
) INTO @sql
FROM kas_wp_yop_poll_custom_fields;

SET @sql = CONCAT('SELECT poll_id, ', @sql, '
FROM kas_wp_yop_poll_custom_fields
GROUP BY poll_id');

PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
</pre>

== Neue Umfrage für DEKRA Connect durchführen ==
=== Allgemein ===
Läuft 2 Wochen ab ca. Mitte des Monats. Danach Auswertung und Grafikerstellung.
==== Updates ====
2015-10 - Umfrage nur mit Cookie check -> Mascha möchte keine Userunterbrechung. Später werden die Ergebnisse manuell gereinigt

===== Infos zum Cookie Check =====
Wenn man mit Cookies kontrolliert, wie wir das im Moment machen, dann testet das Plugin immer ob für eine bestimmte Umfrage schon abgestimmt wurde. '''Egal ob die Umfrage neu gestartet wurde'''.

Technisch wird dazu ein Cookie mit der ID der Umfrage hinterlegt. Dieses hat eine '''Gültigkeitsdauer''' (kann man einstellen z.B. 14 Tage). Solange das Cookie gültig ist kann man dann nicht mehr abstimmen.

Das bedeutet '''alle Browser die noch nicht abgestimmt haben können auch abstimmen''' !

Wenn du nochmal testen willst mußt du die Cookies löschen oder 14 Tage warten.

Nochmal zur Info Vor und Nachteile der anderen Lösungen

* '''Kontrolle über IP''': Vorteil recht zuverlässig schwer zu umgehen. Nachteil: wenn Benutzer mit der gleichen IP ankommen kann es sein dass einer nicht abstimmen kann.

* Über die '''Personalnummer''' Vorteil: Sehr Zuverlässig. Nachteil: Schlechte User Experience

== Technischer Ablauf ==
Stand März 2015

* Das Umfrage Plugin im WP ist auf '''block by Personal Number''' gestellt. -> Ab 2016 nur noch '''by Cookie'''(siehe oben)
* Ein User kann nur Voten wenn eine id=12345 (Personalnummer) angehängt ist. Ansonsten wird zunächst auf das DEKRA Intranet weiter geleitet (über alert).
* Dort wird die Personalnummer als id=12345 an den Link angehängt und auf intern-blog.dekra.de/category/dekra-direkt/?id=12345 geleitet Nur wenn eine solche id vorhanden ist kann gevoted werden. Ist nicht supersicher weil die Nummer willkürlich geändert werden kann, nachträgliche Prüfung wäre mit Personalnummern Liste möglich. Verbesserungspotential wäre POST übermittlung, Gültigkeitsprüfung durch PN-Index oder Formel.
* Hat die id '''schon gevotet''' wird nur das Ergebnis angezeigt.
* Im DEKRA Intranet werden Links an die eine id angehängt werden soll mit dem Parameter '''?id=public''' Veröffentlicht. public wird dann automatisch durch die Personalnummer des Mitarbeiters ersetzt, bevor weitergeleitet wird.

=== Umfrage erstellen ===
* Achtung manchmal kollidiert die Abfrage mit alten Cookies der letzten Umfrage. Genau ist das noch nicht geklärt. Hilfe bringt:
** dafür sorgen, daß die alte Umfrage nicht mit angezeigt wird
** Logs löschen
** Wenn nichts hilft die Stats Reseten (kann sein daß dies nicht nötig ist.)

* 1 oder mehrere (Mascha will meist 3) Umfragen-Dummies erstellen (z.B. eine alte klonen - '''Vorsicht: Einstellungen für Datum, Template und Blocking''' werden nicht übernommen)
* Template: '''DEKRA Umfrage mit Kommentar'''
** Mit dem Template '''DEKRA Umfrage mit dynamischem Kommentar''' kann man zusätzlich noch JavaScript Popups öffnen und auf die gewählte Antwort reagieren (siehe JS im Template)
** Das Template '''Umfrage mit mehr Antworten''' erlaubt mehr als zwei Antwortmöglichkeiten. Die Kommentare werden dann untereinander dargestellt. Das ist zugleich auch das sicherste Template, was die Darstellung angeht.
* Blocking by auf '''Personal Number''' - dadurch wird die Abfrage des id Parameters gestartet. Zum Testen auf don't Block stellen. Achtung IE hat manchmal Caching Probleme.
* Start und Enddatum setzen
* Abstimmung in einen '''Beitrag in Kategorie Dekra Direkt''' einpflegen (evtl. erst nach dem Testen) -> Startseite sichtbar
* Am Ende Umfrage auf '''nur Antwort''' !
* Geo-bit erstellt die Fragen, diese werden von Mascha angepasst und von Ihr in einem Beitrag veröffentlicht.
* Start der Umfrage durch setzen der Kategorie (todo ob das klappt)

=== Test der Umfrage ===
* Vorige Tests sind sinnvoll. Ein Test von Geo-bit (einfach id anhängen). Ein Test von Dekra
=== Ende der Umfrage und Auswertung ===
Für die Auswertung benötigt Mascha eine '''Excel-Tabelle''' in der '''nach Antworten und sortiert''' ist. Ebenso die dazugehörigen Kommentare. Doppelte IPs rausschmeißen. Wenn Personalnummerliste vorhanden könnte man hier nach Gültigkeit prüfen.
* Umfrage mit Datum beenden oder auf Maschas Hinweis, '''Umfrage auf don't block''', damit die Umleitung auf Dekra nicht mehr aktiv ist, außerdem '''Enddatum setzen''' und auf '''Ergebnis anzeigen nach Enddatum'''.
* SQL Abfrage (siehe Statement), Export als ods oder csv
* Doppelte überprüfen
* Umwandeln in Excel
* Schaubild aus Numbers

=== Löschen unerwünschter Kommentare ===

In
Admin -> Yop poll -> All polls -> meineUmfrage -> votes

hier auswählen und löschen

Problem: die Kommentare werden nicht mehr angezeigt. TODO

=== Anpassungen am Plugin Yop poll===

yop-poll => inc => admin.php

Hier die DB mit prefix versehen. "kas_"
yop-poll => inc => yop_poll_model.php
yop-poll => inc => db_schema.php
yop-poll => js => yop_poll_public.js
==== Kommentare ====
MUSS überarbeitet werden
yop_poll_modell.php

return_poll_html ->
dort wird der Template Block
[ANSWER_RESULT_CONTAINER]
[/ANSWER_RESULT_CONTAINER]
mit pregreplace über eine Callback Funktion ersetzt
answer_result_callback(m$)
darin wiederum wird
get_poll_comments($poll_id)
aufgerufen, dieses gibt ein array zurück das dann in HTML umgesetzt wird. Diese Ausgabe erfolbt über die Abfrage von
$this->is_view_poll_results()
Das bedeutet die Ausgabe erfolgt wenn im Backend die Bedingung für die Ausgabe der Results gesetzt ist (z.B. Results after End Date) Gute erweiterung wäre ein eigener Block für die Comments

'''Im Template muß der Block natürlich auch gesetzt sein.''' (beim entsprechenden Template)

Problem: Die Ausgabe erfolgt nur wenn die Logs der Umfrage nicht gelöscht sind.
Ausgabe der Kommentare bisher
<syntaxhighlight lang="sql">
SELECT yp.id,yp.name,yp.question,ypa.answer,ypvcf.custom_field_value,ypcf.custom_field,ypl.vote_id FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON (yp.id=ypcf.poll_id)
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON (ypcf.id = ypvcf.custom_field_id)
JOIN kas_wp_yop_poll_logs ypl ON (ypvcf.vote_id = ypl.vote_id)
JOIN kas_wp_yop_poll_answers ypa ON (ypl.answer_id = ypa.id)
WHERE yp.id=[pollID] AND ypl.answer_id=[answerID];
</syntaxhighlight>
Die Abfrage wird für jede Antwort (answer_id) ausgeführt. Aus den Logs wird die answer_id geholt. Wenn diese im Log fehlt wird nichts zurückgegeben.
Wie kann man die Zuordnung Kommentar - answer_id noch herstellen? answer_id und vote_id stehen auch in yop_poll_voters, vote_id steht auch in yop_poll_votes_custom_fields
Also statt mit wp_yop_poll_logs joint man mit yop_poll_voters.

Beispiel
<syntaxhighlight lang="sql">
SELECT yp.id, yp.name, yp.question, ypa.answer, ypvcf.custom_field_value, ypcf.custom_field, ypv.vote_id
FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON ( yp.id = ypcf.poll_id )
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON ( ypcf.id = ypvcf.custom_field_id )
JOIN kas_wp_yop_poll_voters ypv ON ( ypvcf.vote_id = ypv.vote_id )
JOIN kas_wp_yop_poll_answers ypa ON ( ypv.answer_id = ypa.id )
WHERE yp.id =50
AND ypv.answer_id =113
</syntaxhighlight>

== Yop Poll Templates ==
Todo - Anpassen um ungenutzte Features zu nutzen (z.B. after End Date schöne Anzeige der Ergebnisse)
=== DEKRA Umfrage mit Kommentar ===
Vor Umfrage:
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<ul>
[ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
<div id="yop-poll-custom-%POLL-ID%">
<ul>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
</ul>
</div>
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-VOTE-BUTTON%</div>
<div id="yop-poll-results-%POLL-ID%">%POLL-VIEW-RESULT-LINK%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
</li><div id="gb_cust">VORLÄUFIGES·ERGEBNIS·DER·ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<span class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result-%POLL-ID%">
<span class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div>

[/ANSWER_RESULT_CONTAINER]

</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>

<div>%POLL-TOTAL-VOTES%</div>
<div id="yop-poll-back-%POLL-ID%">%POLL-BACK-TO-VOTE-LINK%</div>
</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>

After End Date
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">

</div>
<div id="gb_end">Die Abstimmung ist beendet.</div>

<ul class="afterVote">

[ANSWER_RESULT_CONTAINER]

[/ANSWER_RESULT_CONTAINER]
</ul>
</pre>
CSS
<pre>
#yop-poll-container-%POLL-ID% {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_poll_1.png");
/* border: 5px solid #3F8B43;*/
background-repeat:no-repeat;
color: #555555;
font-size: 12px;
overflow: hidden;
padding: 10px;
width: 632px;
/* height: 300px;*/
}
#yop-poll-name-%POLL-ID% {
font-size:14px;
font-weight:bold;
}

#yop-poll-question-%POLL-ID% {
color: #000000;
font-size: 14pt;
font-weight: 500;
height: 80px;
line-height: 26px;
margin: 0 50px 0 0;
padding-left: 215px;
padding-top: 40px;
text-align: center;
width: 300px;
margin-bottom: 100px;
}
#yop-poll-answers-%POLL-ID% {
}
#yop-poll-answers-%POLL-ID% ul {
list-style: none outside none;
margin: 0;
position: relative;
top: 20px;
left: 270px;
}
#yop-poll-answers-%POLL-ID% ul li {
font-style:normal;
margin-bottom:10px;
padding:0px;
font-size:12px;
width: 190px !important;
}
#yop-poll-answers-%POLL-ID% ul li input {
margin:0px;
float:none;
}
#yop-poll-answers-%POLL-ID% ul li label {
margin:0px;
font-style:normal;
font-weight:bold;
font-size:16px;
float:none;
z-index: 10;
}
.yop-poll-results-%POLL-ID% {
font-size: 12px;
font-style: italic;
font-weight: normal;
margin-left: 15px;
}

#yop-poll-custom-%POLL-ID% { }
#yop-poll-custom-%POLL-ID% ul {
font-size: 14px;
font-weight: 500;
left: 270px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 20px;
float: left;
width: 375px;
}
#yop-poll-custom-%POLL-ID% ul li {
padding:0px;
margin:0px;
font-size:14px;
}
#yop-poll-container-%POLL-ID% input[type='text'] {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
border: 1px solid #B9B8B8;
}

#yop-poll-container-%POLL-ID% textarea {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
font-family: Verdana;
color: #666;
border: 1px solid #B9B8B8;
}

#yop-poll-captcha-input-div-%POLL-ID% {
margin-top:5px;
}
#yop-poll-captcha-helpers-div-%POLL-ID% {
width:30px;
float:left;
margin-left:5px;
height:0px;
}

#yop-poll-captcha-helpers-div-%POLL-ID% img {
margin-bottom:2px;
}

#yop-poll-captcha-image-div-%POLL-ID% {
margin-bottom:5px;
}

#yop_poll_captcha_image_%POLL-ID% {
float:left;
}

.yop_poll_clear {
clear:both;
}

#yop-poll-vote-%POLL-ID% {
float:left;
/*width:100%; */
padding-left: 270px;
margin-top: 20px;
margin-bottom: 100px;
}

li.yop-poll-li-result-%POLL-ID% {
/* margin-top: 50px;*/
}

.yop-poll-results-bar-%POLL-ID% { background:#f5f5f5; height:10px; }
.yop-poll-results-bar-%POLL-ID% div { background:#555; height:10px; }
#yop-poll-vote-%POLL-ID% div#yop-poll-vote-%POLL-ID% button { float:left; }
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% {
float: right;
margin-bottom: 20px;
margin-top: -20px;
width: auto;
}
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div#yop-poll-back-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div { float:left; width:100%; }

#yop-poll-container-error-%POLL-ID% {
font-size:12px;
font-style:italic;
color:red;
left: 290px;
position: relative;
top: 270px;
}

.gb-btn {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
text-transform: uppercase;
width: 130px;
}

#gb_cust {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-left: 0px;
padding-top: 40px;
background-color: transparent;
}
.yop-poll-results-bar-%POLL-ID% div{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
height: 30px;
margin-top: 0px;
}

.yop-poll-results-bar-%POLL-ID% {
height: 30px;
width:99%;
}

.pds-answer-text-%POLL-ID% {
font-size: 0.85em;
font-weight: bold;
color: #999;
/* margin-top: -10px;*/
}

.pds-feedback-per-%POLL-ID% {
color: #999999;
font-size: 1em;
margin-left: 5px;
margin-top: -25px;
font-weight: bold;
}

.yop_poll_vote_button{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
width: 250px;
}

#gb_end {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-bottom: 100px;
padding-left: 250px;
padding-top: 130px;
background-color: transparent;
}

#yop-poll-container-%POLL-ID% textarea {
#max-width: 350px !important;
}

#yop-poll-container-success-%POLL-ID% {
font-size:12px;
font-style:italic;
color:green;
}
</pre>
JS
<pre>
function stripBorder_%POLL-ID%(object) {
object.each(function() {
if( parseInt(jQuery(this).width() ) > 0) {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("border-left-width")) - parseInt(jQuery(this).css("border-right-width")) );
}
else {
jQuery(this).css("border-left-width", '0px');
jQuery(this).css("border-right-width", '0px');
}
});
}
function stripPadding_%POLL-ID%(object) {
object.each(function() {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("padding-left")) - parseInt(jQuery(this).css("padding-left")) );
});
}

function strip_results_%POLL-ID%() {
stripPadding_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop_poll_li_result-%POLL-ID%") );
stripBorder_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-result-bar-%POLL-ID%"));
}

jQuery(document).ready(function(e) {
if(typeof window.strip_results_%POLL-ID% == 'function')
strip_results_%POLL-ID%();

if(typeof window.tabulate_answers_%POLL-ID% == 'function')
tabulate_answers_%POLL-ID%();

if(typeof window.tabulate_results_%POLL-ID% == 'function')
tabulate_results_%POLL-ID%();

});

function equalWidth_%POLL-ID%(obj, cols, findWidest ) {
findWidest = typeof findWidest !== 'undefined' ? findWidest : false;
if ( findWidest ) {
obj.each(function() {
var thisWidth = jQuery(this).width();
width = parseInt(thisWidth / cols);
jQuery(this).width(width);
jQuery(this).css('float', 'left');
});
}
else {
var widest = 0;
obj.each(function() {
var thisWidth = jQuery(this).width();
if(thisWidth > widest) {
widest = thisWidth;
}
});
width = parseInt( widest / cols);
obj.width(width);
obj.css('float', 'left');
}
}

function tabulate_answers_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID%"), %ANSWERS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %ANSWERS-TABULATED-COLS%, true );
}

function tabulate_results_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID%"), %RESULTS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %RESULTS-TABULATED-COLS%, true );
}
jQuery(document).ready(function(){
runOnPollStateChange_%POLL-ID%();
});

function runOnPollStateChange_%POLL-ID%() {};
</pre>
=== Dekra Poll Template für ID 2 (altes Template) ===
Vor Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">STIMMEN SIE JETZT AB !</div>
<ul>
[ANSWER_CONTAINER]
<li class="gb-ac yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="gb-oac yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div class="poll-vote-button">%POLL-VOTE-BUTTON%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
<div class="gb-storage" gb-poll-id="%POLL-ID%"></div>
<script type="text/javascript">

// Load check from Dean Edwards/Matthias Miller/John Resig

function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
if (_timer) clearInterval(_timer);

jQuery(document).ready(function() {
// remove vote button
jQuery('.poll-vote-button').html('');
// add Buttons
jQuery('.gb-ac').each(function(index,domEle){
var answer_id;
var label;
var content;
answer_id = jQuery(this).find('input:first').val();
label = jQuery(this).find('label:first').html();
content = '<button class="gb-btn" value="' + answer_id + '" type="button">' + label + '</button>';
//jQuery(this).append(content);
jQuery(this).html(content);
//add click handler
jQuery(this).find('button:first').click(function(){
answer_id = jQuery(this).val();
poll_id = jQuery('.gb-storage:first').attr('gb-poll-id');
hidden_field = '<input id="yop-poll-answer-' +answer_id + '" type="hidden" name="yop_poll_answer" value="' + answer_id + '">'
jQuery(this).after(hidden_field);
yop_poll_do_vote(poll_id);
return false;
});
});
});

};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}

/* for other browsers */
window.onload = init;
</script>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">VORLÄUFIGES ERGEBNIS DER ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<div class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</div>
<div class="pds-feedback-result-%POLL-ID%">

</div>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div><div class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</div>
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>

</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>
After End Date
<pre>
This poll is closed!
Poll activity: <br>
start_date %POLL-START-DATE%<br>
end_date %POLL-END-DATE%<br>

Poll Results:
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-1" class="yop-poll-answers">
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label">
<span class="pds-answer-text">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result">
<span class="pds-feedback-per"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<span class="pds-clear" style="display: block;clear: both;height:1px;line-height:1px;"> </span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
%POLL-VOTE-BUTTON%
</pre>

== Probleme lösen ==
=== Kommentare werden am Ende der Umfrage nicht angezeigt ===
* In der Umfrage muß bei Show results after Poll End Date oder zur Not auch Before Vote gewählt werden
* Im Template müssen die entsprechenden Felder im Bereich "Template after Poll End" vorhanden sein.

== Change Log ==
=== Anpassungen für Admin Kommentare ===
2016-07

'''Datenbanktabelle:'''
<syntaxhighlight lang="sql">
--
-- Tabellenstruktur für Tabelle `kas_wp_yop_poll_admin_comments`
--

CREATE TABLE IF NOT EXISTS `kas_wp_yop_poll_admin_comments` (
`id` int(10) unsigned NOT NULL,
`vote_id` varchar(128) COLLATE latin1_general_ci NOT NULL,
`comment` text COLLATE latin1_general_ci NOT NULL,
`poll_id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=2 ;

</syntaxhighlight>

<pre>

db_schema.php Tabelle hinzufügen
admin.php Tabelle hinzufügen
yop_poll.php Tabelle hinzufügen

answer_result_replace_callback ->
get_poll_comments -> admin kommentare dazufügen

2016-06
Problem: Wenn Logs gelöscht sind werden keine Kommentare mehr angezeigt
Lösungsansatz. Leeres Ergebnis, weil ein Join über die vote_id zu den Logs geht.
8.8.13

Hallo Mascha und Clemens,

folgende Funktionalität ist jetzt implementiert:

- Zu einem Hauptbeitrag (Sozusagen 1.Ebene - entspricht dem Post in
Wordpress) kann ein normaler Benutzer eine Frage stellen.
- Zu den Fragen (das wäre dann die 2. Ebene) kann jeder Benutzer
beliebig viele Beiträge machen
- Benutzer ab Level 7 (Redakteure und Admins) können beliebig viele
Fragen stellen.

- Labels sind jetzt: "Hinterlasse einen Beitrag" und "Beitrag abschicken"

Grüße,

Stephan
</pre>

11

10/2014
* Kommentare in Spalten sortieren, je nach Antwort
* CSS Overflow auf auto setzen, damit bei langen Kommentaren ein Scrollbalken kommt. Dafür maximale Höhe für Kommentarausgabe, damit die Felder optisch nicht zu groß werden

2016 - 04
* Neues Template für mehr Antwortoptionen. Kommentare werden untereinander (nicht in Spalten) dargestellt
* Einträge bei denen der User die nur den Namen ausfüllen aber nichts im Kommentarfeld schreiben werden nicht mehr angezeigt

CSS - Texteffekte

2016-12-06T10:57:02Z

149.172.227.142: /* Schatteneffekte 2 */

CSS - Texteffekte

2016-12-06T10:48:01Z

149.172.227.142: /* Schicke Text-Schatteneffekte */

== Hit the floor ==
3D Block mit Schatten Effekt

http://codepen.io/ThatGuySam/pen/CytDA (2016-12)
<syntaxhighlight lang="html5">
<div class="hit-the-floor">404</div>
</syntaxhighlight>

<syntaxhighlight lang="css">
.hit-the-floor {
color: #fff;
font-size: 12em;
font-weight: bold;
font-family: Helvetica;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

.hit-the-floor {
text-align: center;
}

body {
background-color: #f1f1f1;
}
</syntaxhighlight>
== Background Clip FX ==
Sehr schicker Effekt mit Bildern im Text-Background

http://codepen.io/Jintos/pen/crlxk (2016-12)

HTML
<syntaxhighlight lang="html5">
<div class="wrapper">
<p class="title">Play with background-clip text</p>
<div class="clip-text clip-text_one">JINTOS</div>
<div class="clip-text clip-text_fifteen clip-text--no-textzone">JINTOS</div>
<div class="clip-text clip-text_twelve clip-text--cover">JINTOS</div>
<div class="clip-text clip-text_tree clip-text--no-textzone">JINTOS</div>
<div class="clip-text clip-text_two">JINTOS</div>
<div class="clip-text clip-text_fourteen clip-text--cover">JINTOS</div>
<div class="clip-text clip-text_tree">JINTOS</div>
<div class="clip-text clip-text_eleven clip-text--cover">JINTOS</div>
<div class="clip-text clip-text_four">JINTOS</div>
<div class="clip-text clip-text_five">JINTOS</div>
<div class="clip-text clip-text_six">JINTOS</div>
<div class="clip-text clip-text_seven">JINTOS</div>
<div class="clip-text clip-text_eight">JINTOS</div>

<div class="clip-text clip-text_nine">JINTOS</div>
<div class="clip-text clip-text_ten">JINTOS</div>
<div class="clip-text clip-text_thirteen clip-text--cover">JINTOS</div>
</div>
</syntaxhighlight>

CSS (scss)
<syntaxhighlight lang="css">
/*
Based from this article from Divya Manian -
http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
*/
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

* {
margin: 0;
padding: 0;
}

*,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html,
body {
min-height: 100%;
}

body {
font-family: 'Oswald', sans-serif;
color: #fff;
background-color: #000;
}

.wrapper {
text-align: center;
}

.title {
font-size: 2em;
position: relative;
margin: 0 auto 1em;
padding: 1em 1em .25em 1em;
text-align: center;
text-transform: uppercase;
}
.title:after {
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 4px;
margin-left: -120px;
content: '';
background-color: #fff;
}

/* Clip text element */
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;

-webkit-text-fill-color: transparent;
}

.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}

/* Background */
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}

/* Text Background (black zone) */
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}

/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
background-position: -.65em 0;
}

.clip-text--no-textzone:after {
content: none;
}

/* Use Background-size cover for photo background and no-repeat background */
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}

/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */
.clip-text_one {
background-image: url(http://lorempixel.com/480/200/abstract/7);
}

.clip-text_two {
background-image: url(http://lorempixel.com/480/200/abstract);
}

.clip-text_tree {
background-image: url(http://lorempixel.com/480/200/abstract/2);
}

.clip-text_four {
background-image: url(http://lorempixel.com/480/200/abstract/4);
}

.clip-text_five {
background-image: url(http://lorempixel.com/480/200/abstract/5);
}

.clip-text_six {
background-image: url(http://lorempixel.com/480/200/abstract/9);
}

.clip-text_seven {
background-image: url(http://lorempixel.com/480/200/abstract/8);
}

.clip-text_eight {
background-image: url(http://lorempixel.com/410/200/people);
}

.clip-text_nine {
background-image: url(http://lorempixel.com/480/200/nightlife);
}

.clip-text_ten {
background-image: url(http://lorempixel.com/480/200/nightlife/8);
}

.clip-text_eleven {
background-image: url(http://lorempixel.com/480/200/fashion/10/cc);
background-size: cover;
}

.clip-text_twelve {
background-image: url(http://lorempixel.com/480/200/people/7/cc);
}

.clip-text_thirteen {
background-image: url(http://lorempixel.com/480/200/food/5/cc);
}

.clip-text_fourteen {
background-image: url(http://lorempixel.com/480/200/city/9/cc);
}

.clip-text_fifteen {
background-image: url(http://lorempixel.com/480/200/nightlife/5);
}
</syntaxhighlight>

== Schicke Text-Schatteneffekte ==
http://codepen.io/juanbrujo/pen/yGpAK (2016-12)

CSS (SASS)
<syntaxhighlight lang="css">
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 92px;
padding: 80px 50px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;

&.elegantshadow {
color: #131313;
background-color: #e7e5e4;
letter-spacing: .15em;
text-shadow:
1px -1px 0 #767676,
-1px 2px 1px #737272,
-2px 4px 1px #767474,
-3px 6px 1px #787777,
-4px 8px 1px #7b7a7a,
-5px 10px 1px #7f7d7d,
-6px 12px 1px #828181,
-7px 14px 1px #868585,
-8px 16px 1px #8b8a89,
-9px 18px 1px #8f8e8d,
-10px 20px 1px #949392,
-11px 22px 1px #999897,
-12px 24px 1px #9e9c9c,
-13px 26px 1px #a3a1a1,
-14px 28px 1px #a8a6a6,
-15px 30px 1px #adabab,
-16px 32px 1px #b2b1b0,
-17px 34px 1px #b7b6b5,
-18px 36px 1px #bcbbba,
-19px 38px 1px #c1bfbf,
-20px 40px 1px #c6c4c4,
-21px 42px 1px #cbc9c8,
-22px 44px 1px #cfcdcd,
-23px 46px 1px #d4d2d1,
-24px 48px 1px #d8d6d5,
-25px 50px 1px #dbdad9,
-26px 52px 1px #dfdddc,
-27px 54px 1px #e2e0df,
-28px 56px 1px #e4e3e2;
}
&.deepshadow {
color: #e0dfdc;
background-color: #333;
letter-spacing: .1em;
text-shadow:
0 -1px 0 #fff,
0 1px 0 #2e2e2e,
0 2px 0 #2c2c2c,
0 3px 0 #2a2a2a,
0 4px 0 #282828,
0 5px 0 #262626,
0 6px 0 #242424,
0 7px 0 #222,
0 8px 0 #202020,
0 9px 0 #1e1e1e,
0 10px 0 #1c1c1c,
0 11px 0 #1a1a1a,
0 12px 0 #181818,
0 13px 0 #161616,
0 14px 0 #141414,
0 15px 0 #121212,
0 22px 30px rgba(0, 0, 0, 0.9);
}
&.insetshadow {
color: #202020;
background-color: #2d2d2d;
letter-spacing: .1em;
text-shadow:
-1px -1px 1px #111,
2px 2px 1px #363636;
}
&.retroshadow {
color: #2c2c2c;
background-color: #d5d5d5;
letter-spacing: .05em;
text-shadow:
4px 4px 0px #d5d5d5,
7px 7px 0px rgba(0, 0, 0, 0.2);
}
}
</syntaxhighlight>

=== Schatteneffekte 2 ===
http://www.htmlgoodies.com/html5/client/mastering-css3.-7-cool-text-shadow-samples-you-cant-miss.html

We’ve been exploring the basics on how to use CSS3 shadows: box-shadow and text-shadow. Today we are going to improve our skills and will look into how to build some amazing text-shadows.

Some of the ideas for shadows, I found in various tutorials for Photoshop — and I was interested whether I can achieve similar effects by using just text-shadow.

Internet Explorer and Windows 8

To try all these samples yourself and express your creativity with the text-shadow, try downloading Internet Explorer 10. All mentioned techniques will also work with metro style apps for Windows 8 built using html and javascript. May The Shadow be with you!

'''Arcade Love'''

In our first sample we will try to draw some cool embossed text. We will start with a simple lime color text:

color: hsl(80, 70%, 55%);

Next let’s add some embossed effects by adding few shadows with 1px diagonal offset (note how the shadows color is defined comparing with the text color!):

text-shadow: -1px -1px 0 hsl(80, 70%, 35%),
-2px -2px 1px hsl(80, 70%, 35%);

Now we will add some nice details — a light white blurred shadow around the text and a dark shadow on the bottom to soft transitions:

text-shadow: 0 0 2px #fff,

-1px -1px 0 hsl(80, 70%, 35%),

-2px -2px 1px hsl(80, 70%, 35%),

-2px -2px 2px hsl(80, 10%, 15%);

Next let’s add a substrate for our text. To make it happen we need to expand our shadow (here we are using the fourth parameter of the text-shadow rule — spray-distance):

text-shadow: ...

-3px -3px 0 7px hsl(60, 10%, 65%),

-4px -4px 0 7px hsl(60, 10%, 65%),

-5px -5px 0 7px hsl(60, 10%, 65%),

-6px -6px 0 7px hsl(60, 10%, 65%);

Finally to place our text on the background lets add a dark blurred shadow on the bottom of the substrate:

text-shadow: ...

-7px -7px 4px 8px hsl(60, 10%, 40%),

-8px -8px 6px 9px hsl(60, 10%, 55%);

Final result

color: hsl(80, 70%, 55%);

text-shadow: 0 0 2px #fff,

/* embossed text */

-1px -1px 0 hsl(80, 70%, 35%),

-2px -2px 1px hsl(80, 70%, 35%),

/* transition to substrate */

-2px -2px 2px hsl(80, 10%, 15%),

/* substrate */

-2px -2px 0 7px hsl(60, 80%, 95%),

-3px -3px 0 7px hsl(60, 10%, 65%),

-4px -4px 0 7px hsl(60, 10%, 65%),

-5px -5px 0 7px hsl(60, 10%, 65%),

-6px -6px 0 7px hsl(60, 10%, 65%),

/* shadow for substrate */

-7px -7px 4px 8px hsl(60, 10%, 40%),

-8px -8px 6px 9px hsl(60, 10%, 55%);

Color Happiness

In the second sample we will reuse some ideas of the first one: we a going to build multiple colorful substrates making a pyramid of them. We will start with a very simple pink text:

color: hsl(330, 100%, 50%);

First of all let’s make it embossed. This time our “shadow” looks to the bottom and is really small, so I can reduce a number of applied rules by omitting intermediate 1px offsets — but on case of diagonal shadow such approach will result an aliasing effect. Also I will add some blurring to soft the transition to the next substrate:

text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),

0 3px 2px 0px hsla(330, 100%, 15%, 0.5);

Next let’s add one more expanded substrate with a different hue-value (note that I’m changing only vertical offset, hue and spread-distance):

text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),

0 3px 2px 0px hsla(330, 100%, 15%, 0.5),

0 3px 0 3px hsl(350, 100%, 50%),

0 5px 0 3px hsl(350, 100%, 25%),

0 6px 2px 3px hsla(350, 100%, 15%, 0.5);

Now we just need to repeat the same trick few more times increasing the size of substrates and moving the hue in a right direction:

text-shadow: ...

0 6px 0 9px hsl(20, 100%, 50%),

0 8px 0 9px hsl(20, 100%, 25%),

0 9px 2px 9px hsla(20, 100%, 15%, 0.5),

...

0 15px 0 45px hsl(90, 100%, 50%),

0 17px 0 45px hsl(90, 100%, 25%),

0 17px 2px 45px hsla(90, 100%, 15%, 0.5);

Final result

color: hsl(330, 100%, 50%);

text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),

0 3px 2px 0px hsla(330, 100%, 15%, 0.5),

/* next */

0 3px 0 3px hsl(350, 100%, 50%),

0 5px 0 3px hsl(350, 100%, 25%),

0 6px 2px 3px hsla(350, 100%, 15%, 0.5),

/* next */

0 6px 0 9px hsl(20, 100%, 50%),

0 8px 0 9px hsl(20, 100%, 25%),

0 9px 2px 9px hsla(20, 100%, 15%, 0.5),

/* next */

0 9px 0 18px hsl(50, 100%, 50%)

0 11px 0 18px hsl(50, 100%, 25%),

0 12px 2px 18px hsla(50, 100%, 15%, 0.5),

/* next */

0 12px 0 30px hsl(70, 100%, 50%),

0 14px 0 30px hsl(70, 100%, 25%),

0 15px 2px 30px hsla(70, 100%, 15%, 0.5),

/* next */

0 15px 0 45px hsl(90, 100%, 50%),

0 17px 0 45px hsl(90, 100%, 25%),

0 17px 2px 45px hsla(90, 100%, 15%, 0.5);

Chocolate

The third sample I built while experimenting with alternating shadows. As usually lets start with a simple brown text:

color: hsl(20, 100%, 20%);

The first step is to implement a classic 3d-text effect:

text-shadow: -1px 1px 0 0 hsl(20, 100%, 16%),

-2px 2px 0 0 hsl(20, 100%, 16%),

-3px 3px 0 0 hsl(20, 100%, 16%),

-4px 4px 0 0 hsl(20, 100%, 16%),

-5px 5px 0 0 hsl(20, 100%, 16%),

-6px 6px 0 0 hsl(20, 100%, 16%);

Next I decided to dark my shadows by decreasing the lightness and to add some space between the shadows by increasing diagonal offset:

text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%),

-2px 2px 0 0 hsl(20, 100%, 14%),

-4px 4px 0 0 hsl(20, 100%, 12%),

-6px 6px 0 0 hsl(20, 100%, 10%),

-8px 8px 0 0 hsl(20, 100%, 8%),

-10px 10px 0 0 hsl(20, 100%, 6%);

The next step is to contract the shadows. By using contraction you can reduce the shadow to just some pieces of original symbols (it also depends on the font, font size and other attributes). As a result you will get a ragged shadow effect. Also note that as diagonal offsets and spread-distances differ for each of the shadows as a result we get a light twisting effect:

text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%),

-2px 2px 0 -1px hsl(20, 100%, 14%),

-4px 4px 0 -2px hsl(20, 100%, 12%),

-6px 6px 0 -3px hsl(20, 100%, 10%),

-8px 8px 0 -4px hsl(20, 100%, 8%),

-10px 10px 0 -5px hsl(20, 100%, 6%);

Let’s soft a little bit our shadows (also by using various blur-radius and color you can add some intermediate lines):

text-shadow: -0px 0px 1px 0 hsl(20, 100%, 16%),

-2px 2px 2px -1px hsl(20, 100%, 14%),

-4px 4px 2px -2px hsl(20, 100%, 12%),

-6px 6px 3px -3px hsl(20, 100%, 10%),

-8px 8px 2px -4px hsl(20, 100%, 8%),

-10px 10px 2px -5px hsl(20, 100%, 6%);

Finally after playing with this sample some more minutes I got the following result…
Final result

color: hsl(20, 100%, 20%);

text-shadow: 0 0 1px hsl(20, 100%, 18%),

-1px 1px 0 hsl(20, 100%, 16%),

-2px 2px 2px -1px hsl(20, 100%, 14%),

-4px 4px 2px -2px hsl(20, 100%, 12%),

-6px 6px 3px -3px hsl(20, 100%, 10%),

-8px 8px 2px -4px hsl(20, 100%, 9%),

-10px 10px 3px -5px hsl(20, 100%, 8%),

-12px 12px 2px -6px hsl(20, 100%, 7%),

-14px 14px 2px -7px hsl(20, 100%, 6%),

-15px 15px 2px -8px hsl(20, 100%, 5%),

-15px 15px 0 -8px hsla(20, 50%, 10%, 0.25);

Cream Cake

In the fourth sample we will build a cream-text effect for some cake. Just text:

color: hsl(35, 100%, 30%);

background: hsl(35, 60%, 80%);

Let’s start with blurring. I added two shadows: the first one (upper) is made with the same hue-value as the text, but with less saturation, and the second one (lower) is more blurred, more lighted and half-transparent and I also moved its hue-value to the red:

text-shadow: 0 0 2px 1px hsl(35, 70%, 30%),

0 0 4px 4px hsla(30, 100%, 55%, 0.5);

Now let’s add some cream-color substrate (the hue-value is moved to the yellow and the lightness is increased):

text-shadow: ...

-1px 1px 2px 7px hsl(45, 60%, 95%);

On the next step we should add some volume to the substrate: I added a new shadow with diagonal offset of the same color as text but less saturated. Note that this shadow is less expanded than the substrate (4px vs 7px):

text-shadow: ...

-3px 3px 1px 4px hsl(35, 70%, 30%);

And one last step: blurring substrate to soft the transition to the background:

text-shadow: ...

-3px 3px 4px 8px hsla(30, 90%, 55%, 0.5);

Final result

color: hsl(35, 100%, 30%);

background: hsl(35, 60%, 80%);

text-shadow: 0 0 2px 1px hsl(35, 70%, 30%),

/* transition to substrate */

0 0 4px 4px hsla(30, 100%, 55%, 0.5),

/* substrate */

-1px 1px 2px 7px hsl(45, 60%, 95%),

/* adding volume */

-3px 3px 1px 4px hsl(35, 70%, 30%),

/* transition to background */

-3px 3px 4px 8px hsla(30, 90%, 55%, 0.5);

Plastic

I was playing with the last one sample thinking what I can do on top of it… As in many other samples final results depends on both: the text itself (size, font and so on) and applied shadow effects. In my fifth sample I’m using the CabinSketch font. So here is what we have — it is just text without any special effects:

color: hsl(65, 60%, 20%);

background: hsl(65, 60%,95%);

First of all I added some blurring around the text (note that the shadow is lighter than the text and as a result the text looks brighter and more saturated):

text-shadow: 0 0 3px 2px hsl(65, 60%,75%);

Next let’s add some outlining with blurring effect (note that I’m using expansions and decreased lightness):

text-shadow: 0 0 3px 2px hsl(65, 60%,75%),

0 0 1px 9px hsl(65, 60%, 20%);

Yeah, it looks too dark — I will add and intermediate shadow to light up my text:

text-shadow: 0 0 3px 2px hsl(65, 60%,75%),

0 0 1px 5px hsl(65, 60%,95%),

0 0 1px 9px hsl(65, 60%, 20%);

Now the most interesting step — actually I don’t need the full outlining (substrate) but only some it’s pieces. To hide excess details I will draw few shadows on top of the substrate (note that these shadows are less in size, but have bigger diagonal offsets):

text-shadow: 0 0 3px 2px hsl(65, 60%,75%),

0 0 1px 5px hsl(65, 60%,95%),

6px 6px 4px 7px hsl(65, 60%,95%),

-4px -6px 4px 6px hsl(65, 60%,95%),

0 0 1px 9px hsl(65, 60%, 20%);

You may also try to add some softening details.
Final result

color: hsl(65, 60%, 20%);

background: hsl(65, 60%,95%);

text-shadow: 0 0 3px 2px hsl(65, 60%,75%),

/* light substrate */

0 0 1px 5px hsl(65, 60%,95%),

/* blurring */

0 0 4px 4px hsla(65, 100%, 30%, 0.4),

/* cutting substrate pieces */

6px 6px 4px 7px hsl(65, 60%,95%),

-4px -6px 4px 6px hsl(65, 60%,95%),

/* dark outlining */

0 0 1px 9px hsl(65, 60%, 20%);

Painting

The following two samples will open for you some technics on how to use the transparency. Think on it: how would you use the text-shadow to draw something inside the text? Actually you can’t use the text-shadow to draw inner shadows. All the shadows you apply to the text are composed into a stack and are drawn one on top of another, and the text is drawn on top of all of them. So you need to make the text to disappear somehow… and to make it happen you can just make the text transparent!

color: transparent;

background: hsl(0, 75%,45%);

Now the way is clear. Note that I’m going to draw with the white color (so the only thing that really matters is the 100% lightness). To draw something inside the text just decrease the size of shadow:

text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75);

Let’s add some more details by varying transparency, offset and size:

text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75),

-1px -1px 1px -4px hsla(0, 60%, 100%, 0.65),

1px 1px 1px -4px hsla(0, 60%, 100%, 0.65);

To strengthen the shape you can add an expanded and blurred shadow:

text-shadow: ...

0 0 1px 2px hsla(0, 60%, 100%, 0.65);

You may add extra details if you wish.
Final result

color: transparent;

background: hsl(0, 75%,45%);

text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75),

-1px -1px 1px -4px hsla(0, 60%, 100%, 0.65),

1px 1px 1px -4px hsla(0, 60%, 100%, 0.65),

/* background */

0 0 1px 2px hsla(0, 60%, 100%, 0.65),

/* additional details */

-3px -3px 1px 2px hsla(0, 60%, 100%, 0.25),

3px 3px 1px 2px hsla(0, 60%, 100%, 0.25);

Up & Down

And the final sample! I’m going to continue playing with transparency. I will start with white text (I just have selected it to make visible):

color: transparent;

First of all let’s add a classic 3d-text effect (you can play here with the transparency). Note the increased lightness-value in the middle shadow — I found it to be a nice way to emphasize the volume (try to increase the lightness to make it more visible):

text-shadow: 1px -1px hsla(0, 0%, 30%, .6),

2px -2px hsla(0, 0%, 30%, .7),

3px -3px hsla(0, 0%, 32%, .8),

4px -4px hsla(0, 0%, 30%, .9),

5px -5px hsla(0, 0%, 30%, 1.0);

Now to add more volume I will a shadow on top repeating the form of the original text:

text-shadow: 0px 0px hsla(0, 0%, 50%, .5),

1px -1px hsla(0, 0%, 30%, .6),

...

Finally similar to the bottom part I will add upper 3d-shadows but more transparent and with more lightness (to make this part more sharpen the most upper shadow is drawn with less transparency):

text-shadow: -4px 4px hsla(0, 0%, 70%, .4),

-3px 3px hsla(0, 0%, 60%, .2),

-2px 2px hsla(0, 0%, 70%, .2),

-1px 1px hsla(0, 0%, 70%, .2),

...

Final result

color: transparent;

text-shadow: -4px 4px hsla(0, 0%, 70%, .4),

-3px 3px hsla(0, 0%, 60%, .2),

-2px 2px hsla(0, 0%, 70%, .2),

-1px 1px hsla(0, 0%, 70%, .2),

0px 0px hsla(0, 0%, 50%, .5),

1px -1px hsla(0, 0%, 30%, .6),

2px -2px hsla(0, 0%, 30%, .7),

3px -3px hsla(0, 0%, 32%, .8),

4px -4px hsla(0, 0%, 30%, .9),

5px -5px hsla(0, 0%, 30%, 1.0);

== Gradienten ==
Beispiel: Gold Text
<syntaxhighlight lang="css">
h1, h2 {
color: #D5AD6D; /*if no support for background-clip*/
background:
-webkit-linear-gradient(transparent, transparent),
-webkit-linear-gradient(top, rgba(213,173,109,1) 0%,
rgba(213,173,109,1) 26%,
rgba(226,186,120,1) 35%,
rgba(163,126,67,1) 45%,
rgba(145,112,59,1) 61%,
rgba(213,173,109,1) 100%);
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</syntaxhighlight>
== Flash Text ==
http://codepen.io/moklick/pen/tAlJB
== Slash Text ==
http://codepen.io/robertmesserle/pen/Lebco/ (2016-12)

HTML (jade)
<syntaxhighlight lang="html5">
.slashed
.top(title='Slashed')
.bot(title='Slashed')
</syntaxhighlight>
CSS (stylus)
<syntaxhighlight lang="css">
@import "nib"

html, body {
height: 100%;
overflow: hidden;
}
body {
transform: rotate(-5deg);
background: radial-gradient(center, crimson, darken(crimson, 60%));
}
.slashed {
absolute: top 0 left 0 right 0 bottom 0;
text-shadow: 3px 3px 3px rgba(black, 0.5);
.top, .bot {
text-align: center;
font: 62px/100px arial;
text-transform: uppercase;
text-align: center;
overflow: hidden;
color: white;
&:before {
content: attr(title);
transform: rotate(5deg);
}
}
.top {
absolute: top 0 left 5px right 0 bottom 50%;
&:before {
absolute: bottom -50px left 0 right 0;
}
}
.bot {
absolute: top 50% left 0 right 5px bottom 0;
&:before {
absolute: top -50px left 0 right 0;
}
}
}
</syntaxhighlight>

2016-10-20T07:54:07Z

149.172.227.142: /* Photoshop - Radierer erstellen */

== Papier erzeugen ==

https://www.youtube.com/watch?v=jEw9sBZyj1o

* Solid Fill Layer erzeugen (z.b. leichtes grau) (verhindert versehentliches draufmalen und ist unendlich wenn man vergrößert)
* Hintergrundebene weg
* Papierebene erzeugen
* zwei leicht unterschiedliche Grau für Vorder und Hintergrundfarbe
* Filter -> Render
* Hue / Saturation für Papierfarbe (meistens gelblich).
* Levels (CTRL + L )
* Filter -> Noise erzeugt die finale Struktur

== Photoshop Zeichenstift Pinsel erstellen ==

* Ellipse Auswahl, diese Füllen
* Edit -> define Brush Preset
* In Brush Presets bearbeiten
** Größe verkleinern
* Opacity ca. 60% (Opacity ist ein absoluter Wert für die Deckung. Eine Strich wird damit nie dunkler oder mehr deckend auch wenn man mehrmals an einer Stelle malt.
* Flow ca. 11% (Flow erzeugt unterschiedliche Farbmengen wenn man in einem Strich mehrmals an eine Stelle kommt. Dadurch wirkt der Strich eher wie mit einem richtigen Stift gezeichnet).
* In Window -> Tool Presets kann man die Stift / Opacity / Flow Kombination speichern.

== Photoshop - Radierer erstellen ==
Beispiel: Weicher Radierer

* E (Eraser)
* Runder Pinsel
** Weiche Spitze (Hardness ganz runter)
** Flow ziemlich runter (ca.12%)

Photoshop - Papier Hintergrund erzeugen

2016-10-20T07:52:01Z

149.172.227.142: /* Photoshop Zeichenstift Pinsel erstellen */

Photoshop - Papier Hintergrund erzeugen

2016-10-20T07:48:15Z

149.172.227.142:

Photoshop - Papier Hintergrund erzeugen

2016-10-20T07:39:31Z

149.172.227.142: Die Seite wurde neu angelegt: „== Papier erzeugen == https://www.youtube.com/watch?v=jEw9sBZyj1o * Solid Fill Layer erzeugen (z.b. leichtes grau) (verhindert versehentliches draufmalen und…“

Photoshop

2016-10-20T07:29:19Z

149.172.227.142: /* Tutorials */

photoshop tipps und tricks

gradient maps

== Wichtige Shortcuts ==

=== Werkzeuge ===
B -> Brush / Pinsel
V -> Verschieben
M -> Marqee / Auswahl
C -> Crop / Beschneiden
G -> Gradient, Bucket / Verlauf, Farbeimer
A -> Select / Objekt-Auswahlpfeil

=== Tricks mit Malwerkzeugen ===
ctrl + alt + LM -> links und rechts ziehen um Größe der Werkzeugspitze verändern
Shift Taste + Malen etc -> Gerade Linien erzeugen

=== Schnellzugriff beim Arbeiten mit Werkzeugen ===
Alt + LM -> Auf Pipette zugreifen

=== Ansicht ===
Leertaste und LM -> Bild verschieben
'''F''' - Loopt durch verschiedene Ansichten eines Bildes ('''F'''ullscreen)
Space + RM -> Schnellauswahl von 100%, Fit To Screen und Prinz Size
Alt + Mausrad -> Zoom In/Out

== Tutorials ==
[[Photoshop / GIS - Höhenlinien entfernen]]

[[Photoshop - Papier Hintergrund erzeugen]]

TYPO3 - SEO

2016-10-10T13:01:30Z

149.172.227.142:

Siehe auch SEO

== Komfortables SEO mit metaseo ==
https://vimeo.com/183466979

== Basis Implementierung (manuell) ==
Empfohlen wird aber die Nutzung einer Extension wie z.B. metaseo (Stand 2016)
<pre>
page.meta {
KEYWORDS.field = keywords
KEYWORDS.ifEmpty = Selfstorage Center Reutlingen - mietlager4U
DESCRIPTION.field = description
DESCRIPTION.ifEmpty = Selfstorage Center Reutlingen - mietlager4U
#VIEWPORT = width=device-width; initial-scale=1.0
}
</pre>

Apache Mod Rewrite Syntax

2016-10-07T12:49:02Z

149.172.227.142: /* Pattern Block */

Quelle: http://www.webforgers.net/mod-rewrite/mod-rewrite-syntax.php (4/2013)

== Mod Rewrite syntax ==

The key to good mod rewritting is patterns. '''Patterns''' in your urls are how we are going to distinguish what to rewrite and what not to rewrite. We'll get to that later, first we'll need to go over the basics of the mod rewrite syntax.

== RewriteRules ==

Rewriterules are the heart and sole of the mod rewrite, here is where you declare the file to be rewritten, where it is to be rewritten and tack on any special commands.

Rewrite rules are broken down into 4 simple blocks. I'll refer to these blocks as the Call to action, Pattern, Rewrite and Command Flag.

Example:
RewriteRule ^dir/([0-9]+)/?$ /index.php?id=$1 [L]

'''Call to action:''' RewriteRule

'''Pattern:''' ^dir/([0-9]+) /?$

'''Rewrite:''' /index.php?id=$1

'''Command Flag:''' [L]

Between each of these blocks of the rewrite rule there should be a space. With that being said let's go ahead and break down each of these 4 blocks and discuss what they do.

== Call to action Block ==

The only way to screw this up is to spell RewriteRule incorrectly or leave out the space between this and the starting of the pattern block. If you do spell it incorrectly you'll trigger an error and the browser will out put a 500 error. Note if you ever see a 500 error on your site it mostlikely due to a bad line of code in your .htaccess file.

== Pattern Block ==

This one little piece of the mod rewrite is where the power is. In the pattern block of the rewrite rule we use regular expressions to detect the requested file name or uri and from this we can extract key parts to pass to the rewrite block.

Pay attention because this is the hardest part of mod rewrite.

Regular expressions is just a method to detect letters, numbers and symbols using special characters. These special characters are called metacharacters.

Pattern Matching metacharacter Definitions
<pre>
Char. Definition
\ Use before any of the following characters to escape or null the meaning or it. \* \. \$ \+ \[ \]
^ Start matching at this point
$ End point of the match
. Any character
[] Starts a class
| Starts alternative match this|that would mean match this or that
() starts a back reference point
? match 0 or 1 time Quantifier
+ match atleast 1 or more times Quantifier
* match 0 to infinite times Quantifier
{} match minimum to maximum Quantifier {0,3} match up to 3 times
Class Definitions []
</pre>
<pre>
Char. Definition
^ Negates the class. [^A-Z]+ means don't match any uppercases
\ Use before any of the following characters to escape or null the meaning or it. [\+]+
- Range for matching [0-9]+ [a-zA-Z]+
</pre>
I'll show a few quick samples just so you understand how to use all of the above. Then we're going to move right on to the Rewrite Block since we'll be going over all of this in our basic section.

In this example we just need the numbers in the ulrs below to pass through the mod rewrite to make our query. First we have to ask ourselves, "What is the common pattern in these urls"?

Example 1

In this example there are two common patterns that we can match against. The first one is they all start with category/. The second is they all end in .htm. This should be an easy match

category/1.htm
category/56.htm
category/092340923.htm
category/9334.htm

So to use regular expressions to match all of these urls below we need to set our starting point to ^category/.

Now we need to tell the rewrite rule to '''look for any number''' 1 or more times. We'll use a character class to do this [0-9]+. Since we need this number to complete our rewrite block we're going to tell the mod to '''reference this so we can use it later'''. We do this by surrounding the the
[0-9]+ with '''brachets''' like this
([0-9]+).

To finish the match we're going to negate the . (remember this means any 1 character) even though a . is considered 1 character we're going to go ahead and negate it to read as a dot and then finish the match with htm$.

Mouse over the characters for a definition:

RewriteRule ^category/([0-9]+)\.htm$ /category.php?cat_id=$1 [L]

Example 2

In this example we're going to pass a name through the rewrite. The name we want to use is the name of the first folder. So like before we need to find a pattern so we can match and extract the name of the first folder.

kitchen-ware/spoons.htm
bathware2/towels/duck-patterns.htm
dinnerware-pieces/

The only thing we have to work with that is common among all the examples is the trailing slash /. This is kind of tricky since you can type in the 3rd url with out the trailing slash and it would still show up in your browser. We'll get to the trailing slash in a bit though lets start with the collection of the words and numbers before the /.

There are a few ways to do this. We can do a wild card match which picks up everything (.+) or (.*). We can make a class that looks for all numbers, dashes, commas and numbers. ([-a-zA-Z0-9]+) or we can use a negated class which will look for anything but a / like this ([^/]+). We'll use the latter even though all of the above would do the job.

Note: The best to use is the negated class since .+ will pick up a / since a / is defined as any given character. The [-a-zA-Z0-9]+ would just take up too much computing power over the long run. Remember the more you define the more strain there is on the system. Since a search for every thing but a / ([^/]+) requires less computing power it's not only fast it most optimal.

Our final result to pick up everything before the first trailing slash then would look like this ^([^]+)

Next we'll need to account for the possible missing trailing slash. For this we have 2 options the first option is the min max {min,max} metacharacter. If we write /{0,1} this is telling the rewrite block to look for a / 0 to 1 times. That would match both dinnerware-pieces/ and dinnerware-pieces every time. But the easier way to do this is to use the ? metacharacter. ? just means match the preceding character 0 or 1 times and we don't have to type as much.

So up to this point our pattern block should look like this. ^([^]+)/?

Then we can tack on a $ to the end so we know to stop if the trailing slash is or isn't found. An we get our final rewrite rule below.

Mouse over the characters for a definition

RewriteRule ^([^/]+)/?$ /catalog.php?product_id=$1 [L]

A word of warning if you plan to use the folder names, especially the first folder as a variable that will be passed through the mod you better know that it's going to pass all real files as well through to be rewritten. images/, includes/ css/ img/ cgi-bin/ all of these common folders are perfect matches for ^([^]+)/?$ if this is your first time doing mod rewrite you may want to put your variables in file names instead of 1st tier folders. We go over how to by pass the rewritting of all our static folders in the advanced tutorials. For now just keep this in mind.

It all looks like nonsense, I know I've been here before scratching my head trying to figure it all out. Just memorize these 3 pattern matches because you'll use them the most ([0-9]+) , ([^/]+) , (.*) These translate to match any number, match any folder name, or match everything. Becareful with that one though! A RewriteRule ^(.*)$ will shoot a 500 error faster than lightning. Always use .* with another pattern that can be matched like RewriteRule ^(.*).htm$.

A few more things about the pattern block

You cannot use a RewriteRule to match a query string from a dynamic url. RewriteRule is for request_uri matching. A requested uri is in bold below

www.somesite.com/some/folder/index.php?id=23&name=foo

You can however get variables from a RewriteCond but we cover how to use RewriteCond together with RewriteRule in the medium tutorials.

Ok that's enough for now. For more information on regular expressions check the on page resources on the right for links to more tutorials.

== Rewrite Block ==

This part is a piece of cake. Now that we've used the pattern block to reference our matches ([0-9]+) we need to rewrite to the url and add the references as needed.

Remember a reference is anything that was picked up in the () in the rewrite.

To call a reference you just add a $ follow by the reference number. This all goes in order like so. Below we'll make 3 references.

RewriteRule ^dir/(.*)/(.*)\.(.htm|.html)$ /$1/$2.$3 [R=301,L]

Rewrites using a 301 redirect
dir/some/folder/file.htm to /some/folder/file.htm

You can mix up the references if you want like so:

RewriteRule ^dir/(.*)/(.*)\.(.htm|.html)$ /$2/$1.$3 [R=301,L]

you can also not call a reference like so:

RewriteRule ^dir/(.*)/(.*)\.(.htm|.html)$ /$2/$1.php [R=301,L]

So lets recap a bit. The rewrite block serves 2 purposes. 1 to finalize the total mod rewrite by declare where to rewrite or to redirect. and 2. it allows us to call the backreferences we collect from the Pattern Block.

Note: We can use the RewriteBase to set a base directory that we want to rewrite to so you don't always have to write it in your rules.

Example:
RewriteBase /dir/

RewriteRule ^somefile-([0-9]+)\.htm$ index.php?id=$1 [L]

is the same as

RewriteRule ^somefile-([0-9]+)\.htm$ /dir/index.php?id=$1 [L]

So if you are doing all your rewites to the same directory save some time and declare you RewriteBase before all your rules. You can even declare / as your base.

== Command Flag Block (Optional) ==

Ok I didn't tell you this is optional because half of you would skip this part. Learning the different Command Flags is a must.

The command flag definitions are as follows:
<pre>
Char. Definition
[R] Redirect you can add an =301 or =302 to change the type.
[F] Forces the url to be forbidden. 403 header
[G] Forces the url to be gone 401 header
[L] Last rule. (You should use this on all your rules that don't link together)
[N] Next round. Rerun the rules again from the start
[C] Chains a rewrite rule together with the next rule.
[T] use T=MIME-type to force the file to be a mime type
[NS] Use if no sub request is requested
[NC] Makes the rule case INsensitive
[QSA] Query String Append use to add to an existing query string
[NE] Turns of normal escapes that are default in the rewriterule
[PT] Pass through to the handler (together with mod alias)
[S] Skip the next rule S=3 skips the next 3 rules
[E] E=var sets an enviromental variable that can be called by other rules
</pre>

See full definitions here.

Ok next is into the tutorials. If you are confused about any of the above don't be scared to move along. We will recap everything so we don't get confused. I know for myself I had to see it work and see the code before I could grasp the full mod rewite experience.

On to the basics