Ondersteuning » Thema en CSS/opmaak » Header toevoegen

  • Hallo allemaal,

    Ik heb al wat uurtjes op internet gezocht maar geen duidelijk antwoord op mijn probleem gevonden dus ik waag er een post aan. Er is hier vast iemand die mij kan helpen.

    Ik gebruik een template waar standaard geen header image inzit. Ik wil graag de huidige header vervangen door een image en die vervolgens via een plugin zoals ‘WP Unique Article Header Image’ animeren.

    Waar (in neem aan de .css, zie hieronder) kan ik een welke code invoegen om een header image te krijgen?

    Alvast bedankt voor jullie reacties!

    Roel.

    Huidige Css:

    /* headers */
    #header {margin-top: 25px;margin-bottom: 25px;}
    #header #logo {float:left}
    #header h1 {margin:0;text-transform: uppercase;font-size: 25px;padding:0;line-height: 1}
    #header h1 a {color: #333;border:none;}
    #header h1 a:hover {color:#666;}
    #header .description {color:#bbb;font-family: Georgia;font-style: italic;font-size: 14px }

    Huidige header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <!--[if lte IE 7]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/library/ie.css" type="text/css" media="screen, projection" /><![endif]-->
    <!--[if IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/library/ie8.css" type="text/css" media="screen, projection" /><![endif]-->
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>
    <?php if(is_single(!in_category($blog_ID))) { ?>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.gallery.js"></script>
    <?php } ?>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('ul.sf-menu').superfish({
            delay:       500,                            // one second delay on mouseout
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
            speed:       'fast',                          // faster animation speed
            autoArrows:  false,                           // disable generation of arrow mark-up
            dropShadows: true                            // disable drop shadows
        });
    });
    jQuery(function(){
    	//portfolio thumb fadein fadeout
    	jQuery('#content div.portfolio').hover(function(){
    		jQuery(this).find('img').fadeOut();
    	}, function(){
    		jQuery(this).find('img').fadeIn();
    	});
    	<?php if(is_single(!in_category($blog_ID))) { ?>
    	jQuery('#gallery').gallery();
    	<?php } ?>
    });
    
    </script>
    </head>
    
    <body>
    <div class="container_12">
    <?php
    // pull from theme options
    global $blog_ID;
    $blog_cat = html_entity_decode(get_option('T_blog_cat'));
    $blog_ID = get_cat_ID($blog_cat);
    ?>
    
    <div id="header" class="grid_12">
    	<div id="logo">
    		<h1><a>/"><?php bloginfo('name'); ?></a></h1>
    		<span class="description"><?php bloginfo('description'); ?></span>
    	</div>
     	<?php if(function_exists('get_search_form')) : ?>
    		<?php get_search_form(); ?>
    		<?php else : ?>
    		<?php include (TEMPLATEPATH . '/searchform.php'); ?>
    	<?php endif; ?>
    
        <!-- Navigation -->
        <?php
    	if (function_exists('wp_nav_menu') ) {
    		wp_nav_menu( 'sort_column=menu_order&menu_class=sf-menu&container=' );
    	} else { ?>
        <ul class="sf-menu">
        	<li <?php if(is_home()) echo 'class="current-cat"'; ?>><a>">Home</a>
    
    <li>
        		<a href="#">Portfolio</a>
    
    <ul>
        			<?php wp_list_categories("exclude=$blog_ID&title_li="); ?>
        		</ul>
    </li>
        	<?php wp_list_categories("include=$blog_ID&title_li="); ?>   	
    
    <li>
        	    <a href="#">Pages</a>
    
    <ul>
        	        <?php wp_list_pages("title_li="); ?>
        	    </ul>
    </li>
        <?php } ?>
    
    </div>
    <hr class="grid_12" />

    Edit Moderator: Heb de code in de juiste code tags gezet. Leest een stuk beter.

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Thread starter Roelst

    (@roelst)

    Site draait overigens (al test) op http://www.mijn-marketing.nl/wordpress/

    Moderator Remkus de Vries

    (@defries)

    Sleutelbeheer WordPress NL

    Het feitelijke header gedeelte begint met `<div id=”header” class=”grid_12″>
    `

    en eindigt met een sluitende div:
    </div>

    Daartussen zul je moeten spelen met de code voor het toevoegen van de header. Voor de opmaak moet je spelen met de CSS die je hier hebt getoond.

    Thread starter Roelst

    (@roelst)

    Bedankt Remkus,

    Kan ik voor de image een standaard HTML code toevoegen zoals <IMG SRC=”filename.jpg” width=”250″ height=”150″ ALT=”picture”> of wil je misschien even een voorbeeld code posten?

    Hoe verwijs ik vervolgens naar een afbeelding? kan ik die gewoon via het wordpress CMS uploaden of moet dat via ftp?

    Alvast bedankt!
    Roel

    Moderator Remkus de Vries

    (@defries)

    Sleutelbeheer WordPress NL

    Eigenlijk hoor je de image via css aan je header div te koppelen, maar kunt ‘m inderdaad ook als html toevoegen. img src mag gewoon de url zijn die je krijgt wanneer je de image in je media bibliotheek hebt geüploadt.

    Ik heb zelfde vraag. Maar dan anders, ik heb nu een jpg plaatje in mijn home staan http://www.headdress-coaching.nl en die wil ik vervangen door een eigen banner. Waar kan ik dit doen in het CMS zonder aan de codes te sleutelen? Of is aanpassen van een html doc onvermijdelijk?
    SVP in simple bewordingen welke stappen ik moet doen?

    vergeten de link is natuurlijk http://www.headdress-coaching.nl/wordpress

    Je kunt natuurlijk gewoon het plaatje vervangen, dat wil zeggen, een plaatje met dezelfde naam (en formaat) en die over het origineel heen zetten. Anders een nieuw plaatje en inderdaad even de naam aanpassen in de stylesheet.

    He, is dat gewoon Twentyten? Volgens mij kun je via het menu gewoon het plaatje vervangen. “appearance” “header” in de Engelse versie. Een optie die er wel alleen zal zijn als Twentyten actief is. Ik heb ‘m in elk geval niet.

    Dankje gelukt!

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Het onderwerp ‘Header toevoegen’ is gesloten voor nieuwe reacties.