DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Weer een Wordpress-vraag waarbij de oplossing vast een kleinigheidje blijkt te zijn, maar ík kan de fout iig niet opsporen.
Er staan twee horizontale menu's in m'n Wordpress-thema ('Virtue'). De bovenste (het origineel waarvan ik de onderste heb proberen te kopiëren, qua structuur) klapt wel goed uit, de onderste niet. Wat moet er veranderd worden?
Ingeklapt, dat is al niet goed omdat het onderste menu er in 'gewone' tekst onder blijft hangen:
Uitgeklapt, dan hangen ze dus beiden aan elkaar terwijl het tweede menu er ook nog onder hangt in 'gewone' tekst:
----------------------------------------------------------------------------------------------------------------------
Het deel van de header.php-file waar beide menu's te zien zijn:
En een link naar de css-file: https://ufile.io/3972d
Edit: Ook nog een link naar het deel van options.php waar de mobiele menu's in staan (heb dit deel even los geknipt en er voor dit topic een nieuw bestandje van gemaakt): https://ufile.io/85bf5
[ Bericht 2% gewijzigd door #ANONIEM op 12-02-2017 09:34:24 ]
Er staan twee horizontale menu's in m'n Wordpress-thema ('Virtue'). De bovenste (het origineel waarvan ik de onderste heb proberen te kopiëren, qua structuur) klapt wel goed uit, de onderste niet. Wat moet er veranderd worden?
Ingeklapt, dat is al niet goed omdat het onderste menu er in 'gewone' tekst onder blijft hangen:
Uitgeklapt, dan hangen ze dus beiden aan elkaar terwijl het tweede menu er ook nog onder hangt in 'gewone' tekst:
----------------------------------------------------------------------------------------------------------------------
Het deel van de header.php-file waar beide menu's te zien zijn:
En een link naar de css-file: https://ufile.io/3972d
Edit: Ook nog een link naar het deel van options.php waar de mobiele menu's in staan (heb dit deel even los geknipt en er voor dit topic een nieuw bestandje van gemaakt): https://ufile.io/85bf5
[ Bericht 2% gewijzigd door #ANONIEM op 12-02-2017 09:34:24 ]
Zou het geven van het adres helpen? (Btw, dat hij er niet zo goed uit ziet komt doordat ik eerst het technische deel in orde wil hebben voordat ik verder ga ontwerpen. Het is de bedoeling dat het beter wordt. 
)
https://www.wwzapper.com/
Als je hem op een smartphone-schermpje ziet, of op een desktop-pc/laptop het scherm verkleint, zie je waar het mis gaat.
[ Bericht 13% gewijzigd door #ANONIEM op 12-02-2017 15:32:29 ]
)https://www.wwzapper.com/
Als je hem op een smartphone-schermpje ziet, of op een desktop-pc/laptop het scherm verkleint, zie je waar het mis gaat.
[ Bericht 13% gewijzigd door #ANONIEM op 12-02-2017 15:32:29 ]
tip:
Gebruik voor dingen als css besstanden en stukjes code niet een file uploader maar pastebin of b.v. cssfiddle (kan je gelijk een stuk code bij doen zodat je een kleine pseudocode hebt)
wat ik zo snel zie is dat beide div's/knoppen exact dezelfde id's en benamingen hebben, dus dat ze tegelijkertijd uitklappen kan ik op die manier verklaren...
dat het submenu niet verborgen is, komt doordat de verkeerde css gebruikt wordt
ik doe zelf voor de rest niets met wordpress en ken virtue dus ook niet, maar ergens heb je of een stap overgeslagen of verkeerd uitgevoerd is mijn gok..
Gebruik voor dingen als css besstanden en stukjes code niet een file uploader maar pastebin of b.v. cssfiddle (kan je gelijk een stuk code bij doen zodat je een kleine pseudocode hebt)
wat ik zo snel zie is dat beide div's/knoppen exact dezelfde id's en benamingen hebben, dus dat ze tegelijkertijd uitklappen kan ik op die manier verklaren...
dat het submenu niet verborgen is, komt doordat de verkeerde css gebruikt wordt
ik doe zelf voor de rest niets met wordpress en ken virtue dus ook niet, maar ergens heb je of een stap overgeslagen of verkeerd uitgevoerd is mijn gok..
Tja, ik heb al zo veel geprobeerd. Zoals kopieën maken van de oorspronkelijke code, van het originele menu, in de css, en die er dan achter plakken in de css, maar dan met een 2 achter de benamingen (en de bijbehorende benamingen in header.php en 'nav' en 'options'-bestanden dan ook wijzigen, met die 2 erachter, zodat er meer verschil is tussen de menu's).
Maar niks lukt. En wat voor nummers zouden die id's dan moeten hebben? Waar vind ik dat? Helaas is het woord 'id' lastig op te zoeken in mijn code, met een programma zoals Grep, omdat het zo'n kort woordje is. Anders had ik meteen gevonden in welke bestanden het voor komt.
De originele versie van Virtue staat iig hier (is een gratis thema, zo te downloaden). --> https://nl.wordpress.org/themes/virtue/
Maar niks lukt. En wat voor nummers zouden die id's dan moeten hebben? Waar vind ik dat? Helaas is het woord 'id' lastig op te zoeken in mijn code, met een programma zoals Grep, omdat het zo'n kort woordje is. Anders had ik meteen gevonden in welke bestanden het voor komt.
De originele versie van Virtue staat iig hier (is een gratis thema, zo te downloaden). --> https://nl.wordpress.org/themes/virtue/
Ben even aan het teste in Firefox, maar het lijkt allemaal te werken?quote:Op zondag 12 februari 2017 21:43 schreef female81 het volgende:
Tja, ik heb al zo veel geprobeerd. Zoals kopieën maken van de oorspronkelijke code, van het originele menu, in de css, en die er dan achter plakken in de css, maar dan met een 2 achter de benamingen (en de bijbehorende benamingen in header.php en 'nav' en 'options'-bestanden dan ook wijzigen, met die 2 erachter, zodat er meer verschil is tussen de menu's).
Maar niks lukt. En wat voor nummers zouden die id's dan moeten hebben? Waar vind ik dat? Helaas is het woord 'id' lastig op te zoeken in mijn code, met een programma zoals Grep, omdat het zo'n kort woordje is. Anders had ik meteen gevonden in welke bestanden het voor komt.
De originele versie van Virtue staat iig hier (is een gratis thema, zo te downloaden). --> https://nl.wordpress.org/themes/virtue/
Ik heb het inmiddels opgegeven en weer een ander thema erop gezet, een van de weinige die van zichzelf een dubbel menu heeft - en dan een dubbel menu waarbij bij béiden een mobiele variant gekoppeld zit, niet alleen bij het 'primary menu'.
Dat is dus wat je ziet.
Alleen had dat andere een uitgebreid edit-paneel waarmee je ongeveer 1001 dingen met een paar klikjes aan kon passen (o.k., hetgene uit dit topic dan weer niet...), en moet bij dit thema minstens 80% in de CSS-file gebeuren. T'is niet anders. Het scheelt dat ik niet volledig groen ben op dit vlak, en altijd al veel in de CSS van m'n thema's heb gerommeld.
[ Bericht 9% gewijzigd door #ANONIEM op 13-02-2017 10:25:31 ]
Dat is dus wat je ziet.
Alleen had dat andere een uitgebreid edit-paneel waarmee je ongeveer 1001 dingen met een paar klikjes aan kon passen (o.k., hetgene uit dit topic dan weer niet...), en moet bij dit thema minstens 80% in de CSS-file gebeuren. T'is niet anders. Het scheelt dat ik niet volledig groen ben op dit vlak, en altijd al veel in de CSS van m'n thema's heb gerommeld.
[ Bericht 9% gewijzigd door #ANONIEM op 13-02-2017 10:25:31 ]
...maar toch nog een vraag aan mensen die er toch wat meer van weten dan ikzelf.
M'n oude thema had Google-fonts en zelf geplaatste fonts, en dat zag er in het css-bestand (een 'oldschool' reguliere variant) zo uit:
@import url(//fonts.googleapis.com/css?family=Boogaloo:200,300,400);
@font-face {
font-family: 'Bebas Neue';
src: url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.eot'); /* IE9 Compat Modes */
src: url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.woff') format('woff'), /* Modern Browsers */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.woff2') format('woff2'), /* Modern Browsers */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: light, bold;
font-style: normal;
}
-------------------------------------------------------------------------
Maar in het thema waar ik nu mee bezig ben is het css-bestand zo'n (als je hem in een editor opent) één-regelige variant waarin ik alles moet doen. Dan zal het anders ingevuld moeten worden. Hoe vertaal ik de code hierboven zodanig dat het in een dergelijk css-bestand goed werkt?
Dit is dat bestand: https://www.wwzapper.com/style.min.css
[ Bericht 2% gewijzigd door #ANONIEM op 13-02-2017 10:38:40 ]
M'n oude thema had Google-fonts en zelf geplaatste fonts, en dat zag er in het css-bestand (een 'oldschool' reguliere variant) zo uit:
@import url(//fonts.googleapis.com/css?family=Boogaloo:200,300,400);
@font-face {
font-family: 'Bebas Neue';
src: url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.eot'); /* IE9 Compat Modes */
src: url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.woff') format('woff'), /* Modern Browsers */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.woff2') format('woff2'), /* Modern Browsers */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: light, bold;
font-style: normal;
}
-------------------------------------------------------------------------
Maar in het thema waar ik nu mee bezig ben is het css-bestand zo'n (als je hem in een editor opent) één-regelige variant waarin ik alles moet doen. Dan zal het anders ingevuld moeten worden. Hoe vertaal ik de code hierboven zodanig dat het in een dergelijk css-bestand goed werkt?
Dit is dat bestand: https://www.wwzapper.com/style.min.css
[ Bericht 2% gewijzigd door #ANONIEM op 13-02-2017 10:38:40 ]
Niet. Althans dit raad ik af.quote:
...maar toch nog een vraag aan mensen die er toch wat meer van weten dan ikzelf.
M'n oude thema had Google-fonts en zelf geplaatste fonts, en dat zag er in het css-bestand (een 'oldschool' reguliere variant) zo uit:
@import url(//fonts.googleapis.com/css?family=Boogaloo:200,300,400);
@font-face {
font-family: 'Bebas Neue';
src: url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.eot'); /* IE9 Compat Modes */
src: url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.woff') format('woff'), /* Modern Browsers */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.woff2') format('woff2'), /* Modern Browsers */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.wwzapper.com/wp-content/themes/Wordie/fonts/bebasneue_bold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: light, bold;
font-style: normal;
}
-------------------------------------------------------------------------
Maar in het thema waar ik nu mee bezig ben is het css-bestand zo'n (als je hem in een editor opent) één-regelige variant waarin ik alles moet doen. Dan zal het anders ingevuld moeten worden. Hoe vertaal ik de code hierboven zodanig dat het in een dergelijk css-bestand goed werkt?
Dit is dat bestand: https://www.wwzapper.com/style.min.css
Je hebt op dit moment in je Wordpress ergens ingesteld dat hij minified files moet gebruiken voor je website.
Deze optie zou ik eerst uitzetten, dat je weer normale CSS files hebt welke je kunt editen.
Minifyen probeert hij al je CSS / Java e.d in 1 file te pompen, zodat de clientbrowser niet teveel verschillende files moet downloaden. M.a.w. dit zet je eigenlijk pas aan, nadat de website helemaal af is en hij in productie gaat.
Helaas weet ik in Wordpress niet precies waar je dit kunt instellen. Dit kan ook een aparte plugin zijn waarin dit aanstaat.
Die minified files zijn iig nieuw voor me. In elk thema dat ik probeer, blijken deze te zitten. Ik heb de optie in Wordpress nergens zien staan.
M'n oude site komt uit 2014, en ik heb het idee dat ze toen nog niet zo de norm waren als nu. Iig kwam ik ze destijds niet tegen in de diverse thema's die ik toen uitgeprobeerd heb.
[ Bericht 0% gewijzigd door #ANONIEM op 13-02-2017 10:49:53 ]
M'n oude site komt uit 2014, en ik heb het idee dat ze toen nog niet zo de norm waren als nu. Iig kwam ik ze destijds niet tegen in de diverse thema's die ik toen uitgeprobeerd heb.
[ Bericht 0% gewijzigd door #ANONIEM op 13-02-2017 10:49:53 ]
|
|
