CSS vraag: wordpress-site + plugin

Status
Niet open voor verdere reacties.
pewie37

pewie37

Gebruiker
Lid geworden
2 sep 2007
Berichten
506
Beste forummers,

Hoe krijg ik de stylesheet van de nieuwsbrief-widget hetzelfde als die van de website ?
Het gaat om DEZE website (zie voetregel), en DEZE plugin.

Dank jullie wel weer.
 
Ja die kende ik wel, maar staat alleen uitleg over de te versturen nieuwsbrief zelf, niets over de widget.
 
Laatst bewerkt:
Hoi pewie37,
Ik bedoelde: ik heb geen verstand van Wordpress cq. de Knews-plugin-widget, dus kan er verder niets zinnigs over zeggen.
Te hopen dat er een helpmij'er is die dat wel kan!

Met vriendelijke groet,
CSShunter
 
Waarom moet de widget in het thema van de site komen? Of bedoel je dat de optin van de nieuwsbrief niet goed wordt weergegeven?
 
Ik zou eigenlijk gewoon willen dat de nieuwsbrief-widget meer "thuis hoort" in de site.
Geen gezicht nu (zie bijlage).

Dus een stylesheet-sausje van de website over de widget :D

voetregel.JPG
 
Ja klopt, en in opera is het helemaal niet om aan te zien. Zie hieronder.
cimera_foot.png


Heb de plugin ook even geïnstalleerd in mijn wordpress test omgeving, en kreeg hetzelfde resultaat
 
Oho, nu begrijp ik wat je bedoelt! :)
Dan is het gewoon op te lossen door wat extra css te stoppen in één van de 7500 stylesheets die Wordpress er in heeft gezet, of bijplaatsen in het style-blok in de head van de pagina. Dat gaat dan de bestaande css overrulen.
Bijvoorbeeld:
Code: 
#footer {
    background: transparent !important;
}
#footer .header,
#footer label,
#footer .textwidget,
#footer .i-l,
#footer .dt_captcha {
    color: black !important;
}

#footer a,
#footer a.do-clear{
    color: #E0583D !important;
}
#footer .knews_add_user input {
    margin-bottom: 15px;
}
Met vriendelijke groet,
CSShunter
 
Nu begrijp ik jouw maar gedeeltelijk :d

Ik moet toch in de widget een sylesheet aanroepen die ook voor het naastgelegen contactformulier word gebruikt, toch ?
Maar hoe vind ik de stylesheet die ik moet hebben, en waar plaats ik die verwijzing dan in de code van de widget ?

(voor de code) Beide links reeds in dit draadje aanwezig
 
Wilde net een testpagina invoegen toen ik dit las. ;)



Het resultaat van alle widget-operaties is, dat er een #footer onderaan de pagina staat, met allerlei opgegeven #footer-styles.
Die zullen ingebakken zitten in een widget-stylesheet (niet naar gekeken waar, want Firefox loopt door alle toeters & bellen op de pagina vast als ik de stylesheets opvraag via de Webdeveloper Toolbar).
Maar van bestaande stylesheets hoef je je niets aan te trekken.

Met Firebug kan je nl. zien hoe de onderdelen van de #footer heten die aangepast moeten worden, en met de !important kreet in de css geef je voorrang aan de eigen styles, wat verder waar ook in een stylesheet mag staan. *)

Dus kan je de aanpassingen gewoon in het styleblok in de <head> zetten zoals ik ook heb gedaan.
  • Ze zouden dus ook in een bestaand stylesheet opgenomen kunnen worden.

Hup 2-3, knats, snel er dwars overheen! :D

Met vriendelijke groet,
CSShunter
_____________
*) Voor de input-vakjes en de verzendknop voor de nieuwsbrief-opgave bleek elders geen margin-bottom te staan. Dit kan dus gewoon toegevoegd worden zonder !important, zodat er wat ruimte tussen komt.
 
Poh, jij onderschat jezelf.
Je had al naar "beterweters" gevraagd :D
Klasse dat jij dat zo even uit de lossen hand doet :thumb:RESPECT:thumb:

Ik ga er vanavond nog mee aan de slag.
Thank you so much . . .(4 now) :D
 
Hoi pewie37,
Je had al naar "beterweters" gevraagd :D
Klik om te vergroten...
Jawel, maar dat was toen ik nog dacht dat je iets in het widget-gebeuren zelf wilde laten plaatsvinden, waarvan je de configuratie niet van buiten af kunt zien/wijzigen. ;)

Als iets in de styles van een opgeleverde html-pagina moet veranderen, ligt het anders: dan is alles bekend en is het in principe een koud kunstje om dat aan te pakken / te overrulen. Dan spelen er nog maar 2 dingen:


  1. Waar zitten de elementen die aangepakt moeten worden?
    > Dat vertelt Firebug meteen, daar hoef je niet vreselijk voor te gaan zitten zoeken.
    (rechtsklikken en "Element inspecteren met Firebug", dan zit je meteen op de goede plaats in de elementen-stamboom)

  2. Zijn de aan te pakken elementen voorzien van goede aanknopingspunten? Dwz. een id of class of css-trappetje waarmee het element bij zijn lurven gepakt kan worden?
    > Dat kan je ook zo uit Firebug aflezen.
    En zijn die aanknopingspunten uniek voor het te grijpen element?
    > Zo ja, dan is het makkie.
    > Zo nee, dan moet er (a) eventueel een correctie voor andere elementen plaatsvinden (als dat mogelijk is); of (b) anders moet behalve in de css ook nog in de html ingegrepen worden om een unieke identificatie te creëren, wat in geval van Wordpress wel eens pittig gecompliceerd kan zijn.

Ondanks de (niet-unieke) classes die in WP en andere CMS'sen veelvuldig gebruikt worden, was het hier makkie en gelukkig niet nodig de html in te duiken.
En met Firebug kan je meteen even proberen of het goed gaat.

Zo kan je met vaste hand snel de losse pols besturen! :)

Groetjes van de afdeling HoeDoenWeDatInDeKeuken,
CSShunter
 
Laatst bewerkt:
Mooie uitleg. Heb firebug geïnstalleerd en zie wel een hoop classes staan, maar . . . . . ?
Kom nog geen steek verder :shocked: :D

Denk dat je nu wel kunt firebug'n
Had een re-muistoets blokkade staan.
 
Laatst bewerkt:
Hoi pewie37,
Kan je in Wordpress iets toevoegen in de <head> van alle pagina's?
Of: kan je de css-bestanden die er in staan bereiken (en openen)?

Met vriendelijke groet,
CSShunter
 
Kun je met een hier iets mee ?
(weet niet of dat voor alle pagina's geld)

Knipsel.JPG
 
Laatst bewerkt:
Ja, het vakje "Additional Page Headers" schijnt voor alle pagina's te gebruiken te zijn (zie deze).

Als je in dat vakje dit invult ...
HTML: 
<style type="text/css">
#footer {
    background: transparent !important;
}
#footer .header,
#footer label,
#footer .textwidget,
#footer .i-l,
#footer .dt_captcha {
    color: black !important;
}
#footer a,
#footer a.do-clear{
    color: #E0583D !important;
}
#footer .knews_add_user input {
    margin-bottom: 15px;
}
</style>
... gebeurt er dan iets wat in de buurt komt?
En anders gauw weer wissen. ;)
 
Inderdaad.
Nu de achtergrond nog terug, het knopje en de velden in dezelfde stijl :d
 
Alles is gelukt.
Alleen dat ... knopje nog :o
1 regeltje lager en in het (gradient)paars kleuren
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan