Button erstellen und einbinden

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    In dem Du diese per HTML, CSS und eventuell etwas PHP ins Theme integrierst. Sorry, aber für genauere Anweisungen benötigen die bereitwilligen Helfer mehr Informationen.

    Dazu muss die header.php bearbeitet werden. Z.B. so wenn eine Grafik als Button eingefügt werden soll:

    PHP
    ...
<body <?php body_class(); ?>>
[COLOR="Green"]<div id="outerpage">
<a href="www.example.com"><img src="LinkZumBild" /></a>
</div>[/COLOR]
<div id="page" class="hfeed">
...

    In der style.css müsste dann sowas verankert werden:

    Code
    #outerpage {
    margin: 1em auto;
    max-width: 1000px;
}

    Würde dann am Ende so aussehen wie im Anhang... Ausrichtung kann dann per CSS noch angepasst werden.

    ging ganz gut, danke Dir.

    Jedoch wollte ich danach noch ein paar kleine Bildchen daneben einfügen, dies schlug fehl. Jetzt stehen alle Buttons untereinander und davor ist ein Punkt. Scheinbar hat dies mit der Formation im Themplet zu tun, oder wie? Wie bekomme ich das ausgerichtet? DANKE

    Bei mehreren Buttons müsste es dann so in etwa aussehen:

    header.php

    PHP
    ...
<body <?php body_class(); ?>>
[COLOR="Green"]<div id="outerpage">
<ul>
<li><a href="www.example.com"><img src="LinkZumBild" /></a></li>
<li><a href="www.example.com"><img src="LinkZumBild/></a></li>
</ul>
</div>[/COLOR]
<div id="page" class="hfeed">
...

    style.css

    Code
    #outerpage {
    margin: 1em auto;
    max-width: 1000px;
}


#outerpage ul {list-style-type: none; margin: 0; padding: 0;}
#outerpage ul li {display: inline;}

    habe es hin bekommen, einwandfrei, vielen Dank.

    Nur ist der "graue streifen", wo die Buttons drin sind breiter geworden. Wie kann ich den wieder schmaler machen?

    Ja, und ich habe Dir bereits heute Morgen auf Deine PN geantwortet.

    Zitat

    Versuch's mal selber. Wie's geht, habe ich Dir im Forenthread ja schon gezeigt. Dort wird nämlich genau das gleiche gemacht. Vorzeichen der Listenpunkte werden ausgeblendet.

    CSS ID/Klasse ausfindig machen (dabei helfen die Entwicklertools des Browsers oder das Firefox Addon Firebug) und dann via CSS list-style-type auf none setzen.

    http://de.selfhtml.org/html/text/listen.htm
    http://www.css4you.de/listproperty.html

    Wenn ich das mit meinem etwas weniger als Halbwissen einigermaßen verstanden habe, dann habe ich es falsch aufgebaut. Ich habe für die Partnerliste widgets genommen, wenn ich dort nun die Punkte für die Aufzählung entferne, dann sind sie immer weg, auch wenn ich andere widgets einblende. Ich hätte sinnvoller Weise gleich einen eigenständigen Container bauen sollen und an der Stelle platzieren sollen. Oder sehe ich das falsch? Wirklich weiter komme ich jedoch nicht.

    Gruß

    Zitat von eastward2000

    Ich habe für die Partnerliste widgets genommen, wenn ich dort nun die Punkte für die Aufzählung entferne, dann sind sie immer weg, auch wenn ich andere widgets einblende.

    Dann hast Du die falsche ID/Klasse benutzt. Das Link-Widget hat eine eindeutige Klassenbezeichnung.

    ich möchte doch einfach nur oben den Streifen auf 33px und die grauen Punkte weg, nicht mehr.

    Ich finde keine ID/Klasse. habe auch nicht bewusst irgendwo eine angegeben.

    Ein bisschen Eigeninitiative kann nicht schaden. Auch wenn nicht immer alles beim 1. Mal klappt...

    Aber um die Sache hier abzukürzen:

    Code
    #social-container {
margin: 0em auto;
max-width: 1000px;
[COLOR="Green"]height: 33px;[/COLOR]
}
#social-container ul {list-style-type: none; margin: 0; padding: 0;}
#social-container ul li {display: inline;}


[COLOR="green"].widget_links ul{list-style-type:none;}[/COLOR]

    Wenn die Höhe von social-container nur 33px haben soll, dann gib das so wie oben in der style.css an.

    Bezgl. der Widget Klasse: Chrome-Entwicklertools oder auch Firebug zeigen bei einem Blick in den Quellcode

    Code
    class="widget widget_links"

    an. Soll heißen, Du kannst dieses Widget gezielt per CSS bearbeiten, ohne dass die Änderungen sich auf die anderen Widgets auswirken.

    Wie gesagt, solltest Du Dir dahingehend ein bisschen Wissen aneignen und vielleicht auch mal selber ein bisschen rumprobieren.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden