Opmaak titeltekst
-
Morgen,
Zit al een tijdje met deze vraag:
Hoe maak ik een ”balk” rondom tekst. Lastig uit te leggen, maar dit bedoel ik: http://www.barbecue.nl/nl zoals hier ”barbecue” en ”alle menu’s zijn inclusief” omvangen zijn door een ”balk”.Ik gebruik het thema Forefront (standaard childthema van Generatepress).
-
Geef aub je URL. Dan kunnen we hier zonder zelf eerst het theme te installeren je advies geven.
== == == algemeen
Plaats een
<div>
bv om de betreffende kop heen bvmenuholder
zoals bij “barbeque”
Geef in het css de passende opmaak voor de betreffende<div>
#menuholder h1 { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; background: #76cef5; background-image: -webkit-linear-gradient(0deg, #76cef5 0, #36b7f1 100%); background-image: linear-gradient(180deg, #76cef5 0, #36b7f1 100%); background-color: #36b7f1; height: 20px; border-bottom: 2px solid #ffffff; padding: 6px 10px 10px 10px; font-family: 'trade_gothic_lt_stdBdCnno.20'; font-size: 22px; line-height: 22px; color: white; } body.bbq #menuholder h1 { background: #acd17d; background-image: -webkit-linear-gradient(0deg, #acd17d 0, #80b938 100%); background-image: linear-gradient(180deg, #acd17d 0, #80b938 100%); background-color: #80b938; } body.gourmet #menuholder h1 { background: #76cef5; background-image: -webkit-linear-gradient(0deg, #76cef5 0, #36b7f1 100%); background-image: linear-gradient(180deg, #76cef5 0, #36b7f1 100%); background-color: #36b7f1; } body.az #menuholder h1 { background: #b26f70; background-image: -webkit-linear-gradient(0deg, #b26f70 0, #882323 100%); background-image: linear-gradient(180deg, #b26f70 0, #882323 100%); background-color: #882323; }
Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.Alternatief: Voeg bovenstaande code toe aan
style.css
van 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.
==
== == == Extra
Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen,rechtsklik en kies ‘element inspecteren’, of installeer dan bijv de browser-add-on ‘firebug’.Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren, layout etc. aanpassen.
== == == ik wil echt GEEN childtheme [en begrijp het probleem van het aanpassen van het originele theme…]
Zet de bovenstaande code dan ONDERAAN het bestand ‘styles.css’ van je thema. Ververs je browser <CTRL-F5>.
== == ==Bedankt voor je uitgebreide uitleg.
Ik geef je de URL heel graag, maar het is voor een klant (ik ben nog in opleiding) en geef hem dus liever niet hier bloot. Kan dit naar jou privé? Het is volgens mij niet mogelijk om een privébericht te sturen op dit forum? Weet jij een andere oplossing?Zou het zeer op prijs stellen.
Alvast bedankt.- begin met het maken van een back-up!!
- Open de betreffende php-file
- Plaats een
<div>
om de betreffende kop; bv.
<div id="balk"><h1>Barbeque</h2> </div>
- sla het php-file op en upload
- open het CSS-file
- geef de opmaak voor ‘balk’
== == ==
== == ==
Voorbeeld
#balk h1 { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; background: #76cef5; background-image: -webkit-linear-gradient(0deg, #76cef5 0, #36b7f1 100%); background-image: linear-gradient(180deg, #76cef5 0, #36b7f1 100%); background-color: #36b7f1; height: 20px; border-bottom: 2px solid #ffffff; padding: 6px 10px 10px 10px; font-family: 'trade_gothic_lt_stdBdCnno.20'; font-size: 22px; line-height: 22px; color: white; }
…Beginner / gevorderd / expert…
Om succesvol te werken aan een website is het belangrijk dat je de basisbeginselen onder de knie krijgt van HTML en CSS. Je hoeft geen expert te worden, maar met wat basiskennis gaat het een stuk makkelijker 😉 [Een heel klein beetje kennis van PHP helpt ook, maar is doorgaans niet direct nodig]
Zo kan je een gekozen theme makkelijker aanpassen aan je behoeften.het is voor een klant (ik ben nog in opleiding)
Je hebt hopelijk een ’trainer / mentor’ oid. Vraag hem / haar ondersteuning als je die nodig hebt! Zo weten zij wat je al wel en wat nog niet goed kunt.
Ook helpt het bij het verstrekken van opdrachten die passen bij je kennisniveau. Daarnaast helpt met bij het ‘laten zien van je ontwikkeling en voortgang’, naarmate je meer ingewikkelde zaken doet…http://www.w3schools.com/css/default.asp
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_Troubleshooting
http://codex.wordpress.org/Backing_Up_Your_Database
Natuurlijk zijn er ook trainingen op het internet te vinden…
bijv. [engels, betaald] Lynda.com:
http://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/154417-2.htmlBedankt voor je reactie.
Open de betreffende php-file
Plaats een <div> om de betreffende kop; bv.
<div id=”balk”><h1>Barbeque</h2> </div>
sla het php-file op en uploadMaakt het niet uit waar ik in de php-file deze code plaats?
De plaats maakt wel uit!
Plaats een <div> om de betreffende kop; bv.
<div id="balk"><h1>Barbeque</h1> </div>
Zoek dus in het php-file de juiste kop.
Zet de div eromheen.Hoe vind ik dat dan??
- maak een backup van het php-bestand
- browser: open de juiste pagina
- re-klik de kop die je wilt aanpassen > kies ‘element inspecteren
- ‘kijk in het subscherm ‘waar de kop zich bevindt’ en welke andere elementen er omheen staan
- open in een editor [liefst naast de browser] het php-bestand
- puzzel en probeer
Gaat het fout?
Niet rommelen!
Zet de backup-versie terug > probeer het opnieuw met het herstelde ORIGINEEL. Zo voorkom je dat je ‘fout-op-mislukte-herstelpoging-plaatst’Dankjewel!
Het is gelukt!Nog een vraagje hierover:
De balk komt er inderdaad zoals ik in sommige gevallen wil, maar in andere gevallen wil ik dat de balk heel de breedte verstrijkt. Zoals bij http://www.barbecue.nl ”Barbecue”Hoe doe ik dit?
#balk h1 {width:100%;}
NB!
Wil je de opmaak van individuele berichten / pagina’s aanpassen:- Installeer en activeer de plugin ‘SuperSlider-Perpost-Code’;
- open de pagina / het bericht in de dashboard-editor
- scroll en voeg de code toe aan de betreffende pagina in het CSS-vak van de plugin
- sla de wijzigingen op
Vergeet aub niet de thread als ‘resolved’ / ‘opgelost’ te taggen in de rechter zijbalk.
Koop Originele valse paspoorten, ID-kaart Drivers License – noveltydoplicates@gmail.com
Beste kwaliteit Novelty echte en vervalste identiteitsbewijzen en paspoorten, huwelijksakten en Rijbewijs etc nu kopen van hoge kwaliteit-Wij hebben de beste HOLOGRAMMEN EN duplicators Met meer dan 15 miljoen van uit documenten circuleren over de hele wereld.
– ID’s scannen ==> JA
– HOLOGRAMMEN ==> IDENTICAL
– BARCODES ==> IDS SCAN
– UV: JA
IDS met snel het verschepen ==> E-mail ondersteuningContact: noveltydoplicates@gmail.com
http://noveltyduplicates.co.nf
- Het onderwerp ‘Opmaak titeltekst’ is gesloten voor nieuwe reacties.