Verschillende CSS-codes voor Invision

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial Verschillende CSS-codes voor Invision

Bericht van TonnyKamper op vr 29 jun 2018 - 18:13

Verschillende CSS-codes voor versie Invision

Deze codes plaats je in je Cascading Style Sheet (CSS), ga naar:

Beheerderspaneel Display Plaatjes en Kleuren - Kleuren - CSS tab

Deze tutorial bestaat uit de volgende, over meerdere vervolgposts verdeelde onderdelen:

| 1. De chatbox | 2. De berichten | 3. Het Profiel | 4. De privéberichten | 5. De FAQ | 6. De ledenlijst | 7. Functie "Zoeken" | 8. Polls | 9. Smileys | 10. Een bericht schrijven | 11. Navigatiebalk | 12. Banner, widgets en portaal | 13. Diversen |

Vervolgposts vindt je in de reacties onder dit bericht!

1. De Chatbox


Hiermee kunt u de achtergrondkleuren van berichten in de chatbox wijzigen:


- Achtergrondkleur van oneven regels (regels 1, 3, 5, 7 enz.)
Code:
.chatbox_row_1 {
background-color: #ecf3f7;
}
- Achtergrondkleur van even lijnen (regels 2, 4, 6, 8 enz.)
Code:
.chatbox_row_2 {
background-color: #e1ebf2;
}

Wijzig de kleur van de lijst met leden die zijn verbonden met de chatbox:


Code:
.memberlist_row_1 {
background-color: #ecf3f7;
}

Verander de kleur van de Chatbox-titel:


Code:
.chatbox-title,.chatbox-title a.chat-title {
color: #ffffff !important;
}

Pas de uitlijning van de titel van de chatbox aan:


Code:
.chatbox-title {
float: left;
margin: 0;
padding: 6px 5px 0 5px;
width: 15em;
}

Wijzig de berichtgrootte van het bericht in de ChatBox:


Code:
.chatbox {
font-size: 15px;
}

2. De berichten


De achtergrondkleur van berichten wijzigen:


Code:
.post-container {
background-color: #EE0030;
}

Wijzig de schrijfkleur van de berichten, evenals die van de berichtprofielen:


Code:
.post-container {
color: #EE0030;
}

De achtergrondkleur van een bericht wijzigen:


Code:
.postbody {
background-color: #EE0030;
}

Wijzig de achtergrondkleur van profielen in berichten:


Code:
.post {
background-color: #EE0030;
}

Het uiterlijk van de scheiding tussen twee berichten in een onderwerp wijzigen:


Code:
.post {
border-bottom: 10px solid #EE0030;
}

Wijzig de kleur van het vervolgkeuzemenu met de bijnaam van de poster:


Code:
.popmenubutton-new-out a {
background-color: #EE0030;
}

Wijzig de achtergrondkleur van het vervolgkeuzemenu (eenmaal geopend):


Code:
.popupmenu li {
background-color: #F73100;
}

Wijzig de omtrek van het vervolgkeuzemenu (eenmaal geopend):


Code:
.popupmenu {
background-color: #FFFFFF;
}

Pas de achtergrondkleur van de balk met de links: «Zie het vorige onderwerp - Zie het volgende onderwerp» aan:


Code:
.topic-footer {
background-color: #EE0030;
}

Wijzig de achtergrondkleur van de balk met de moderatieknoppen en de machtigingen:


Code:
.bar {
background-color: #EE0030;
}

Wijzig de kleur van de tekst in de balk met moderatieknoppen en machtigingen:


Code:
.bar {
color: #EE0030;
}



Laatst aangepast door TonnyKamper op vr 29 jun 2018 - 20:51; in totaal 7 keer bewerkt
avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Tutorial Re: Verschillende CSS-codes voor Invision

Bericht van TonnyKamper op vr 29 jun 2018 - 18:38

Verschillende CSS-codes voor versie Invision

Deze codes plaats je in je Cascading Style Sheet (CSS), ga naar:

Beheerderspaneel Display Plaatjes en Kleuren - Kleuren - CSS tab

Deze tutorial bestaat uit de volgende, over meerdere vervolgposts verdeelde onderdelen:

| 1. De chatbox | 2. De berichten | 3. Het Profiel | 4. De privéberichten | 5. De FAQ | 6. De ledenlijst | 7. Functie "Zoeken" | 8. Polls | 9. Smileys | 10. Een bericht schrijven | 11. Navigatiebalk | 12. Banner, widgets en portaal | 13. Diversen |

Vervolgposts vindt je in de reacties onder dit bericht!

3. Het profiel


Verander de achtergrondkleur van het profiel:


Code:
.box-content.profile {
background-color: #EE0030;
}

Wijzig de kleur van de balk met de bijnaam van de auteur van een bezoekersbericht:


Code:
#profile-advanced-details .message-header {
background: #EE0030;}

Bepaal de positie van het pseudoniem van de auteur, datum en tijd, in dezelfde balk:


Code:
#profile-advanced-details .message-date {
float: left;
}

Bepaal de positie van de koppelingen 'Verbergen' en 'Verwijderen' in een bezoekersbericht:


Code:
#profile-advanced-details .message-footer {
text-align: left;
}

Bepaal de grootte van de 2e kolom van het geavanceerde profiel (avatar, rang, vrienden):


Code:
#profile-advanced-right {
width: 120px;
}

Uiterlijk wijzigen van de titels van het tabblad Statistieken, van het geavanceerde profiel (Onderwerpen, berichten, informatie):


Code:
#profile-advanced-details .stats-field legend {
font-weight: bold; color: #EE0030;
}

Wijzig weergave van de tekst, met name in de tab Statistieken:


Code:
#profile-advanced-details .stats-field ul {
text-indent: 10px;
padding: 0;
color: #EE0030;
}

Hetzelfde als het vorige, zonder inspringen:


Code:
#profile-advanced-details .stats-field li {
color: #EE0030;
}



Laatst aangepast door TonnyKamper op vr 29 jun 2018 - 20:51; in totaal 6 keer bewerkt
avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Tutorial Re: Verschillende CSS-codes voor Invision

Bericht van TonnyKamper op vr 29 jun 2018 - 19:08

Verschillende CSS-codes voor versie Invision

Deze codes plaats je in je Cascading Style Sheet (CSS), ga naar:

Beheerderspaneel Display Plaatjes en Kleuren - Kleuren - CSS tab

Deze tutorial bestaat uit de volgende, over meerdere vervolgposts verdeelde onderdelen:

| 1. De chatbox | 2. De berichten | 3. Het Profiel | 4. De privéberichten | 5. De FAQ | 6. De ledenlijst | 7. Functie "Zoeken" | 8. Polls | 9. Smileys | 10. Een bericht schrijven | 11. Navigatiebalk | 12. Banner, widgets en portaal | 13. Diversen |

Vervolgposts vindt je in de reacties onder dit bericht!

4. De privéberichten


De kleur van het geopende tabblad wijzigen (Inbox, Verzonden berichten, etc.)


Code:
ul.privmsg li {
background-color: #EE0030;
color: #fff;
}

Daarentegen wijzigt deze code de kleur van de andere tabbladen, ongeopend:


Code:
ul.privmsg li a {
background-color: #EE0030;
}

5. De FAQ


Bewerk het frame met het antwoord op een vraag:


Code:
dl.faq dd p {
border: 1px solid #EE0030;
}

Verander de balk tussen twee vragen:


Code:
dl.faq .question {
border-bottom: 1px solid #EE0030;
}

6. De ledenlijst


Wijzig het kader rond de presentatie van een profiel:


Code:
.member {
background-color: #fff;
border: 1px solid #EE0030;
}

Wijzig de achtergrond en de rand van de avatar in de ledenlijst:


Code:
.member-list .popmenubutton .mini-avatar {
border: 1px solid #EE0030;
background-color: #EE0030;
}

Wijzig de tekstkleur in de profielbijlage (laatste bezoeken, berichten, diverse opties van het profiel):


Code:
.member p {
color: #EE0030;
}

Wijzig de achtergrond van de lidcategorie:


Pas op niet de onderkant van een profielkader, maar degene achter!
Code:
div.borderwrap .member-list {
background-color: #EE0030;
}

7. De Functie "Zoeken"


De zoek pop-up + geavanceerd zoeken + "Zoeken" widget.

De achtergrondkleur wijzigen:


Code:
#search_menu {
background-color: #EE0030;
border: 1px solid #ffffff;
}

Wijzig de kleur van de zoekrand:


Code:
#search_menu input.post {
border: 1px solid #EE0030;
}

Pas de widget "Zoeken" en de pagina "Geavanceerd zoeken" aan:


Code:
.advanced-search .search-footer {
background-color: #EE0030;
border-top: 1px solid #ffffff;
}


Laatst aangepast door TonnyKamper op vr 29 jun 2018 - 20:50; in totaal 5 keer bewerkt
avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Tutorial Re: Verschillende CSS-codes voor Invision

Bericht van TonnyKamper op vr 29 jun 2018 - 19:28

Verschillende CSS-codes voor versie Invision

Deze codes plaats je in je Cascading Style Sheet (CSS), ga naar:

Beheerderspaneel Display Plaatjes en Kleuren - Kleuren - CSS tab

Deze tutorial bestaat uit de volgende, over meerdere vervolgposts verdeelde onderdelen:

| 1. De chatbox | 2. De berichten | 3. Het Profiel | 4. De privéberichten | 5. De FAQ | 6. De ledenlijst | 7. Functie "Zoeken" | 8. Polls | 9. Smileys | 10. Een bericht schrijven | 11. Navigatiebalk | 12. Banner, widgets en portaal | 13. Diversen |

Vervolgposts vindt je in de reacties onder dit bericht!

8. De privéberichten


Verander de onderkant van de poll (enquette), eenmaal gestemd:


Code:
.polls {
background-color: #EE0030;
}

Verander de kleur van de poll-opties:


Code:
.polls dl {
color: #EE0030;
}

9. Smileys


Wijzig de rand van het frame met de smileys bij het schrijven van een bericht:


Code:
.smiley-container {
border: 1px solid;
color: #EE0030;
}

Wijzig de achtergrondkleur van het vervolgkeuzemenu 'Meer smileys':


Code:
.smiley-selector {
background-color: #EE0030;
}

Wijzig de kleur van de omtrek van de box (waar HTML actief is, BBcode geactiveerd, enz.):


Code:
#smiley-box {
background-color: #EE0030;
border: 1px solid #;
}

10. Een bericht schrijven


Wijzig de kleur van de omtrek van het tekstvak (frame met de opmaakknoppen):


Code:
.messaging-box {
background-color: #EE0030;
border: 1px solid #;
}

Wijzig de rand van het tekstvak:


(Dus zie bij uitbreiding de onderkant van het tekstvak de opmaak van de tekst bij het schrijven van een reactie)
Code:
.messaging-box textarea {
border: 2px inset #105289;
}



Laatst aangepast door TonnyKamper op vr 29 jun 2018 - 20:50; in totaal 4 keer bewerkt
avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Tutorial Re: Verschillende CSS-codes voor Invision

Bericht van TonnyKamper op vr 29 jun 2018 - 19:44

Verschillende CSS-codes voor versie Invision

Deze codes plaats je in je Cascading Style Sheet (CSS), ga naar:

Beheerderspaneel Display Plaatjes en Kleuren - Kleuren - CSS tab

Deze tutorial bestaat uit de volgende, over meerdere vervolgposts verdeelde onderdelen:

| 1. De chatbox | 2. De berichten | 3. Het Profiel | 4. De privéberichten | 5. De FAQ | 6. De ledenlijst | 7. Functie "Zoeken" | 8. Polls | 9. Smileys | 10. Een bericht schrijven | 11. Navigatiebalk | 12. Banner, widgets en portaal | 13. Diversen |

Vervolgposts vindt je in de reacties onder dit bericht!

11. De Navigatiebalk


Tekstkleur, door extensie-indeling ervan:


Code:
#submenu ul li a {
color: #EE0030;
}

Wijzigt de achtergrond bij het zweven boven een item in de navigatiebalk:


Code:
#submenu ul li a:hover {
background-color: #EE0030;
}

Wijzig de balk onder de navigatiebalk:


(Bevat "Verbonden onder { USERNAME }, etc.)
Code:
#userlinks {
background-color: #EE0030;
border-bottom: 1px solid #cadceb;
}

Hetzelfde voor de gasten:


Code:
#userlinks.not-connected {
background-color: #EE0030;
border-bottom: 1px solid #cadceb;
}

Wijzig de kleur van de kop in het paginaoverzicht:


Code:
#navstrip {
color: #EE0030;
}

Wijzig de achtergrondkleur van de navigatiebalk:


Code:
#submenu {
background-color: #EE0030;
}
Uiteraard moet je zelf de kleurcodes van je keuze erin zetten.


Laatst aangepast door TonnyKamper op vr 29 jun 2018 - 20:49; in totaal 3 keer bewerkt
avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Tutorial Re: Verschillende CSS-codes voor Invision

Bericht van TonnyKamper op vr 29 jun 2018 - 20:12

Verschillende CSS-codes voor versie Invision

Deze codes plaats je in je Cascading Style Sheet (CSS), ga naar:

Beheerderspaneel Display Plaatjes en Kleuren - Kleuren - CSS tab

Deze tutorial bestaat uit de volgende, over meerdere vervolgposts verdeelde onderdelen:

| 1. De chatbox | 2. De berichten | 3. Het Profiel | 4. De privéberichten | 5. De FAQ | 6. De ledenlijst | 7. Functie "Zoeken" | 8. Polls | 9. Smileys | 10. Een bericht schrijven | 11. Navigatiebalk | 12. Banner, widgets en portaal | 13. Diversen |

Vervolgposts vindt je in de reacties onder dit bericht!

12. De Banner, de widgets en het portaal


12.a: De banner:

Verander de achtergrondkleur achter de banner:


Code:
div#logostrip {
background-color: #EE0030;
}
12.b: De Widgets en het Portaal:

Wijzig de insertieruimte voor de titel van een widget:


Code:
.module .maintitle {
padding: 100px;
}

Wijzig het schrijven van de titel van widgets (dus opmaak):


Code:
.module .maintitle h3 {
float: none;
font-size: 1em;
color: #EE0030;
}

Wijzig kleur widget tekst (niet de links):


Code:
.module .box-content {
color: #EE0030;
}

Wijzig het lettertype van de centrale modules van het portaal:


Code:
.module .postbody {
padding: 0;
color: #EE0030;
}

Wijzig de opmaak van footers van widgets (bijvoorbeeld "Comments: 0"):


Code:
.module .postbody .post-footer {
color: #EE0030;
}

Verschillende ID's die nog niet getest zijn:


Voor de beste posterwidget:
Code:
.module table.mod-top-posters
Voor de statistieken / poll-module:
Code:
.module .box-content.poll
.module .box-content.poll dl
.module .box-content.poll dt
.module .box-content.poll dd
.module .box-content.poll dd.pstats
Voor de sociale contactenwidget (facebook en handige links):
Code:
.module .social-bookmark



Laatst aangepast door TonnyKamper op vr 29 jun 2018 - 20:48; in totaal 2 keer bewerkt
avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Tutorial Re: Verschillende CSS-codes voor Invision

Bericht van TonnyKamper op vr 29 jun 2018 - 20:41

Verschillende CSS-codes voor versie Invision

Deze codes plaats je in je Cascading Style Sheet (CSS), ga naar:

Beheerderspaneel Display Plaatjes en Kleuren - Kleuren - CSS tab

Deze tutorial bestaat uit de volgende, over meerdere vervolgposts verdeelde onderdelen:

| 1. De chatbox | 2. De berichten | 3. Het Profiel | 4. De privéberichten | 5. De FAQ | 6. De ledenlijst | 7. Functie "Zoeken" | 8. Polls | 9. Smileys | 10. Een bericht schrijven | 11. Navigatiebalk | 12. Banner, widgets en portaal | 13. Diversen |

13. Diversen


Verander de opmaak van "verjaardag", "chatbox" en "statistieken":


Code:
.formsubtitle {
padding: 5px;
color: #EE0030;
}

Wijzig de titelopmaak van de forumbeschrijving (onder of naast de banner)


Code:
div#logostrip {
min-height: 70px;
color: #EE0030;
}

Wijzig de opmaak van de beschrijving onder de banner:


Code:
#site-desc {
margin: 8px;
color: #EE0030;
}

Wijzig de opmaak van de forumtitel (naast of onder de banner):


Code:
div#logostrip #main-title h1 {
padding-top: 0;
color: #EE0030;
}

Uitbreiding van het e-mailinvoervak voor het formulier:


Code:
textarea {
width:650px;
}
Dit waren ze, ga je gang en wees creatief  Smile
avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum