Nederlands Ondersteuningsforum :
Wilt u reageren op dit bericht? Maak met een paar klikken een account aan of log in om door te gaan.

Pas de toolbar volledig aan via CSS

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial Pas de toolbar volledig aan via CSS

Bericht van TonnyKamper op zo 1 jul 2018 - 17:59

Pas de toolbar volledig aan via CSS

De volgende tutorial zal je helpen de verschillende CSS-selectors te leren kennen die op de werkbalk van je ActieForum forum worden gebruikt. Hiermee kun je het uiterlijk van je werkbalk personaliseren, zodat het past bij de rest van het forum.

Alle codes komen in:
Beheerderspaneel Display Plaatjes en Kleuren Kleuren CSS stylesheet tab

1. Toolbar selectors


#fa_toolbarGehele toolbar
#fa_search / #fa_textareaPas de toolbar volledig aan via CSS Toolba10
#fa_magnifierPas de toolbar volledig aan via CSS Captur43
#fa_sharePas de toolbar volledig aan via CSS Toolba11
#fa_share_textPas de toolbar volledig aan via CSS Toolba12
#fa_fbPas de toolbar volledig aan via CSS Captur22
#fa_twitterPas de toolbar volledig aan via CSS Captur23
#fa_gpPas de toolbar volledig aan via CSS Captur24
#fa_mailPas de toolbar volledig aan via CSS Captur25
#fa_rssPas de toolbar volledig aan via CSS Captur26
#fa_rightPas de toolbar volledig aan via CSS Toolba13
#fa_welcomePas de toolbar volledig aan via CSS Toolba14
#fa_notificationsPas de toolbar volledig aan via CSS Toolba15
#notif_unreadPas de toolbar volledig aan via CSS Captur29
#fa_hidePas de toolbar volledig aan via CSS Captur31
#fa_showPas de toolbar volledig aan via CSS Captur32
#fa_menulistPas de toolbar volledig aan via CSS Toolba17
#fa_usermenuPas de toolbar volledig aan via CSS Toolba18
#fa_ranktitlePas de toolbar volledig aan via CSS Toolba19
#notif_listPas de toolbar volledig aan via CSS Captur34
li.see_allPas de toolbar volledig aan via CSS Captur35
li.unreadPas de toolbar volledig aan via CSS Captur36
#notif_list li .contentTextPas de toolbar volledig aan via CSS Captur39
#notif_list li a.deletePas de toolbar volledig aan via CSS Captur40
div.fa_notificationPas de toolbar volledig aan via CSS Captur37
div.fa_notification .contentPas de toolbar volledig aan via CSS Captur38

2. Verwijdering van elementen:


Verwijder de zoekbar:
Code:
#fa_search { display:none !important }
Verwijder de Deel knoppen:
Code:
#fa_share { display:none !important }
Verwijder de link "Welkom Gast":
Code:
#fa_welcome { display:none !important }
Verwijder de knop "Verberg Toolbar":
Code:
#fa_hide { display:none !important }

3. Items bewerken


Bewerk de knop "Facebook":
Code:
#fa_fb {
background:url('adres_van_jouw_afbeelding')no-repeat!important;
}
Bewerk de knop "Twitter":
Code:
#fa_twitter {
background:url('adres_van_jouw_afbeelding')no-repeat!important;
}
Bewerk de knop "Google +":
Code:
a#fa_gp {
background:url('adres_van_jouw_afbeelding')no-repeat!important;
}
Bewerk de knop "Mail":
Code:
a#fa_mail {
background:url('adres_van_jouw_afbeelding')no-repeat!important;
}
Bewerk de knop "RSS":
Code:
a#fa_rss {
background:url('adres_van_jouw_afbeelding')no-repeat!important;
}

  • Waarbij adres_van_jouw_afbeelding moet worden vervangen door de URL van de gewenste afbeelding.

4. Zelfbediening toolbars


Kopieer / plak een van de volgende codes om de werkbalk van uw keuze op uw forum te installeren:

Beheerderspaneel Display Plaatjes en Kleuren Kleuren CSS-stylesheet tab

De kleuren zijn willekeurig gekozen en kunnen eenvoudig worden gewijzigd!


Zelfbediening 1:
Pas de toolbar volledig aan via CSS Captur44
Code:
div#fa_toolbar {
  background-color: #24384c;  /* Background color */
  border-radius: 0 0 50px 50px;  /* Rounds borders of the toolbar */
  box-shadow: 0 0 5px #000000;  /* Displays a shadow */
  margin: auto;  /* Center the toolbar */
  width: 98%;  /* Width of the toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
  margin: 0 15px;  /* Reposition the toolbar contents */
}
Zelfbediening 2:
Pas de toolbar volledig aan via CSS Captur45
Code:
div#fa_toolbar {
    background-color: #657488;  /* Background color */
    border: 2px solid white;  /* Add a white border */
    border-radius: 50px;  /* Rounds borders of the toolbar */
    margin: auto;  /* Center the toolbar */
    top: 10px;  /* Space above the toolbar */
    width: 98%;  /* Width of the toolbar */
}
 
a#fa_hide {
    display: none!important;  /* Remove the hide button */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Reposition the toolbar contents */
}
Zelfbediening 3:
Pas de toolbar volledig aan via CSS Captur46
Code:
#fa_toolbar {
    background-color: transparent !important;  /* Make the main toolbar bg transparent */
}
#fa_right {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 40px 40px;  /* Border roundness */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
    right: 20px;  /* Décale la toolbar de la droite */
}
 
#fa_left {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 0 40px;  /* Border roundness */
    position: relative;  /* Position of the toolbar */
    left: 20px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_search {
    background-color: #000000;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_share {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 40px;  /* Border roundness */
    position: relative;  /* Position of the toolbar */
    left: -20px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /*Left padding */
    padding-right: 10px;  /* Right padding */
}
Zelfbediening 4:
Pas de toolbar volledig aan via CSS Captur47
Code:
#fa_toolbar {
    background-color: transparent !important;  /* Make the main toolbar bg transparent */
}
 
#fa_right {
    background-color: #b3b3b3;  /* Background color */
    border-radius: 0 0 0 40px;  /* Border roundness */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_left {
    background-color: #b3b3b3;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_search {
    background-color: #b3b3b3;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
    left: -20px;  /* Spacing to the left of the toolbar */
}
 
#fa_share {
    background-color: #b3b3b3;  /* Background color */
    border-radius: 0 0 40px;  /* Border roundness */
    left: -40px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
}
Zelfbediening 5:
Pas de toolbar volledig aan via CSS Captur99
Code:
    #fa_share:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px!important;
    }
    #fa_share:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-29px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px !important;
    }
    #fa_share{
      margin-left:450px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
      border-radius: 0px 0px 2px 2px!important;
    }
 
    #fa_search:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_left:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_search{
      margin-left:151px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
    }
    #fa_left{
      margin-left:40px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute !important;
    }
    #fa_toolbar{
      background-color:transparent!important;
    }
    #fa_right:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_right:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_right{
      margin-left:780px!important;
      background-color: rgba(0,0,0, 0.5) !important;
      position:absolute !important;
      border-radius: 0px 0px 2px 2px!important;
    }
#fa_toolbar_hidden:after{
  border-radius: 0px 0px 5px 5px!important;
  content:""!important;
  position:absolute!important;
  border-top: 35px solid  rgba(0,0,0, 0.5)!important;
  border-right: 30px solid transparent!important;
  display:inline-block!important;
  margin-top:-5px!important;
}
    #fa_toolbar_hidden:before{
      border-radius: 0px 0px 5px 5px!important;
      content:"";left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_toolbar_hidden{
      margin-right:30px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      border-radius: 0px 0px 2px 2px!important;
    }
 
    #fa_menulist{
      float:right!important;
      margin-left: -210px !important;
      background-color: rgba(0,0,0, 0.5)!important;
      position: absolute !important;
      border-radius: 0px 0px 2px 2px!important;
      border:none;
    }
    #fa_toolbar #fa_right #notif_list li.see_all {
      color:white !important;
      background-color: rgba(0,0,0, 0.5)!important;
    }
    #fa_menulist:after{
      content:""!important;
      position:absolute!important;
      top:-2px!important;
      border-bottom: 270px solid  rgba(0,0,0, 0.5) !important;
      right:-20px!important;
      border-right: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:-0px!important;
    }
    #fa_menulist:before{
      content:""!important;
      left:-20px !important;
      position:absolute!important;
      border-top: 270px solid  rgba(0,0,0, 0.5)!important;
      border-left: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:6!important!;
    }
    #fa_welcome,#fa_toolbar #fa_right #notif_list,#fa_notifications,
#fa_toolbar #fa_menulist li a,#fa_menulist #fa_ranktitle,#fa_menulist td{
  background-color:transparent !important;
  color:white !important;
}
#notif_list li { background:#CCC !important }

Terug naar boven Terug naar beneden

TonnyKamper

TonnyKamper
Globaal Moderator
Globaal Moderator

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

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