Versie?

Hallo,
Ik vroeg me af hoe je zo een transparante lay maakt zoals hier? Als je over de tekst gaat, wordt deze ook zo groter en verkleurt, is dit een speciale versie of...? *Forumlink verwijderd door Nathy*

Nibsy schreef:Als je over de tekst gaat, wordt deze ook zo groter en verkleurt, is dit een speciale versie of...?

Even een tekstje gezocht uit een ander onderwerp maar dat ook wel een antwoord is op dit. Dat van die transparante lay begrijp ik niet, waar zie jij die?

---

Je moet hiervoor de hover selector gebruiken, voorbeeldje:

ga over mij

Code:

<a href="#" class="test-button">ga over mij</a>

---- de css ---

.test-button{
padding: 3px;
font-size: 11pt;
color: black !important;
}
.test-button:hover{
font-size: 12pt;
color: red;
font-weight: 800;
}

In mijn voorbeeld heb ik het dus met een link gedaan (a-element) ik heb hem de class 'test-button' meegegeven, hierdoor kan ik hem dmv de css gaan opmaken. Eerst roep ik mijn element aan door zijn naam te roepen, dit doe ik doordat ik zijn naam in een class zette door er een . voor te zetten, daarna zet ik een open accolade { en geef ik de codes voor de opmaak.

Wanneer je de opmaak wilt laten veranderen roep je de naam zoals je anders doet maar zet je er :hover achter, dit betekent dat het een andere opmaak moet hebben wanneer je er met je muis over gaat. Weer open je een accolade en kies je de opmaak die dan van toepassing moet zijn.

Naast de hover zijn er ook nog een paar andere selectors die actief zijn wanneer je bv klikt(:active), of wanneer je het al eens aangeklikt hebt(:visited).

Dit is geen speciale versie,
Dit is een stukje code in de CSS.

Via Photoshop/Gimp kun je er voor zorgen dat de doorzichtigheid (opacity) van je plaatje bijvoorbeeld 50% is, die sla je dan op, upload je en plaats je in deze code. Die code plaats je in Cascading Style Sheet.

Beheerderspaneel Display Kleuren CSS

Code:

.bodyline {
background-color: transparent;
background-image: url("JOUW IMAGE");
}

Edit:
Ik zal je de code van die tekst nog even geven.

De code van de tekst laat verkleuren en groter maken is dit.
Deze code voer je ook in hetzelfde stukje als de andere code.

Beheerderspaneel Display Kleuren CSS

Code:

a.forumlink {
  text-transform: lowercase;
  font-family: Georgia;
  text-shadow: 1px 1px 0px white;
  color: #A86034;
  font-size: 25px;
  margin-top: -20px;
  font-style: italic;
  text-align: right;
  letter-spacing: -3px;
  margin-left: 20px
  text-shadow: #4a4a4a 0px 0px 10px;
}

a.forumlink:hover {
  text-transform: lowercase;
  font-family: Georgia;
  text-shadow: 1px 1px 0px white;
  color: #00b0fa;
  font-size: 30px;
  margin-top: -20px;
  font-style: italic;
  text-align: right;
  letter-spacing: -3px;
  margin-left: 20px
  text-shadow: #4a4a4a 0px 0px 10px;
}

Oke bedankt, het werkt :3 En die link was alleen maar om aan te tonen hoor.

Ik heb nog één vraagje: Hoe zorg je ervoor dat het forum main logo in de breedte dezelfde lengte heeft als de breedte van het forum? Zo als Serigala of Warrior Cats?

Voer deze code in bij je css:

Code:

#i_logo{
margin-left: -10px;
margin-right: -10px;
}

Het kan zijn dat je -10 moet aanpassen zodat het ook op jouw forum werkt.

Bij het voorbeeld in het beheerderspaneel doet de code het wel maar als ik dan naar mijn forum ga, zie ik dit niet.

De mainlogo kun je gewoon zelf zo groot instellen als je wilt.
Je maakt bijvoorbeeld een banner van 900px, en je stelt in bij configuratie van het forum in dat het forum 850px is, dan past het forum zich aan op de banner die je gebruikt voor je forum.
Tenminste dit doet hij bij mij automatisch.

Ik zal het proberen wat beter uit te leggen c': Stel dat wit is het mainlogo plaatje en het grijze is het forum

Ik zou graag die afbeelding zo hebben:

Als ik het forum kleiner maak, dan verkleint deze het plaatje vanzelf dus ik wee niet hoe ik dat kan oplossen.

Je kan proberen het met .forumline of .bodyline op te lossen.
Ik weet ook niet hoe ik het anders doe, maar dit kan het ook wel eens zijn.

Code:

.bodyline{
margin-left: 0px;
margin-right: 0px;
}

Code:

.forumline{
border-bottom: 0px #FFFFFF solid;
border-top: 0px #FFFFFF solid;
border-right: 0px #FFFFFF solid;
border-left: 0px #FFFFFF solid;}

Dit werkt nog steeds niet als ik dit ingeef bij css.

Eh...?

Begin eens met een grotere afbeelding te maken. Want volgens mij zit daar je eerste probleem al. Of te wel vergroot je jouw afbeelding dmv van css maar dan gaat de kwaliteit naar achteren.

Code:

.bodyline{
padding: 0px;
}
#i_logo{
width: 100%;
}

Als je jouw forum op 800px zet bij configuratie van het algemen op het beheerderspaneel en dan je afbeelding ook op 800px zet en dat met die forumline en bodyline doet, dan moet ie wel uitkomen.
Zo krijg ik de mijne namelijk altijd goed.

Ik heb de code van bodyline gebruikt en dan de formaten aangepast en het werkt. Bedankt!~