Website Rahmen

iksdeh

Hallo WPDE Mitglieder/innen,

Ich bin Neu in dieser Branche :) und versuche mit Hilfe "Tutorials" / " Youtube" und vieles mehr mein Wissen anzueignen.

Leider steck ich wieder mal fest und Google und Co. ist für mich eine Hassliebe. Bei Google bekommt mehr Mist als man sich wünscht. Ich habe hws. aus unwissenheit die falschen Suchbegriffe gesucht und gefühlte 100 Webseiten mit fast sinnlose Texte durchgekemmt. Daher möchte ich mich an Euch wenden...

Kurz zur mein Wissenstand.. Wordpress Erfahrung ca. 1,5 Wochen. CSS ist mir ein Begriff und weiß wofür man es braucht, aber ich habe ca 15 Jahre nichts mehr damit gemacht.

Insperations Webseite ist: http://www.uwsgaming.com/

Auf der o. g. Webseite gibt es ein fixiert Rahmen der beim Scrollen sich mit bewegt. Lt. meine Kenntnisse besteht dieser "Rahmen" aus Menü, Footer und seitliche page-border. Fixierte Menü, gibt es einige gute Plugins, ich würde es lieber mit CSS zaubern, aber da kenne ich mich leider zu wenig damit aus. Den Footer habe ich manuell erstellt. Dafür habe ich den Footer disable und ein fixierte Widgets erstellt. Bei die seitlichen Rahmen verzweifel ich einfach nur.:mad:
Wie erstellt ich den überhaupt einen seitlichen Border /Widget?

Hws. benötig ich CSS..:eek:

Ich würde mich über eine paar konstruktive Antworten freuen.

VG
Iksdeh

Werbepost

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

Marcus[IS]

Hi,

Zitat von iksdeh

CSS ist mir ein Begriff und weiß wofür man es braucht, aber ich habe ca 15 Jahre nichts mehr damit gemacht.

Hat sich etwas geändert in 15 Jahren. Manche Dinge sind aber geblieben. ;)
https://www.w3schools.com/css/

Zitat von iksdeh

Wordpress Erfahrung ca. 1,5 Wochen.

Jeder hat mal angefangen.

Zitat von iksdeh

Wie erstellt ich den überhaupt einen seitlichen Border /Widget?

In der Regel wird gemäß Developer Codex vorgegangen, wenn man Widget Bereiche in einem Theme unterbringen will.
https://developer.wordpress.org/themes/functionality/widgets/

iksdeh

@Marcus[IS]
vielen Dank für dein Beitrag.

Zitat von "Marcus[IS

, post: 804797, member: 25287"]In der Regel wird gemäß Developer Codex vorgegangen, wenn man Widget Bereiche in einem Theme unterbringen will.
https://developer.wordpress.org/themes/functionality/widgets/

kannst du mir vllt. ein paar Details mitteilen, wie in der o. g. Webseite die seitliche page-border erstellt hat?

Marcus[IS]

Zitat von iksdeh

kannst du mir vllt. ein paar Details mitteilen, wie in der o. g. Webseite die seitliche page-border erstellt hat?

Das Problem bei deiner Beispielseite ist, dass diese scheinbar nicht mit WordPress erstellt wurde, es ist ein Bootstrap Theme, vermutlich Handarbeit mittels PHP.

Du hast ja geschrieben, dass du bereits diverse Anpassungen gemacht hast (Footer).
Falls du einen Link zu deinem Projekt hast, oder uns mitteilst welches Theme du beim WP derzeit verwendest, könnten wir eventuell besser helfen.

iksdeh

@Marcus[IS]

Zitat von "Marcus[IS

, post: 804802, member: 25287"]Das Problem bei deiner Beispielseite ist, dass diese scheinbar nicht mit WordPress erstellt wurde, es ist ein Bootstrap Theme, vermutlich Handarbeit mittels PHP.

Damit habe ich gerechnet.

Ich versuche es anders zu formielieren. Wie erstelle mit Hilfe "Elementor Free Plugin" ein rechten / linker fixierter schwarzer Balken der über den gesamten Bildschirm geht? [COLOR=#4da6ff]Btw: siehe als Beispiel die im #1 Post genannten Webseite.[/COLOR]

Tutrix

@iksdeh

Ich beziehe mich jetzt mal was den Code betrifft, auf deine Beispielseite
das sind 3 DIVs und der dazu gehörige CSS Code

Die DIVs (sind ohne den Menü-Inhalt)
genau in dieser Reihenfolge verwenden

HTML

<div class="page-border bottom colors-e background-solid"></div>
<div class="page-border left colors-e background-solid"></div>
<div class="page-border right colors-e background-solid"></div>

kommen direkt nach dem öffnenden <body.......> tag vermutlich header.php, je nach Theme
wenn du nur rechts und links willst das erste (bottom) weglassen

der CSS Code

Code

.colors-e .background-solid, .colors-e.background-solid {
    background-color: #0d0d0d;
}
.page-border {
    position: fixed;
    z-index: 1030;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.page-border.right {
    right: 0;
    top: 0;
    bottom: 24px;
    width: 25px;
    border-left: 1px solid;
}
.page-border.left {
    left: 0;
    top: 0;
    bottom: 24px;
    width: 25px;
    border-right: 1px solid;
}
.page-border.bottom {
    bottom: 0;
    right: 0;
    left: 0;
    height: 25px;
    border-top: 1px solid;
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    padding-top: 2px;
    font-size: 12px;
    letter-spacing: 1px;
}

Alles anzeigen

Textformatierungen usw. kannst du natürlich weglassen, wenn es nur um den Border geht

noch ein Beispiel anhand dieses Forums (über Browser Entwicklertool)
https://www.screencast.com/t/Hc7PzU6Bg4yN

iksdeh

@Tutrix
vielen Dank für deine Hilfreicher Post.

Scheint so, dass Wordpress einfach hier raus ist.

Tutrix

Zitat von iksdeh

@Tutrix
Scheint so, dass Wordpress einfach hier raus ist.

warum?
das geht bei jeder Seite
wie beschrieben die 3 DIVs einfügen den CSS Code dazu fertig ;)

iksdeh

Guten Morgen Tutrix,

du wirst sicherlich gleich meine Frage als trivial abstufen. Ich verwende Elementor "Free" und das einfügen von CSS ist sehr eingeschränkt. Wie / Wo soll ich die 3 DIV´s in Wordpress einfügen?

Tutrix

Elementor verwende ich nicht, kann dir da also leider nicht weiter helfen.

In der Regel erstellt man ein Child-Theme, da kann man dann alle Dateien nach belieben anpassen und so auch in der style.css Code ergänzen.
Die DIVs kommen in die header.php wie oben beschrieben, wobei dies abhängig vom Theme auch eine andere Datei sein kann und der CSS-Code dann in die style.css

Wie man das über Elementor (Free) update-sicher integriert, kann ich dir nicht sagen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Website Rahmen

Jetzt mitmachen!