ilch Forum » Ilch CMS 2.X » Design und Templates » Design anpassung

Geschlossen
  1. Di. 17.03.2020 20:41 Uhr #1
    User Pic
    Tweety060286 Mitglied
    Registriert seit
    12.02.2018
    Beiträge
    412
    Beitragswertungen
    32 Beitragspunkte
    Hy Leute bastle grad ernaut an einem Design und verzweifle mal wieder bei den Buttons lachen.

    Hab ich einen Effect vergessen ?

    Problem ist das meine Buttons gnau das machen was ich will nis auf einen und zwar den im Forum "Forum bearbeiten".

    Hab nun dies in meine Css reingepackt und dennoch ist es so das auch dieser Button alles macht was ich will. Jedoch wenn ich den Button aktiviere also draufklicke, geklickt halte und mit der Mouse wegfahre dann bekommt der plötzlich ein ganz anderes aussehen.
    Das müsste ja eigentlich der active effekt sein oder ?

    hier mein Button in der CSS: 
    .btn-default {
	border: 2px solid;
  	font-weight: bold;
    text-shadow: 0 0 10px #000000;
	background: transparent;
	border-radius:10px;
	border-color: #3A92F4;
	color: #fff;
}
.btn-default:hover {

	border: 2px solid;
	box-shadow: 5px 10px 18px #3A92F4;
  	font-weight: bold;
    text-shadow: 0 0 10px #000000;
	background: transparent;
	border-radius:10px;	
	outline: none;
	border-color: #3A92F4;
	color: #fff;
}
.btn-default:active {
	border: 2px solid;
	box-shadow: 5px 10px 18px #3A92F4;
  	font-weight: bold;
    text-shadow: 0 0 10px #000000;
	background: transparent;
	border-radius:10px;	
	outline: none;
	border-color: #3A92F4;
	color: #fff;
}
.btn-default:focus {
	border: 2px solid;
	box-shadow: 5px 10px 18px #3A92F4;
  	font-weight: bold;
    text-shadow: 0 0 10px #000000;
	background: transparent;
	border-radius:10px;	
	outline: none;
	border-color: #3A92F4;
	color: #fff;
}
.btn-default:hover:focus:active {
	border: 2px solid;
	box-shadow: 5px 10px 18px #3A92F4;
  	font-weight: bold;
    text-shadow: 0 0 10px #000000;
	background: transparent;
	border-radius:10px;	
	outline: none;
	border-color: #3A92F4;
	color: #fff;
}

    Vl kann mir ja jemand den Baum zeigen dem ich im Wald nicht mehr sehe lachen


    verwendete ilch Version: 2.1.x
    [Es liegt in deiner Hand ob du der Schlächter bist oder das Vieh]
    1 Mitglieder finden den Beitrag gut.
  2. Mi. 18.03.2020 08:42 Uhr #2
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Schick mir doch mal ein Link wo sich der Button befindet
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  3. Mi. 18.03.2020 09:47 Uhr #3
    User Pic
    Slipi Hall Of Fame
    Registriert seit
    19.01.2018
    Beiträge
    954
    Beitragswertungen
    120 Beitragspunkte
    Mit .btn-default sprichst du alle Buttons an.
    Wenn du rein nur die Buttons im Forum ändern möchtest, dan sprich sie mit 
    #forum .btn-default

    an.
    Die id Forum ist schon vorhanden und müsstest daher auch keine views ändern.

    Slipi
    slipi.at/
    0 Mitglieder finden den Beitrag gut.
  4. Mi. 18.03.2020 15:17 Uhr #4
    User Pic
    Tweety060286 Mitglied
    Registriert seit
    12.02.2018
    Beiträge
    412
    Beitragswertungen
    32 Beitragspunkte
    Dabei geht es z.B um diesen button hier der eben im Forum als Forum bearbeiten fungiert.
    also den hier: 
    <form method="post">
      <input type="hidden" name="ilch_token" value="c8face0be3938a93823a2c06e8f0a5cdb2f8222ff5135683060b2683724fc7ec">
      <button class="btn btn-default" name="forumEdit" value="forumEdit">Forum bearbeiten</button>
</form>


    habe nun alle Buttons schon mal testweise in die css gepackt und geändert, wie gesagt alle amchen was ich will lachen nur der eine Schlingel nicht. Der bekommt ein ganz anderes Layout ( grauer Hintergrund ) wenn ich draufklicke, geklickt halte und mich jedoch dann wegbewege. Sollte eigentlich die Focus einstellung sein oder ?

    hier mal meine testinkludierung aller btn´s 

    .btn:hover, .btn:active, .btn:focus, .btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.btn-default:hover, .btn-default:active, .btn-default:focus,
.btn:hover:focus:active, .btn-primary:hover:focus:active, .btn-default:hover:focus:active,
.btn-1:hover,.btn-1:active, .btn-1:focus,
.btn-primary:disabled:hover {
	border: 2px solid;
	box-shadow: 5px 10px 18px #3A92F4;
  	font-weight: bold;
    text-shadow: 0 0 10px #000000;
	background: transparent;
	border-radius:10px;	
	outline: none;
	border-color: #3A92F4;
	color: #fff;
}


    Ich steh irgendwie am Schlauch lachen
    Hatt noch jemand einen tipp ?
    [Es liegt in deiner Hand ob du der Schlächter bist oder das Vieh]
    1 Mitglieder finden den Beitrag gut.
  5. Mi. 18.03.2020 15:53 Uhr #5
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    such mal nach der klasse "button" ohne punkt(.) oder Raute (#) einfach nur button, so werden Elemente definiert.
    z.b : 
    footer{background-color:#fff}
.footer{background-color:#000}


    Das eine ist ein Element, das andere ist eine Klasse!
    Da du das Element <button></button> auch benutzt könnten sich diese Eigenschaften im Wege stehen und dazu Probleme verursachen.

    Also such nach "button" in deiner design css und im bootstrap.

    Ich empfehle nach wie vor wenn du etwas änderst dann definiere einfach eine eigene Klasse.


    Zuletzt modifiziert von Nex4T am 18.03.2020 - 15:53:56
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  6. Mo. 23.03.2020 12:38 Uhr #6
    User Pic
    Tweety060286 Mitglied
    Registriert seit
    12.02.2018
    Beiträge
    412
    Beitragswertungen
    32 Beitragspunkte
    okay hab mir nen Wolf abgesucht in der Console, in den ganzen css´s in den ganzen style´s.

    Hab nun diesen button gefunden lachen

    für all jene die den auch mal suchen

    es ist der

    .btn.btn-default


    Das Thema kann also geschlossen weden zwinker danke für eure Hilfe
    [Es liegt in deiner Hand ob du der Schlächter bist oder das Vieh]
    0 Mitglieder finden den Beitrag gut.
  7. Mo. 23.03.2020 12:48 Uhr #7
    User Pic
    Slipi Hall Of Fame
    Registriert seit
    19.01.2018
    Beiträge
    954
    Beitragswertungen
    120 Beitragspunkte
    ZitatZitat geschrieben von Tweety060286
    okay hab mir nen Wolf abgesucht in der Console, in den ganzen css´s in den ganzen style´s.

    Hab nun diesen button gefunden lachen

    für all jene die den auch mal suchen

    es ist der

    .btn.btn-default


    Das Thema kann also geschlossen weden zwinker danke für eure Hilfe


    Die .btn ist eine eigene style-button klasse, sie gib die abstände - border an und die .btn-default ist ebenfalls eine eigen style-button klasse, diese gibt den background sowie hover an.
    externer Link
    Daher würde es reiche wenn du nur .btn-default ansprichst doch dies habe ich dir doch geschrieben.

    ZitatZitat geschrieben von Slipi
    Mit .btn-default sprichst du alle Buttons an.
    Wenn du rein nur die Buttons im Forum ändern möchtest, dan sprich sie mit 
    #forum .btn-default

    an.
    Die id Forum ist schon vorhanden und müsstest daher auch keine views ändern.

    Slipi


    Ich würde jedoch den tipp nov Nex4T beherzigen, in dem du eine eigen klasse erstellst und mit dieser sprichst du die buttons an.


    Zuletzt modifiziert von Slipi am 23.03.2020 - 12:48:40
    slipi.at/
    0 Mitglieder finden den Beitrag gut.
  8. Mo. 23.03.2020 13:08 Uhr #8
    User Pic
    Tweety060286 Mitglied
    Registriert seit
    12.02.2018
    Beiträge
    412
    Beitragswertungen
    32 Beitragspunkte
    Habe ich auch so probiert wie du meintest Slipi.

    Und alle Buttons haben auch das gemacht was ich wollt.
    Jedoch wie gesagt bei dem :focus effekt ( Auf den button bewegen,klicken,geklickt halten und weg ziehen ),
    hatt sich dieser Style nicht geändert.

    Egal ob ichs mit der klasse

    #forum .btn-default:focus
    button:focus
    button-default:focus
    .button:focus
    .button-default:focus
    .btn:focus
    .btn-default:focus
    und noch viele mehr probiert habe, der Style blieb immer gleich mit grauem Background.

    Erst als ich die 2 Klassen direkt ansprach mit
    .btn.btn-default:focus

    erst dann hat er seinen Background geändert.

    Sorry wenn ich vor lauter Bäumen dan Wald nicht mehr sehe.
    Und vl die Lösung nur Zufall ist.
    Aber anders hatte es eben nicht funktioniert


    Gruss Tweety


    Zuletzt modifiziert von Tweety060286 am 23.03.2020 - 13:28:12
    [Es liegt in deiner Hand ob du der Schlächter bist oder das Vieh]
    0 Mitglieder finden den Beitrag gut.
  9. Mo. 23.03.2020 18:18 Uhr #9
    User Pic
    Tweety060286 Mitglied
    Registriert seit
    12.02.2018
    Beiträge
    412
    Beitragswertungen
    32 Beitragspunkte
    Ich glaub ich schmeiss meine Fragen bezüglich Designanpassungen alle hier rein.

    Wenns anders erwünscht ist dann bitte Bescheid geben zwinker

    Hab nämlich erneut eine Frage.

    Ich weis wie ich die Styles oder Layout css bearbeite und ich weis auch die codes jedoch mal warum ist es so das mir einige nicht direkt greifen.

    zB. will ich beim Meinungsmodul den Hintergrund ändern und meine eingabe in die Style.css bewirkt das nicht.

    hier der code vom Meinungsmodul 
    .opinions-entries {
    background-color: #fff;
    border-top: 0px;
    border: 1px solid transparent;
    border-color: #ddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 15px;
}


    wenn ich den also copiere und in meine css reinpacke und zB
    background-color: #fff;

    in
    background-color: #000;
    ändere sollte er ja schwarz sein.Ist er aber nicht.
    muss ich wirklich bei jedem Modul das ich zu meinem Design anpassen will ne neue verlinkung + copy von der jeweiligen css ( in diesem Fall vies/modules/opinions/static/css/opinions.css ) erstellen ?

    Ich weis ich könnte es direkt in den Modulen auch ändern, da werden diese aber bei nem Update wieder überschrieben oder ?

    Sorry wenn euch meine Laienhaften Fragen nerven.

    Aber selbst ist der Mann lachen , wer nicht wagt der nicht gewinnt lachen

    Gruss Tweety


    Zuletzt modifiziert von Tweety060286 am 23.03.2020 - 18:20:02
    [Es liegt in deiner Hand ob du der Schlächter bist oder das Vieh]
    0 Mitglieder finden den Beitrag gut.
  10. Mo. 23.03.2020 19:47 Uhr #10
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    versuch es mal mit 
    background-color: #000!important;
    ansonsten muss es irgendwo anders überschrieben werden.
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  11. Mo. 23.03.2020 20:00 Uhr #11
    User Pic
    Tweety060286 Mitglied
    Registriert seit
    12.02.2018
    Beiträge
    412
    Beitragswertungen
    32 Beitragspunkte
    Das hab ich vorhin auch probiert und dachte mir das ich dann doch wohl zu blöd sei und den Fehler nicht finde. Aber kann mein gesammtes Ansuchen zurück ziehen denn

    die Lösung
    background-color: #000!important;

    funktioniert , nur hatte ich einen Zeichenfehler traurig

    Danke dir Nex4T
    [Es liegt in deiner Hand ob du der Schlächter bist oder das Vieh]
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten