Sidebar met losse boxen
-
Hoe maak je zo een sidebar ?
Heb je hiervoor een plugin nodig ?
Zie link .http://img839.imageshack.us/img839/6324/screenhunter143may10131.jpg
-
Vrijwel alle themes bieden de mogelijkheid om sidebars te maken.
In het kort:
Doorgaans moet je plugins / widgets installeren.
De geïnstalleerde widget sleep je vervolgens op zijn plek in de sidebar
==
Om bv klanten toegang te geven tot bepaalde delen van je site, moet je plugins installeren, bijv. ‘WP-Members’, maar er zijn er veel meer.
In de instellingen van die plugins kan je titel, teksten, vereisten en veel meer instellen. ’t Is even puzzelen, maar goed te doen.
Is dat gebeurd, plaats dan de widget in de sidebar [drag ’n drop].
De onderste twee boxen lijken een wp-text widget [standaard] met een link / foto er in.]Ja,
dat begrijp ik allemaal en heb ik al aardig onder de knie.
Maar als ik zaken in mijn sidebar plaats, dan zit er nergens een box of rand om heen.
Mijn sidebar is 1 groot wit vlak waar alles onder elkaar in geplaatst is.
Ik zou graag randen er om heen zien, of iets dergelijks, het is nu 1 groot wit vlak , waar alles onder elkaar staat. Ik heb zowel afbeeldingen als teksten met linken in de sidebar, maar het gaat mij om de randen om elke widget.
Zoals ik nu van jou begrijp kun je de onderste 2 in een tekstwidget maken ? Hoe doe je dat dan ? Ik zie overigens liever overal ligtgrijze randen er om heen. Ik gebruik overigens het pinboard theme , maar weet niet of dit van belang is.Zo bijvoorbeeld.
Pas de waarden aan naar behoeftehtml > body.home.blog.logged-in.admin-bar.custom-background.customize-support > div#wrapper > div#container > div#sidebar.column.threecol > div#sidebar-top.widget-area > div.column.onecol{ border-width: 3px; border-style:solid; border-color:#eeeeee; border-radius:15px; margin-top:10px; } h3.widget-title{ border-width: 3px; border-style:solid; border-color:#eeeeee; border-radius:15px; background-color:#999999; color:#000000; padding-left:20px; }Voeg bovenstaande code toe aan
style.cssvan je CHILDtheme.
Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.
Heb je nog geen childtheme?
- installeer en activeer ‘one click childtheme’-plug-in
- activeer de originele theme
- Dashboard > weergave > child theme
- beantwoordt de vragen op het scherm
>> er wordt een child theme aangemaakt in een map met bestanden zoals style.css; - Activeer het childtheme.
- om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
– Maak je aanpassingen in style.css van het childtheme;
– mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.
==
Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen, installeer dan bijv de browser-add-on ‘firebug’ of een andere webdeveloper plugin / add-on.
Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren etc. aanpassen.Okay,
dankjewel voor de info. Ik heb de formule toegevoegd aan het childtheme, maar zie geen verschil.
Kan dat kloppen ?Firebug inmiddels geinstalleerd, maar dit is wel iets ingewikkelder.
De code van de sidebar heb ik gevonden, maar dan ?Ik heb H3 er voor weggehaald, en dan doet ie het.
Maar,hij maakt dan alleen een box om het onderwerp heen.
Vorm en kleur heb ik eveneens aangepast.
Ik zit wel met een probleem want hij maakt een box om elk onderwerp widget, dus ook in de footer, en daar is de achtergrondkleur zwart van.
Kun je de formule ook gebruiken excl de footer, dus alleen voor de sidebar en topbar ?.widget-title{
border-width: 2px;
border-style:solid;
border-color:#eeeeee;
border-radius:5px;
background-color:#fafafa;
color:#000000;
padding-left:20px;
}Waar is deze formule voor ?
html > body.home.blog.logged-in.admin-bar.custom-background.customize-support > div#wrapper > div#container > div#sidebar.column.threecol > div#sidebar-top.widget-area > div.column.onecol{
border-width: 3px;
border-style:solid;
border-color:#eeeeee;
border-radius:15px;
margin-top:10px;
}NB! Plaats in het vervolg code tussen ‘
backticks‘.Om met de laatste vraag te beginnen:
Dit plaats een kader om elke widget in de sidebar, vergelijkbaar met het gevraagde voorbeeld. Precieze kenmerken kan je aanpassen.Geen rand in footer:
#footer-area .widget-title { border: none; }#footer-area .widget-title {
border: none;
}Bovenstaande voor de footer werkt niet, zojuist geplaatst in style.css , geen verschil.
Waar is onderstaande formule voor ?
html > body.home.blog.logged-in.admin-bar.custom-background.customize-support > div#wrapper > div#container > div#sidebar.column.threecol > div#sidebar-top.widget-area > div.column.onecol{
border-width: 3px;
border-style:solid;
border-color:#eeeeee;
border-radius:15px;
margin-top:10px;
}NB!
NB! Plaats in het vervolg code tussen ‘backticks‘. [links naast #1]. Code in tekst wordt door sommige browsers uitgevoerd, met vreemde gevolgen.Zie boven: Dit plaats een kader om elke widget in de sidebar, vergelijkbaar met het gevraagde voorbeeld. Precieze kenmerken kan je aanpassen.
Plaats code tussen /* …*/ en hij wordt ge-deactiveerd. Kan je het verschil zien.
NB!
Druk <CTRL-F5> om je browser te verversen.
of leeg je browser-cache:
http://www.browserchecker.nl/cache-bestanden-verwijderenGeef url van je site, voor advies op maat.
Hallo W.P.Ginfo,
Is b-quote iets anders dan backticks [ ] ?
Beide formules hebben geen uitwerking op mijn site die ik aan het maken ben.
Browsercache wordt bij mij altijd gewist bij het afsluiten van de browser.
En ik vernieuw de browser na elke verandering die ik heb aangepast om het resultaat te zien. Url van de site is een probleem, want hij staat niet online,ik ben de site aan het bouwen op localhost met Xampp, omdat dit voor mij als leek de beste manier is om WordPress snel onder de knie te krijgen, zonder extra kosten. Ik was van plan om de site pas online te zetten, zodra deze gereed is.Op deze wijze kan ik er lekker op los “rommelen” .Zie onderstaande voor resultaat tot nu toe.
http://imageshack.us/a/img59/3434/screenhunter151may13090.jpg
http://imageshack.us/a/img801/3275/screenhunter152may13090.jpgDe box heb ik inmiddels voor elkaar, de verwijzing klopte niet helemaal, deze heb ik aangepast.
Maar de border om de omschrijving is te klein, of de box te groot.
Zie :
http://imageshack.us/a/img521/5506/screenhunter152may13113.jpg
http://imageshack.us/a/img835/8645/screenhunter153may13113.jpgProbleem met de footer blijft aanwezig.
De box om de titel volgt de grootte van de omschrijving;
Kortom: Geef de omschrijving de gewenste maat dan komt de rest mee….widget-title { width: 150px;/*bij mijn lettertype etc. de minimale grootte*/ }Je kan toevoegen / spelen met waarden zoals:
height, padding en margin.Het grote kader kan natuurlijk ook kleiner
html > body.home.blog.logged-in.admin-bar.custom-background.customize-support > div#wrapper > div#container > div#sidebar.column.threecol > div#sidebar-top.widget-area > div.column.onecol{ border-width: 3px; border-style:solid; border-color:#eeeeee; border-radius:15px; margin-top:10px; width:200px; /*speel met de waarden*/ }http://codex.wordpress.org/Main_Page
http://codex.wordpress.org/Using_FileZilla
http://codex.wordpress.org/Getting_Started_with_WordPress
http://codex.wordpress.org/CSS
http://codex.wordpress.org/Finding_Your_CSS_Styles
http://codex.wordpress.org/FAQ_TroubleshootingBTW Ik kan de footer van je niet zien en dus weinig concreter advies geven op dit moment.
Gebruik ‘firebug’ om uit te zoeken welke elementen en opmaakkenmerken je wilt wijzigen.Ga in google maar eens op zoek naar een
‘firebug tutorial’
- Het onderwerp ‘Sidebar met losse boxen’ is gesloten voor nieuwe reacties.