HEAD file niet okee?

femke98 · 7 jan 2013

Oei.....................dit gaat echt mijn pet te boven, als ik heel eerlijk ben.

De uitgeklapte vind ik wel een optie, ware het niet dat het inderdaad vrij lang wordt.
De tweede optie is even wennen, maar hoe meer ik het zie, hoe mooier het wordt. hahaha.

Nu de vraag, hoe krijg ik het zo?

Dan over dat "xoxo", daar begrijp ik niet zoveel van wat je bedoelt, want de linken helemaal onderaan, daar is hier niets mis mee, ik zie niet dat het over de volle breedte aanklikbaar is, of ik moet het dus niet begrijpen.
En de tikfoutjes ga ik veranderen!

Jonge, wat ben jij goed!

ps. dit is alleen van toepassing op de hoofdpagina, als je dus de vorige berichten gaat bekijken, dan krijg je toch weer die accordion zoals hij werkelijk is. Wordt het dan niet verwarrend en slordig?

csshunter · 7 jan 2013

Hoi Femke,
Ja, ik moest zelf ook even wennen, en ging af en toe nog eens kijken naar het verschil met de oude accordeonspeler.

Nu de vraag, hoe krijg ik het zo?

Dat is in principe eenvoudig.
Je neemt een al bestaand stylesheet dat op de pagina gebruikt wordt, en daar voeg je na de laatste regel de code toe die ik in de <head> van de testpagina heb staan:

Code:

/* ================== nieuwe accordion-styles ================== */
#accordion li {
	position: relative;
	}
#accordion li:hover a {
	background: #E6E6E6 url(http://femke98.bouke-blog.nl/blog/wp-content/themes/color-shading/lib/images/post.png) no-repeat 10px 9px;
	color: black !important;
	border-radius: 5px;
	}
#accordion li:first-child:hover a {
	background-position: 10px 8px;
	}
#accordion p {
	position: absolute;
	bottom: 85px;
	left: 150px;
	background: #E6E6E6;
	border-radius: 5px;
	font-size: .9em;
	z-index: 600;
	margin-bottom: -19px;
	}
#accordion li:first-child p {
	bottom: 60px;
	}
#accordion p span {
	padding: 15px !important;
	color: black !important;
	}
#accordion p:after { /* verbindingslijntje */
	display: inline-block;
	content: "";
	width: 3px;
	height: 40px;
	background: #A0A0A0;
	position: absolute;
	right: 25px;
	}
#accordion li:first-child p:after  {
	height: 15px;
	}

.xoxo a {
	display: block; /* hele breedte list-item aanklikbaar */
	}

En ook in de praktijk is het makkelijk: we hadden om het CMS te plezieren al een prachtige lege mystyle.css gemaakt, met alleen /* mooi niks ! */ er in.

Die komt nu goed van pas: daar plak je de css in, en klaar!

Hiermee is vanzelf in orde dat de vervolgpagina's hetzelfde gaan doen als de homepage, want die gebruiken ook allemaal dezelfde mystyle.css. PS'je dus ook geregeld: hoppa!

=======
De xoxo!
Wat ik bedoelde was dit. Als je nu met de muis over het rijtje links gaat, zie je bv. dit als je over De Vrije PC strook hovert:

Het strookje licht wel iets op, dus je ziet dat je op de goede zit. Maar waar het pijltje staat, kan je niet klikken om de link te bezoeken.
Het eigenlijke klik-gebied, de link zelf, is maar heel klein:

Alleen op de tekst "De Vrije PC" verschijnt het klik-handje, en alleen daar kan geklikt worden. De rest van de strook is daarvoor onbruikbaar.

=======

Als je nu .xoxo a { display: block } in de css opneemt, krijgt de link een block-karakter, dwz. gaat de hele ruimte van z'n parent-element (= het list-item = de strook over de volle hoogte en de volle breedte) innemen.
Dan komt het handje ook tevoorschijn in de rest van de strook, en niet alleen de link-tekst is aan klikbaar, maar de hele strook: het is een soortement knop geworden:

Op deze manier hoeft de bezoeker/ster niet steeds naar links op de items om te klikken, en naar rechts om goed te kunnen lezen wat er in de tekst staat. Als je nu aan de rechterkant blijft, kan je gewoon van boven naar beneden hovereren en toch klikken, terwijl het handje niet voor de teksten komt te staan. Makkelijker en gebruiksvriendelijker.

Met vriendelijke groet,
CSShunter

femke98 · 7 jan 2013

Okee, dat is duidelijk van die xoxo, maar vind het niet zo belangrijk, om heel eerlijk te zijn! en ziet wel dat je op de tekst moet klikken om er te komen,.

Maar ik begrijp het verder niet helemaal,

Je neemt een al bestaand stylesheet dat op de pagina gebruikt wordt, en daar voeg je na de laatste regel de code toe die ik in de <head> van de testpagina heb staan:

de head van de testpagina is wat je in code hebt gezet.

Maar wat moet ik dan in die mystyle.css zetten?

csshunter · 7 jan 2013

Precies dat! Hier istie: mystyle.css (downloaden maar!)
En dan even uploaden naar je mapje /blog/wp-content/themes/color-shading/mystyle.css
Wat ik in de demo in de head heb gezet, is dan overbodig: in jouw pagina's hoeft dat er niet in; die blijven gewoon zoals ze zijn.

Succes!
CSShunter

femke98 · 7 jan 2013

Ik kan in DirectADmin gewoon de file openen en dan wat jij gemaakt hebt, daarin zetten en opslaan. Hoef dus niet te uploaden. Makkelijk toch.
Ik ga het morgen eens uitproberen en dan eens kijken hoe het is.
Ben zeer benieuwd, gaat het verkeerd dan weet ik wat ik moet doen, de file terug brengen naar hoe hij nu nog is.
Je hoort weer van me, alvast hartelijk dank weer voor je hulp!

csshunter · 7 jan 2013

... kan in DirectAdmin ...

Ja natuurlijk, ik vergeet helemaal dat je met Wordpress online werkt; dus je hoeft niet apart bestanden te uploaden. *

Ben benieuwd!
CSShunter
_________
* Met een klein sterretje: op het moment dat je via DirectAdmin iets in een pagina of ander bestand plakt, ben je stiekem toch aan het uploaden.

femke98 · 8 jan 2013

Okee, gedaan.
Maar wat valt mij op? Opeens is er ook nog een gele tekst bij gekomen die aangeeft dat er een permalink is.
Maar dat hadden we eerst niet toch bij de test file die je had gemaakt?

Verder werkt het wel en zijn de linken onderin ook beter nu. Het wordt steeds mooier!

csshunter · 9 jan 2013

Hoi femke,
Het is merkwaardig, maar de permalink-melding in een gele tooltip als je over een item-kop hovert ... zal er al in.

Niet alleen in mijn testpagina, maar ook al in je oude versie!
Waarschijnlijk valt ie je nu meer op, omdat het geweld van de vroeger uitrollende accordeons (op ongeveer dezelfde plaats) nu achterwege blijft.

Het ding wordt er nl. automatisch als title="..." door Wordpress in gezet. In de index.php die je liet zien, staat o.a. de opdracht:

PHP:

<a href="<?php the_permalink(); ?>" 
     rel="bookmark" 
     title="<?php _e('Permanent Link to') ?> <?php the_title_attribute(); ?>">

D.w.z.: in de eerste regel wordt de URL van de permalink toegevoegd.
In de derde regel wordt eerst het voorvoegsel 'Permanent Link to' in het <title> attribuut van het item gezet, dan een spatie, en daarachter de naam van het item.

Met vriendelijke groet,
CSShunter

femke98 · 9 jan 2013

Aha, en die kan ik niet verwijderen toevallig? Want nu heb je dus eigenlijk 2 meldingen op 1 bericht.
In de index.php kan ik ook dingen veranderen als het moet, dus bedacht ik mij dat je dit dan wel kan verwijderen. Of niet?

En kan je eigenlijk in elk thema wat je neemt, zo'n mystyle.css file maken en dus uploaden naar de files? Niet dat ik dat wil, maar ben nieuwsgierig.

csshunter · 9 jan 2013

die kan ik niet verwijderen toevallig?

Ja, daar zat ik ook al aan te denken. Aan de andere kant is het wel een link waar je op kunt klikken: als je de hele tooltip weglaat zou iemand misschien kunnen denken dat het hover-zinnetje dat er boven komt het enige is.

Maar je kunt in elk geval de herhaling van de titel er uit halen, en je kunt ook 'Permalink to' vervangen door iets anders, want dat klinkt nogal gekunsteld. - En ik moet bij 'permalink' altijd denken aan 'permafrost'.

Wat je zou kunnen doen in de index.php:

PHP:

...
<a href="<?php the_permalink(); ?>" 
     rel="bookmark" 
     title="<?php _e('Naar dit artikel') ?>">
<?php the_title(); ?>
<span>... enz.

Dan wordt het dit:

Dat oogt al een stuk begrijpelijker dan het perma-gedoe (en is ook prettig korter).

Eventueel zou je ook nog het rel="bookmark" moeten schrappen; of dat nodig is kan ik van hieruit niet zien; en of er nadelige consequenties voor de rest van het Wordpress-CMS aan vast zitten, weet ik ook niet: dus laten staan lijkt mij het handigst.
Eventueel zou er ook nog in een andere php-bestand hetzelfde gedaan moeten worden; ik weet niet of deze index.php voor alle pagina's gebruikt wordt (misschien hebben vervolg-pagina's een eigen php-bestand met wat andere instructies).

Je kunt ook van de gelegenheid gebruik maken om het Engels en de Engelse datum-notatie er uit te halen.

Met:

PHP:

...
<?php the_title(); ?>
<span><?php _e('Gepubliceerd:'); ?> <?php the_time('j F Y') ?> - Auteur: <?php the_author(); ?> - Rubriek: <?php $category = get_the_category(); if(!empty($category)) echo $category[0]->cat_name; ?></span>

... zou het dit moeten opleveren:

=======

... kan je eigenlijk in elk thema wat je neemt, zo'n mystyle.css file maken?

Eerlijk gezegd: geen flauw idee! Het zou in het Wordpress-systeem zelf kunnen zitten, maar het zou ook via een thema-onderdeel geregeld kunnen zijn. Dan zou het bij een ander thema ook anders kunnen heten (bv. "additionalStyles.css"), of het zou er helemaal niet kunnen zijn (wat niet zo praktisch zou zijn voor het "customiseren").
Jammer, je nieuwsgierigheid mag je nog even vasthouden tot hier iemand langs komt de alle ins en out van Wordpress kent.

Met vriendelijke groet,
CSShunter

femke98 · 10 jan 2013

In de index.php van het thema moet ik dan zijn, maar er veranderd niets.

Hier de index.php

Code:

<?php get_header(); ?>
			<div id="gray-shading" class="container">
				<div class="padding">
					
					<div id="accordion-wrapper">
						<ul id="accordion"><?php $i = 1; ?>
                          <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
							<li <?php if($i == 1) post_class('first element'); else post_class('element'); $i++; ?>>
								<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php _e('naar artikel') ?> "><span><?php _e('Gepubliceerd:'); ?> <?php the_time('j F Y') ?> - Auteur: <?php the_author(); ?> - Rubriek: <?php $category = get_the_category(); if(!empty($category)) echo $category[0]->cat_name; ?></span>
									<span><?php echo strip_tags(get_the_excerpt()); ?></span>
								</p>
							</li>
							<?php endwhile; ?>
						</ul>
        <div class="navigation">
		  <?php if(function_exists('wp_pagenavi')) : wp_pagenavi();
            elseif (  $wp_query->max_num_pages > 1 ) : ?>
              <div class="left"><?php previous_posts_link('<span>'.__('&laquo; Previous Page').'</span>') ?></div>
              <div class="right"><?php next_posts_link('<span>'.__('Next Page &raquo;').'</span>') ?></div>
            <?php endif; ?>
        </div>
        <?php else: ?>
          <h2 class="center"><?php _e('No Entries Found') ?></h2>
          <p class="center"><?php _e('There are no entries in this blog.') ?></p>
      <?php endif; ?>
					</div>
					
				</div>
                
<?php get_sidebar(); ?>
			</div>
			
            
<?php get_footer(); ?>

edit: er veranderd wel degelijk iets, er komt nu te staan: naar artikel en de toch de titel van het bericht erachter en dat heb jij niet in je voorbeeld.

Edit 2: er gebeurd nu iets heel raars, en zonder die streep er doorheen was dit wel helemaal mooi, want de accordion doet zijn werk niet meer. hahahaha.

Edit 3: zoals het nu is, is het helemaal prachtig! hahahaha, helemaal geen accordion meer.
Ik had de file terug gezet omdat het natuurlijk geen gezicht was, nu is de index.php zo:

Code:

<?php get_header(); ?>
			<div id="gray-shading" class="container">
				<div class="padding">
					
					<div id="accordion-wrapper">
						<ul id="accordion"><?php $i = 1; ?>
                          <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
							<li <?php if($i == 1) post_class('first element'); else post_class('element'); $i++; ?>>
								<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php _e('naar artikel') ?> <?php the_title_attribute(); ?>"><?php the_title(); ?><span><?php _e('Written'); ?> <?php the_time('F j, Y') ?> by <?php the_author(); ?> under <?php $category = get_the_category(); if(!empty($category)) echo $category[0]->cat_name; ?></span></a>
									<span><?php echo strip_tags(get_the_excerpt()); ?></span>
								</p>
							</li>
							<?php endwhile; ?>
						</ul>
        <div class="navigation">
		  <?php if(function_exists('wp_pagenavi')) : wp_pagenavi();
            elseif (  $wp_query->max_num_pages > 1 ) : ?>
              <div class="left"><?php previous_posts_link('<span>'.__('&laquo; Previous Page').'</span>') ?></div>
              <div class="right"><?php next_posts_link('<span>'.__('Next Page &raquo;').'</span>') ?></div>
            <?php endif; ?>
        </div>
        <?php else: ?>
          <h2 class="center"><?php _e('No Entries Found') ?></h2>
          <p class="center"><?php _e('There are no entries in this blog.') ?></p>
      <?php endif; ?>
					</div>
					
				</div>
                
<?php get_sidebar(); ?>
			</div>
			
            
<?php get_footer(); ?>

geen idee waarom de accordion nu niet meer werkt, maar is het erg? Ik dacht van niet, of jij moet iets zien wat toch niet goed is. Je leest een klein stukje nu van het bericht. Hoe het komt, beats me! maar het is wel mooi zo, dacht ik.
Er zit 1 maar aan; de website is weer zo traag als st***t.

csshunter · 10 jan 2013

Accordion lek
Ja, ik zie wat.

In de index.php staat nu (in beide versies van hierboven):

PHP:

...
        <span><?php echo strip_tags(get_the_excerpt()); ?></span>
</p>

Dat moet zijn:

PHP:

...
        <p><span><?php echo strip_tags(get_the_excerpt()); ?></span>
</p>

Het ontbreken van de start (voor alle momenteel 11 items op de homepage) heeft 3 gevolgen:

De css ziet geen , kan de styles voor de op deze plaats niet toepassen (zoals de {display:none}; ook een hover op de kop erboven doet niets), en zet het regeltje dan maar meteen onder de kop.
Het accordion-javascript ziet geen , kan de niet harmonika'en, en de accordion doet niks.
De html-validator ziet wel wat: 11 eind 's zonder begin.

Lange titel toch terug
Voor het weglaten van de lange titel kan je proberen het bookmark-attribuut er uit te halen, dus niet:

PHP:

...
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php _e('naar artikel') ?> ">

maar:

PHP:

...
<a href="<?php the_permalink(); ?>" title="<?php _e('naar artikel') ?> ">

of anders:

PHP:

...
<a href="<?php the_permalink(); ?>" rel="bookmark" title="naar artikel">

of anders:

PHP:

...
<a href="<?php the_permalink(); ?>" title="naar artikel">

Dan is er voor Wordpress geen aanleiding om toch iets met de lange naam in de tooltip te gaan zetten.

Dat het in mijn voorbeeld-screenshotje toch lijkt te werken, komt omdat de resultaat-teksten van de items buiten jouw Wordpress-systeem om gaan: er werd in m'n achterliggende testpagina helemaal geen php gebruikt (ik had het oude Wordpress-resultaat via Firebug achteraf aangepast).

Traagheid
Hé, daar heb ik niet over te klagen. De homepage komt (bij lege cache) behoorlijk vlot tevoorschijn, en de rest komt daar rap achteraan. Misschien een tijdelijk dipje bij je provider, of een browser die moeite heeft met de ontbrekende 's. Je weet maar nooit.

Met vriendelijke groet,
CSShunter
_____________
PS
O, vergeet ik nog. Op de pagina femke98.bouke-blog.nl/blog/windowslinux-programma-alternatieven/ wordt als Dreamweaver-alternatief o.a. NVU genoemd. Maar NVU heeft als laatste versie 1.0, en wordt sinds 2005 niet meer onderhouden. De opvolger is KompoZer, die ook in het rijtje staat en wel wordt bijgehouden, dus NVU kan er gewoon uit.

femke98 · 11 jan 2013

Code:

<p>
									<span><?php echo strip_tags(get_the_excerpt()); ?></span>

er staat wel degelijk een voor maar dan op de regel daarboven. Ik dacht dat dit automatisch goed gezien werd?

Zo niet, en dat blijkt dus, moet ik die regel even verzetten.

Maar.....hoe vind jij het zo, hoe het nu is dan, zonder die accordion? Is toch veel rustiger?

En ja, er zijn meer linken die niet helemaal okee zijn, dat moet ik nog allemaal doorlopen. Bedankt weer,!!

edit: traagheid is hier ook niet meer van toepassing.

csshunter · 12 jan 2013

er staat wel degelijk een voor

Zo stond het niet in je eerdere posts.

Maar op die manier zou ie het toch ook moeten doen (als er in de regel van de verder niets staat). Misschien een net niet gebruikte of geupdate versie geweest?

=======

Hoe vind jij het zo, hoe het nu is dan, zonder die accordion? Is toch veel rustiger?

Best wel! En zonder die eerdere erg grote letterformaten van de intro's blijft de pagina overzichtelijk en wordt niet te lang.
Je zou het misschien nog iets mooier kunnen maken door de tekst onder de item-kop te laten uitlijnen, en de tekst samen met de kop hoverbaar/klikbaar te maken: dan is het meer een eenheid, en hoef je als bezoeker ook niet eerst omhoog naar de item-kop om te klikken voor het verder lezen.
Zoiets:

Als ik het wel heb, zou dat gerealiseerd moeten kunnen worden met als css:

Code:

#accordion-wrapper #accordion li a {
    padding: 6px 10px 6px 52px;
    font-weight: bold;
    }
#accordion .intro {
    border-top: 1px dotted #5A5A5A;
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 0.7em;
    margin-top: 8px;
    padding: 5px 0;
    font-weight: normal;
    }

En dan als php:

PHP:

<li <?php if($i == 1) post_class('first element'); else post_class('element'); $i++; ?>>
    <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php _e('naar artikel') ?>"><?php the_title(); ?>
        <span><?php _e('Written'); ?> <?php the_time('F j, Y') ?> by <?php the_author(); ?> 
            under <?php $category = get_the_category(); if(!empty($category)) echo $category[0]->cat_name; ?></span>
        <span class="intro"><?php echo strip_tags(get_the_excerpt()); ?></span>
    </a>
</li>

Of in een NL-versie, met zonder artikel-naam in de tooltip:

PHP:

<li <?php if($i == 1) post_class('first element'); else post_class('element'); $i++; ?>>
    <a href="<?php the_permalink(); ?>" title="<?php _e('naar artikel') ?>"><?php the_title(); ?>
        <span><?php _e('Gepubliceerd:'); ?> <?php the_time('j F Y') ?> - Auteur: <?php the_author(); ?> - 
            Rubriek: <?php $category = get_the_category(); if(!empty($category)) echo $category[0]->cat_name; ?></span>
        <span class="intro"><?php echo strip_tags(get_the_excerpt()); ?></span>
    </a>
</li>

Idee?

femke98 · 12 jan 2013

Hé, wat gek! Dat die niet te zien is in mijn eerdere posts! En nee, geen update geweest. Hm....

En als ik het god begrip, gaat de css dus in mijn mystyle.css
Moet ik wel goed kijken waar ik dat neerzet.

De php gaat in de file die ik eerder hier heb neergezet? Geldt hier hetzelfde voor, even kijken waar ik dat neer moet zetten.

femke98 · 12 jan 2013

Voor alle duidelijkheid is de index.php nu zo

Code:

<?php get_header(); ?>
			<div id="gray-shading" class="container">
				<div class="padding">
					
					<div id="accordion-wrapper">
						<ul id="accordion"><?php $i = 1; ?>
                          <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
							<li <?php if($i == 1) post_class('first element'); else post_class('element'); $i++; ?>>
								<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php _e('naar artikel') ?> <?php the_title_attribute(); ?>"><?php the_title(); ?><span><?php _e('Written'); ?> <?php the_time('F j, Y') ?> by <?php the_author(); ?> under <?php $category = get_the_category(); if(!empty($category)) echo $category[0]->cat_name; ?></span></a>
									<span><?php echo strip_tags(get_the_excerpt()); ?></span>
								</p>
							</li>
							<?php endwhile; ?>
						</ul>
        <div class="navigation">
		  <?php if(function_exists('wp_pagenavi')) : wp_pagenavi();
            elseif (  $wp_query->max_num_pages > 1 ) : ?>
              <div class="left"><?php previous_posts_link('<span>'.__('&laquo; Previous Page').'</span>') ?></div>
              <div class="right"><?php next_posts_link('<span>'.__('Next Page &raquo;').'</span>') ?></div>
            <?php endif; ?>
        </div>
        <?php else: ?>
          <h2 class="center"><?php _e('No Entries Found') ?></h2>
          <p class="center"><?php _e('There are no entries in this blog.') ?></p>
      <?php endif; ?>
					</div>
					
				</div>
                
<?php get_sidebar(); ?>
			</div>
			
            
<?php get_footer(); ?>

dus waar zou dan dat van jou moeten komen?

De mystyle.css is nu zo:

Code:

/* mystyle.css */
#accordion li {
	position: relative;
	}
#accordion li:hover a {
	background: #E6E6E6 url(http://femke98.bouke-blog.nl/blog/wp-content/themes/color-shading/lib/images/post.png) no-repeat 10px 9px;
	color: black !important;
	border-radius: 5px;
	}
#accordion li:first-child:hover a {
	background-position: 10px 8px;
	}
#accordion p {
	position: absolute;
	bottom: 85px;
	left: 150px;
	background: #E6E6E6;
	border-radius: 5px;
	font-size: .9em;
	z-index: 600;
	margin-bottom: -19px;
	}
#accordion li:first-child p {
	bottom: 60px;
	}
#accordion p span {
	padding: 15px !important;
	color: black !important;
	}
#accordion p:after { /* verbindingslijntje */
    display: inline-block;
    content: "";
    width: 3px;
    height: 40px;
    background: #A0A0A0;
	position: absolute;
	right: 25px;
	}
#accordion li:first-child p:after  {
    height: 15px;
    }

.xoxo a {
	display: block; /* hele breedte list-item aanklikbaar */
	}

en als ik de css van jou ervoor zet, dan veranderd er niets. Dus vandaar mijn vraag waar het nu precies moet komen.

csshunter · 12 jan 2013

In de php moet het ingebouwd worden waar de <li>'s worden opgehaald, dwz hier:

Code:

<?php get_header(); ?>
			<div id="gray-shading" class="container">
				<div class="padding">
					
					<div id="accordion-wrapper">
						<ul id="accordion"><?php $i = 1; ?>
                          <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
							[COLOR="#B22222"]<li <?php if($i == 1) post_class('first element'); else post_class('element'); $i++; ?>>
								<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php _e('naar artikel') ?> <?php the_title_attribute(); ?>"><?php the_title(); ?><span><?php _e('Written'); ?> <?php the_time('F j, Y') ?> by <?php the_author(); ?> under <?php $category = get_the_category(); if(!empty($category)) echo $category[0]->cat_name; ?></span></a>
									<span><?php echo strip_tags(get_the_excerpt()); ?></span>
								</p>
							</li>[/COLOR]
							<?php endwhile; ?>
						</ul>
        <div class="navigation">
        ... enz.

En dan zou het moeten worden (met mijn laatste NL-versie en wat minder slordige inspringingen dan Wordpress):

Code:

<?php get_header(); ?>
			<div id="gray-shading" class="container">
				<div class="padding">
					
					<div id="accordion-wrapper">
						<ul id="accordion"><?php $i = 1; ?>
                          <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
							[COLOR="#0000CD"]<li <?php if($i == 1) post_class('first element'); else post_class('element'); $i++; ?>>
							    <a href="<?php the_permalink(); ?>" title="<?php _e('naar artikel') ?>"><?php the_title(); ?>
							        <span><?php _e('Gepubliceerd:'); ?> <?php the_time('j F Y') ?> - Auteur: <?php the_author(); ?> - 
							            Rubriek: <?php $category = get_the_category(); if(!empty($category)) echo $category[0]->cat_name; ?></span>
							        <span class="intro"><?php echo strip_tags(get_the_excerpt()); ?></span>
							    </a>
							</li>[/COLOR]
							<?php endwhile; ?>
						</ul>
        <div class="navigation">
        ... enz.

=======
De css kan gewoon toegevoegd worden onderaan (of bovenaan, maakt niet uit) in de mystyle.css.

als ik de css van jou ervoor zet, dan veranderd er niets.

Een beetje wel als het goed is: de titel van de items is nu vet geworden ipv het normale tiepje.
Maar inderdaad: voor de rest verandert er niets.
Dat kan ook niet anders, want als de php nog niet is aangepast, draait het niet. Dan krijgen bv. de intro-teksten geen , en als die er niet is kan de css ze ook niet via die class oppakken om margin/padding/border enz. aan te passen.

Met vriendelijke groet,
CSShunter

femke98 · 12 jan 2013

Klopt, de vetgedrukte items heb ik wel gezien, maar niet het mooie inspringen.

Aha, ik zie nu waar ik het neer moet zetten. Ga ik morgen weer even op mijn gemak doen, eerst wel de file backuppen uiteraard, je weet maar nooit!

Bedankt weer zover, ben echt blij met je hulp. Het wordt steeds mooier!

femke98 · 26 jan 2013

Beetje laat, maar ik kan je vertellen dat het nu in orde is.
het is dus gelukt!! Ben er erg blij mee, zoals het er nu uitziet, echt geweldig!
Enig nadeeltje is dat het lettertype kleiner lijkt te zijn geworden, moet nog even kijken of ik dat kan aanpassen. Maar het kan misschien wel gezichtsbedrog is, geen idee.

Bedankt voor je hulp weer!!

csshunter · 26 jan 2013

Hoi Femke,
Keurig werk: hij ziet er nu mooi strak uit en doet 't prima!

Mocht je nog wat grotere lettertjes willen hebben, ze zitten hier in mystyle.css:

Code:

#accordion .intro {
    ...
    font-size: 0.7em;
    }

Dat zou je kunnen opschroeven naar .75em of .8em.

Met vriendelijke groet,
CSShunter

HEAD file niet okee?

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Meubilair

Wij waarderen jouw privacy