Ondersteuning » Thema en CSS/opmaak » Aanpassingen stylesheet

  • Hallo,

    Ik ben bezig met mijn (wordpress) site mooier te maken. Mijn website is: http://www.davidleijstra.com.

    Nu wil ik een aantal zaken wijzigen maar het lukt mij niet (na lange nachten) om deze dingen te veranderen.

    – Ik wil graag dat als je op mijn header logo klikt (trouwens niet een definitieve header) dat je dan weer naar de home pagina gaat.
    – Ook wil ik graag de volgorde van de datum aanpassen. Dat is nu ‘dag, maand datum, jaar’. Dat moet bijv worden: ‘7 MAART 2009 tijd’
    – Ook wil ik de ruimte weghalen tussen de datum van een post en de post titel (zoals het ook is op http://www.johnmayer.com/battlestudies/).
    – En als laatste wil ik de ‘kolom breedte’ aanpassen. Dus hoe breed de sidebar is en de posts. Dat wil ik hebben zoals op http://www.johnmayer.com/battlestudies/. Nu is het veel te smal.

    Ik weet dat ik veel dingen vraag maar ik hoop heel erg dat er iemand is die me hier mee kan helpen of met met 1 van de bovenstaande punten kan helpen.

    Mijn stylsheet broncode is:

    /*
    Theme Name: DavidLeijstra.com Theme
    */
    
    /*
    
    There are a number of template (index.php) 'suggested' modifications that match this styling:
    
    >>---- header tweaks.  change
    	<h1 id="header"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    >>---- to
    <div id="top">
    	<h1 id="header"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
      <p id="description"><?php bloginfo('description'); ?></p>
    </div>
    >>----
    
    >>---- date output change. from
    <?php the_date('','<h2>','</h2>'); ?>
    >>---- to
    <?php the_date('l, F j, Y','<h2 class="date-header">','</h2>'); unset($previousday); ?>
    >>----
    
    >>---- make post title line not a link (still links on timestamp AND more...) -- this is an optional tweak. ;)
    	 <h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h3>
    >>---- to
    	 <h3 class="storytitle" id="post-<?php the_ID(); ?>"><!--<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">--><?php the_title(); ?><!--</a>--></h3>
    >>----
    
    >>---- finally, order of the metadata output. reorder and tweak
    	<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>
    
    	<div class="storycontent">
    		<?php the_content(); ?>
    	</div>
    >>---- and flip around instead to
    	<div class="storycontent">
    		<?php the_content(); ?>
    	</div>
    
    	<div class="meta"><?php _e("posted by"); ?> <?php the_author() ?> at <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_time() ?></a> <!--in <?php the_category(',') ?>--> &nbsp;<?php edit_post_link(__('[Edit]')); ?></div>
    >>----
    
    -d
    
    */
    
    a {
    	color: #675;
    }
    
    a:link {
      color:#3399cc;
      text-decoration:none;
      }
    a:visited {
      color:#3399cc;
      text-decoration:none;
      }
    a:hover {
      color:#3399cc;
      text-decoration:underline;
      }
    a img {
      border-width:0;
      }
    
    acronym, abbr {
    	border-bottom: 1px dashed #333;
    }
    
    acronym, abbr, span.caps {
    	cursor: help;
    	font-size: 90%;
    	letter-spacing: .07em;
    }
    
    blockquote {
    	border-left: 5px solid #ccc;
    	margin-left: 1.5em;
    	padding-left: 5px;
    }
    
    body {
      background:#000;
      margin:0;
      padding:40px 20px;
      font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
      text-align:center;
      color:#ccc;
      font-size/* */:/**/small;
      font-size: /**/small;
    }
    
    cite {
    	font-size: 90%;
    	font-style: normal;
    }
    
    h2 {
      margin:1.5em 0 .75em;
      font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
      text-transform:uppercase;
      letter-spacing:.2em;
      color:#777;
    /*
    	border-bottom: 1px dotted #ccc;
    	font: 95% "Times New Roman", Times, serif;
    	letter-spacing: 0.2em;
    	margin: 15px 0 2px 0;
    	padding-bottom: 2px;
    */
    }
    
    h3 {
      font:bold italic 120% "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
      text-transform:uppercase;
      text-align: left;
    /*
    	border-bottom: dotted 1px #eee;
    	font-family: "Times New Roman", Times, serif;
    	margin-top: 0;
    */
    }
    
    ol#comments li p {
    	font-size: 100%;
    }
    
    /*
    p, li {
    	font: 100% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    	letter-spacing: -1px;
    }
    */
    
    /* classes used by the_meta() */
    ul.post-meta {
    	list-style: none;
    }
    
    ul.post-meta span.post-meta-key {
    	font-weight: bold;
    }
    
    .credit {
    	clear: both;
    /*
    	background: #90a090;
    */
    	border-top: double 3px #aba;
    	color: #fff;
    	font-size: 11px;
    	margin: 10px 0 0 0;
    	padding: 3px;
    	text-align: center;
    }
    
    .credit a:link, .credit a:hover {
    	color: #fff;
    }
    
    .date-header {
      margin:1.5em 0 .5em;
      }
    
    .meta {
    	font-size: .75em;
    }
    
    .meta li, ul.post-meta li {
    	display: inline;
    }
    
    .meta ul {
    	display: inline;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    .meta {
    	color: #808080;
    	font-weight: normal;
    	letter-spacing: 0;
    }
    
    .meta {
      margin:-.25em 0 0;
      color:#333;
      }
    .meta, .feedback {
      font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
      text-transform:uppercase;
      letter-spacing:.1em;
      }
    .meta {
    	display: inline;
      font-style:normal;
      color:#777;
      margin-right:.6em;
      }
    .feedback {
    	display: inline;
      margin-left:.6em;
    }
    
    .post {
      margin:.5em 0 1.5em;
      border-bottom:1px dotted #444;
      padding-bottom:1.5em;
      }
    .post-title {
      margin:.25em 0 0;
      padding:0 0 4px;
    /*  font-size:140%;*/
      line-height:1.4em;
    /*  color:#ad9;*/
      }
    .post-title a {
      text-decoration:none;
      color:#ad9;
      }
    .post-title a:hover {
      color:#fff;
      }
    .post p {
      margin:0 0 .75em;
      line-height:1.6em;
      }
    
    .post img {
      padding:4px;
      border:1px solid #222;
      }
    .post blockquote {
      margin:1em 20px;
      }
    .post blockquote p {
      margin:.75em 0;
      }
    
    #commentform input, #commentform textarea {
    	color: #ccc;
    	background: #333;
    	border: 1px solid #ccc;
    
    	background: #111;
    	border: 1px solid #777;
    	color: #fff;
    }
    
    #commentform textarea {
    	width: 100%;
    }
    
    #commentlist li ul {
    	border-left: 1px solid #ddd;
    	font-size: 110%;
    	list-style-type: none;
    }
    
    #rap {
      width:660px;
      margin:0 auto;
      padding:0;
      text-align:left;
      }
    
    #menu {
      width:220px;
      float:right;
      }
    
    #content {
      width:410px;
      float:left;
    }
    
    #top {
      text-align:center;
      width:660px;
      margin:0 auto 10px;
      border:0px solid #444;
    }
    
    #header {
    	text-align:center;
      border:1px solid #333;
      padding: 20px;
      font-size:200%;
      line-height:1.2em;
      color:#ccc;
      letter-spacing:.2em;
      text-transform:uppercase;
    }
    
    #top #header {
      margin:5px 5px 0;
      padding:20px 20px .25em;
      border-width:1px 1px 0;
    }
    
    #header a {
      color:#ccc;
      text-decoration:none;
    }
    
    #header a:hover {
      color:#ad9;
    }
    
    #description {
      margin:0 5px 5px;
      padding:0 20px 20px;
      border:1px solid #333;
      border-width:0 1px 1px;
      font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
      text-transform:uppercase;
      letter-spacing:.2em;
      color:#777;
      }
    
    /*
    #menu {
    	background: #fff;
    	border-left: 1px dotted #ccc;
    	border-top: solid 3px #e0e6e0;
    	padding: 20px 0 10px 30px;
    	position: absolute;
    	right: 2px;
    	top: 0;
    	width: 11em;
    }
    */
    
    #menu p {
      color:#999;
      line-height:1.5em;
    }
    #menu form {
    	margin: 0 0 0 13px;
    }
    
    #menu input {
    	background: #111;
    	border: 1px solid #777;
    	color: #fff;
    	letter-spacing: -0.05em;
    	width: 80%;
    }
    
    #menu ul {
      margin:1.5em 0 .75em;
      padding:0 0 1.5em;
    
      list-style:none;
    
      font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
      text-transform:uppercase;
      letter-spacing:.2em;
      color:#777;
    
      line-height:1.5em;
    }
    
    #menu ul li {
      margin:1.5em 0 .75em;
      padding-bottom: 15px;
      border-bottom:1px dotted #444;
    }
    
    #menu ul ul {
    	font-variant: normal;
    	font-weight: normal;
    	line-height: 100%;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	text-align: left;
    
      font-size: 120%;
      text-transform: none;
      letter-spacing: 0;
    }
    
    #menu ul ul li {
    	border: 0px none;
    	letter-spacing: 0;
    	margin-top: .25em;
    /*
    	padding-left: 12px;*/
    	font-style:normal;
    	font-variant:normal;
    	font-weight:normal;
    	line-height:115%;
    	font-size:100%;
    	font-family:Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
    /*
    	padding-right:0;
    */
    	padding-top:0;
    	padding-bottom:0;
      margin-bottom: 0px;
    }
    
    #menu ul ul ul.children {
    	border: 0px none;
    	font-size: 100%;
    	padding-left: 4px;
    }
    
    #wp-calendar {
    	color: #9ad;
    	border: 1px solid #aaa;
    	empty-cells: show;
      font:bold 100% "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    	margin: 0;
    	width: 90%;
    }
    
    #wp-calendar #next a {
    	color: #777;
    	padding-right: 10px;
    	text-align: right;
    }
    
    #wp-calendar #prev a {
    	color: #777;
    	padding-left: 10px;
    	text-align: left;
    }
    
    #wp-calendar a {
    	color: #9ad;
    	display: block;
    	text-decoration: none;
    }
    
    #wp-calendar a:hover {
    	background: #e0e6e0;
    	color: #333;
    }
    
    #wp-calendar caption {
    	text-align: center;
    	padding-bottom: 6px;
    }
    
    #wp-calendar td {
    	color: #888;
    /*	font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;*/
    	letter-spacing: normal;
    	padding: 2px 0;
    	text-align: center;
    }
    
    #wp-calendar td.pad:hover {
    	background: #111;
    }
    
    #wp-calendar td:hover, #wp-calendar #today {
    	background: #333;
    	color: #ad9;
    }
    
    #wp-calendar th {
    	color: #a7a;
    	font-style: normal;
    	text-transform: capitalize;
    	text-align: center;
    }
    
    /*--------------------------*/
    #rap .float-amazon-block, #rap .inline-amazon-block {
    	display: block;
    	width: 172px;
    	border: 1px solid #9ad;
    	padding: 5px;
    
    	margin-top: 1px;
    	margin-bottom: 1px;
    /*
    	float:left;
    	margin-left: 0px;
    	margin-right: 10px;
    */
    	margin-left: 10px;
    	margin-right: 4px;
    	background: black;
    	text-align: center;
    	list-style-type: none;
    }
    
    #rap .float-amazon-block a, #rap .float-amazon-block a span, #rap .inline-amazon-block a, #rap .inline-amazon-block a span
    {
    	color: #ccc;
    	text-decoration:none;
    	display:block;
    }
    
    #rap .float-amazon-block a:hover, #rap .inline-amazon-block a:hover {
    	color: black;
    	text-decoration:none;
    	background: #9ad;
    	display:block;
    }
    
    #rap .post .float-amazon-block img {
      border:none;
    }

13 reacties aan het bekijken - 1 tot 13 (van in totaal 13)
  • Moderator Remkus de Vries

    (@defries)

    Sleutelbeheer WordPress NL

    dat zijn idd nogal wat vragen… datum is aan te passen door de volgende code <?php the_date('l, F j, Y','<h2 class="date-header">','</h2>'); unset($previousday); ?> aan te passen naar <?php the_date('j F, Y','<h2 class="date-header">','</h2>'); unset($previousday); ?>

    Voor de rest zijn je vragen niet zozeer als WordPress gerelateerd als wel CSS en Html… met Googlen ( in het Engels )kom je een heel eind, maar het hangt ook van je vaardigheden af… succes!

    Thread starter daaf85

    (@daaf85)

    Bedankt voor je reactie DeFries. Helaas werkte het niet na het aanpassen van de code, snap niet waarom.
    Ik zal eens verder googlen en kijken of ik de antwoorden kan vinden.

    voor het klikken op de header en dan homepage moet je in header.php zijn
    Waarschijnlijk staat daar ergens <img src="platje.jpg">

    Daar maak je van <a href="url naar jou homepage"><img src="plaatje.jpg"></a>

    Je andere 2 problemen zijn puur CSS, ga naar je pagina check dan je pagina source kijk in welke div je tekst ofzo staat en verander die div in je css.

    Thread starter daaf85

    (@daaf85)

    dank je voor je reply gdieleman! de header is nu clickable ;)!

    Thread starter daaf85

    (@daaf85)

    @defries door de code in index.php te wijzigen is het gelukt, bedankt

    Thread starter daaf85

    (@daaf85)

    alleen de ruimte tussen de datum van een post en de titelpost weghalen is me niet gelukt, de rest allemaal wel.

    ik denk als je in je css onder .post de margin-top instelt dat het dan wel lukt

    Thread starter daaf85

    (@daaf85)

    hoi gdieleman, bedankt voor je reactie!

    .post {
      margin:.5em 0 1.5em;
      border-bottom:1px solid #444;
      padding-bottom:1.5em;
      }

    als ik de margin regel uit de bovenstaande code weghaal veranderd er niets ook niet als ik .5 verander door .0 of 1.5em verander door 0.0em.
    wat doe ik dan verkeerd.

    Thread starter daaf85

    (@daaf85)

    ps:
    als ik margin-top: 0; invoeg onder het .post gedeelte werkt het ook niet.

    Thread starter daaf85

    (@daaf85)

    iemand?

    hey daaf late reactie, maar heb je ook de sub div’s al gebrobeerd ?

    .post {
      margin:.5em 0 1.5em;
      border-bottom:1px dotted #444;
      padding-bottom:1.5em;
      }
    .post-title {
      margin:.25em 0 0;
      padding:0 0 4px;
    /*  font-size:140%;*/
      line-height:1.4em;
    /*  color:#ad9;*/
      }
    .post-title a {
      text-decoration:none;
      color:#ad9;
      }
    .post-title a:hover {
      color:#fff;
      }
    .post p {
      margin:0 0 .75em;
      line-height:1.6em;
      }
    
    .post img {
      padding:4px;
      border:1px solid #222;
      }
    .post blockquote {
      margin:1em 20px;
      }
    .post blockquote p {
      margin:.75em 0;
      }

    beetje testen en dan kom je er wel uit denk ik

    Thread starter daaf85

    (@daaf85)

    bedankt voor je reactie gdieleman!

    Ik heb het gewijzigd in:

    .post {
      margin:.5em 0 1.5em;
      border-bottom:1px solid #444;
      padding-bottom:1.5em;
      margin-top: 0;
        }
    .post-title {
      margin:.25em 0 0;
      padding:0 0 4px;
      margin-top: 0;
    /*  font-size:140%;*/
      line-height:1.4em;
    /*  color:#ad9;*/
      }
    .post-title a {
      text-decoration:none;
      color:#ad9;
      margin-top: 0;
      }
    .post-title a:hover {
      color:#fff;
      margin-top: 0;
      }
    .post p {
      margin:0 0 .75em;
      line-height:1.6em;
      margin-top: 0;
      }
    
    .post img {
      padding:4px;
      border:1px solid #222;
      margin-top: 0;
      }
    .post blockquote {
      margin:1em 20px;
      margin-top: 0;
      }
    .post blockquote p {
      margin:.75em 0;
      margin-top: 0;
      }

    maar het resultaat blijft om de een of andere reden hetzelfde.

    ook margin-top: 0; onder .date-header { zetten werkt niet.

    jim-de-groot

    (@jim-de-groot)

    .date-header {
    margin:0;
    }
    
    .post {
    border-bottom:1px solid #444444;
    margin-top:-6px;
    padding-bottom:1.5em;
    }
13 reacties aan het bekijken - 1 tot 13 (van in totaal 13)
  • Het onderwerp ‘Aanpassingen stylesheet’ is gesloten voor nieuwe reacties.