# Made by Dude -badge
Sivujen tekijästä ilmoittaa **Made by Dude** -badge, joka lisätään asiakkaan suostumuksesta sivuston Footer-osioon.
### Ulkonäkö
Badge räätälöidään sopimaan sivuston ilmeeseen niin, että se ei ole häiritsevästi etualalla. Alla joitakin voimassa olevia Made by Dude -badgeja.
### Lisäysohje
Tämä sivu sisältää badgen käyttöönottoon vaadittavat universaalit snippetit, joita ei ole sisällytetty [starter-teemaamme](https://github.com/digitoimistodude/air-light) mukaan.
{% hint style="info" %}
Tämä sivu ja koodiesimerkit pyritään pitämään aina mahdollisimman ajan tasalla. Muista koodisnipeteistä poiketen tämä osa on suomeksi ja julkinen, koska pyrimme näin pitämään tiedon helposti saatavilla samassa paikassa ilman tarpeetonta hyppimistä.
{% endhint %}
**Huom!** Muista lisätä `'www.dude.fi',` tiedoston scripts-styles.php \`wp\_localize\_script\` sisään, jotta tooltip toimii oikein.
#### **Lisää ennen footer.php-tiedoston containerin lopetustagia:**
```html
```
#### **Uusi tiedosto: sass/layout/\_dude-badge.scss:**
```scss
// stylelint-disable declaration-no-important, a11y/font-size-is-readable
// Badge variables
:root {
--color-badge-logo-dark: #03061b;
--color-badge-logo-light: var(--color-white);
--color-badge-tooltip-text-dark: var(--color-white);
--color-badge-tooltip-text-light: #03061b;
--color-badge-tooltip-background-light: rgb(255 255 255 / .8);
--color-badge-tooltip-background-dark: rgb(17 17 17 / .9);
// Light or dark?
--color-badge-logo: var(--color-badge-logo-dark);
--color-badge-tooltip-text: var(--color-badge-tooltip-text-dark);
--color-badge-tooltip-background: var(--color-badge-tooltip-background-dark);
}
.site-footer .container {
position: relative;
}
.site-footer .dude-badge {
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
// Adjust based on the site
text-align: center;
a:hover .heart,
a:focus .heart {
fill: var(--color-badge-logo);
}
.fill {
fill: var(--color-badge-logo);
}
.stroke {
stroke: var(--color-badge-logo);
}
}
.site-footer {
[data-tooltip] {
cursor: pointer;
position: relative;
transform: translate(-48%, 18px);
transform-origin: top;
transition: transform 200ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
}
[data-tooltip]::after {
background-color: var(--color-badge-tooltip-background);
border-radius: 4px;
bottom: 100%;
color: var(--color-badge-tooltip-text);
content: attr(data-tooltip);
font-family: sans-serif !important;
font-size: 12px !important;
font-style: normal !important;
font-weight: 400 !important;
left: 50%;
margin-bottom: 11px;
opacity: 0;
padding: 5px;
pointer-events: none;
position: absolute;
text-align: center;
text-shadow: none !important;
transform: translate(-48%, 10px);
transform-origin: top;
transition: transform 200ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
width: 100px;
z-index: 10;
}
[data-tooltip] .tip {
bottom: 100%;
content: "";
height: 6px;
left: 50%;
margin-bottom: 10px;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translate(-37%, 15px);
transform-origin: top;
transition: transform 155ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
width: 18px;
z-index: 10;
.tip-color {
fill: var(--color-badge-tooltip-background);
}
}
[data-tooltip]:hover .tip,
[data-tooltip]:hover::after,
[data-tooltip]:focus .tip,
[data-tooltip]:focus::after,
[data-tooltip][data-tooltip-visible] .tip,
[data-tooltip][data-tooltip-visible]::after {
opacity: 1;
pointer-events: auto;
}
[data-tooltip]:hover::after,
[data-tooltip][data-tooltip-visible]::after {
transform: translate(-48%, -5px);
}
[data-tooltip]:hover .tip,
[data-tooltip][data-tooltip-visible] .tip {
transform: translate(-37%, 0);
}
}
```
**global.scss:**
```scss
@import 'layout/dude-badge';
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://handbook.dude.fi/wordpress-kehitys/made-by-dude-badge.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.