• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Search anpassen?

dev82

Neues Mitglied
Hallo Leute,

ich würde gern in Wordpress meine Search Bar anpassen, sie soll so aussehen wie auf folgender Seite: http://www.thefancy.com

ich habe es bereits auf einer unter Seite von mir probiert, jedoch komme ich nicht zum gleichem Resultat, anbei der Link: test | Ein weiterer WordPress-Blog könntet Ihr mir da weiterhelfen? wie ich ihn nun direkt anpassen kann.

Danke
Carsten
 
Wo liegt denn genau das Problem? Ein zusätzliches Div-Element solltest du doch per JS einfach ein- und ausblenden können.

In jQuery etwa per .hide() und .show().
 
Hallo mermshaus,

eigentlich ist es kein Problem, jedoch stelle ich mich gerade etwas blöde an, hier ist mein Code:

Code:
<div id="search">
   <div id="header_search_area"<?php if  (!$options['header_rss']&&!$options['header_twitter']) : echo '  style="margin-right:0;"'; endif; ?>>
    <?php if ($options['use_google_search']) : ?>
    <form action="http://www.google.com/cse" method="get" id="searchform">
     <div>
 </div>        
      <input type="text" value="<?php _e('Google  Search','neutral'); ?>" name="q" id="search_input"  onfocus="this.value=''; changefc('#333');" />
          <div>
      <input type="image" src="<?php bloginfo('template_url');  ?> name="sa" alt="<?php _e('Search from this blog.','neutral');  ?>" title="<?php _e('Search from this blog.','neutral'); ?>"  id="search_button" />
      <input type="hidden" name="cx" value="<?php echo $options['custom_search_id']; ?>" />
      <input type="hidden" name="ie" value="UTF-8" />
     </div>
    </form>
    <?php else: ?>
    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
     <div><input type="text" value="<?php _e('Suchbegriff  eingeben...','neutral'); ?>" name="s" id="search_input"  onfocus="this.value=''; changefc('#333');" /></div>
     <input type="submit" class="solid" value="Suchen">
    </form>
    <?php endif; ?>
   </div>

ich finde den Fehler gerade nicht.

Grüße
Carsten
 
Hallo,

ich hatte breits einen neuen DIV "<div id="search">" eingefügt, jedoch hat er das design nun zerschossen, ich weiß nicht woran das liegt, es fehlt noch ein DIV.

Grüße
Carsten
 
Wenn aus deiner Sicht noch ein <div> fehlt, füg es ein.

Zeig hier den erzeugten HTML-Code damit wir genauer beurteilen können, wo das Problem liegt.
 
Hallo threadi,

es muß ja noch irgendwo einer fehlen, sonst würder er mir das design ja nicht zerhauen.

hier ist mein kompletter code:

Code:
<body>
<div id="wrapper1">
<div id="wrapper">
 <div id="header">
     <div id="logo">
  <?php if ($options['use_logo']): ?>
   <a href="<?php echo bloginfo('url'); ?>/" id="logo_image"><img src="<?php bloginfo('template_url'); ?>/img/<?php echo $options['logo_name']; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" /></a>
   <?php else: ?>
   <a href="<?php echo bloginfo('url'); ?>/" id="logo_text"><?php bloginfo('name'); ?></a>
   <?php if (!is_paged() && is_front_page()): ?>
   <h1 id="description"><?php bloginfo('description'); ?></h1>
   <?php else: ?>
   <h2 id="description"><?php bloginfo('description'); ?></h2>
   <?php endif; ?>
  <?php endif; ?> 
  </div>
   <div id="header_meta">
   <div id="search">
   <?php if ($options['header_search']) { ?>
      <div id="header_search_area"<?php if (!$options['header_rss']&&!$options['header_twitter']) : echo ' style="margin-right:0;"'; endif; ?>>
    <?php if ($options['use_google_search']) : ?>
    <form action="http://www.google.com/cse" method="get" id="searchform">
     <div>
 </div>      
       <input type="text" value="<?php _e('Google Search','neutral'); ?>" name="q" id="search_input" onfocus="this.value=''; changefc('#333');" />
          <div>
      <input type="image" src="<?php bloginfo('template_url'); ?> name="sa" alt="<?php _e('Search from this blog.','neutral'); ?>" title="<?php _e('Search from this blog.','neutral'); ?>" id="search_button" />
      <input type="hidden" name="cx" value="<?php echo $options['custom_search_id']; ?>" />
      <input type="hidden" name="ie" value="UTF-8" />
     </div>
    </form>
    <?php else: ?>
    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
     <div><input type="text" value="<?php _e('Suchbegriff eingeben...','neutral'); ?>" name="s" id="search_input" onfocus="this.value=''; changefc('#333');" /></div>
     <input type="submit" class="solid" value="Suchen">
    </form>
    <?php endif; ?>
   </div>
    <?php }; ?>
   <?php if ($options['header_rss']) : ?>
   <a href="<?php bloginfo('rss2_url'); ?>" id="header_rss" title="<?php _e('RSS','neutral'); ?>" ><?php _e('RSS','neutral'); ?></a>
   <?php endif; ?>
   <?php if ($options['header_twitter']) : ?>
   <a href="<?php echo $options['twitter_url']; ?>" id="header_twitter" title="<?php _e('Twitter','neutral'); ?>" ><?php _e('Twitter','neutral'); ?></a>
   <?php endif; ?>
  </div><!-- END #header_meta -->
  <?php if($options['use_wp_nav_menu']) { ?>
  <?php if (function_exists('wp_nav_menu')) { wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'header_menu' ) ); }; ?>
  <?php } else { ?>
    <div class="header_menu">
   <ul class="menu" id="menu">
    <li class="<?php if (!is_paged() && is_front_page()) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo bloginfo('url'); ?>/"><?php _e('HOME','neutral'); ?></a></li>
    <?php
        if($options['header_menu_type'] == 'pages') {
        wp_list_pages('sort_column=menu_order&depth=0&title_li=&exclude=' . $options['exclude_pages']);
        } else {
        wp_list_categories('depth=0&title_li=&exclude=' . $options['exclude_category']);
       }
    ?>
    </ul>
     <p class="slide"><a href="#" class="btn-slide">.</a> </p>
  </div><!-- END #header_menu -->
  <?php }; ?>

 </div><!-- END #header -->


Gruß
Carsten
 
Wenn das dein kompletter Code ist, fehlt dir das HTML-Grundgerüst inkl. Doctype. Ohne den wird es nichts.

Und außerdem bringt PHP-Code (wie schon gesagt) wenig, um eine Fehldarstellung auf Grund von HTML-Code zu untersuchen. Zeig den problematischen, erzeugten HTML-Code wie er im Browser ankommt.
 
oh sorry,

anbei der komplette Code.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title><?php
global $page, $paged; wp_title( '|', true, 'right' ); bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description";
if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<meta name="description" content="<?php if (!is_paged() && is_front_page()): echo bloginfo('description'); else: echo the_title(); endif; ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/comment-style.css" type="text/css" />
<?php if (strtoupper(get_locale()) == 'JA') ://to fix the font-size for japanese font ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/japanese_meiryo.css" type="text/css" />
<?php endif; ?>
<!--[if lt IE 7]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie6.css" type="text/css" />
<![endif]--> 
<?php $options = get_option('neutral_options'); if($options['image_style']) { ?>
<style type="text/css">
.post img, .post a img { border:1px solid #ccc; padding:5px; margin:0 10px 0 0;  background:#f2f2f2; }
.post a:hover img { border:1px solid #38a1e5; background:#9cd1e1; }
.post img.wp-smiley { border:0px; padding:0px; margin:0px; background:none; }
</style>
<?php }; ?>
<link rel="shortcut icon" href="http://wie-wohnen-sie.de/wordpress/favicon.ico" type="image/x-icon" />
<?php wp_enqueue_script( 'jquery' ); ?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> 
<?php wp_head(); ?>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jscript.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/comment.js"></script>
<script id="aptureScript">
(function (){var a=document.createElement("script");a.defer="true";a.src="http://www.apture.com/js/apture.js?siteToken=KlC0CBb";document.getElementsByTagName("head")[0].appendChild(a);})();
</script>
<script id='stylepicker_js' src='http://www.smatchfiles.de/stylepicker/js/stylepicker_public.js' type='text/javascript'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>


<link type="text/css" href="http://wie-wohnen-sie.de/wordpress/wp-content/themes/neutral/fade/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />    
<link href="http://wie-wohnen-sie.de/wordpress/wp-content/themes/neutral/fade/css/msg-alert.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://wie-wohnen-sie.de/wordpress/wp-content/themes/neutral/fade/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="http://wie-wohnen-sie.de/wp/wp-content/plugins/themes/neutral/fade/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://wie-wohnen-sie.de/wordpress/wp-content/themes/neutral/fade/js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="http://wie-wohnen-sie.de/wordpress/wp-content/themes/neutral/fade/js/typeface-0.14.js"></script>
<script type="text/javascript" src="http://wie-wohnen-sie.de/wordpress/wp-content/themes/neutral/fade/js/msgalert.jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
                               
        $('.alert-content').MsgAlert({closeTime: 5000});
        
        $("#submit-btn").click(function() {$("form#create").submit()});
        $("form#create").submit(function() {
              //creating the new div above the body content
            var newAlert = $('<div class="alert-content" title="'+ $("#title").val() +'">'+ $("#content").val() +'</div>');
            $(document.body).after(newAlert);    
            $(newAlert).MsgAlert({autoClose: true, wait: false, className: 'my-new-alert'});
            return false;
        });
    
    });        
    jQuery.easing.quart = function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery(document).ready(function(){

    jQuery('a[href*=#wrapper],a[href*=#respond]').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var $target = jQuery(this.hash);
            $target = $target.length && $target || jQuery('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                jQuery('html,body').animate({ scrollTop: targetOffset }, 1200, 'quart');
                return false;
            }
        }
    });

});

            
            
   
</script>


<script type="text/javascript">
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#header_search_area").slideToggle("slow");
        
    });
    
     
});
</script>


    
</head>

<body>
<div id="wrapper1">
<div id="wrapper">
 <div id="header">
     <div id="logo">
  <?php if ($options['use_logo']): ?>
   <a href="<?php echo bloginfo('url'); ?>/" id="logo_image"><img src="<?php bloginfo('template_url'); ?>/img/<?php echo $options['logo_name']; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" /></a>
   <?php else: ?>
   <a href="<?php echo bloginfo('url'); ?>/" id="logo_text"><?php bloginfo('name'); ?></a>
   <?php if (!is_paged() && is_front_page()): ?>
   <h1 id="description"><?php bloginfo('description'); ?></h1>
   <?php else: ?>
   <h2 id="description"><?php bloginfo('description'); ?></h2>
   <?php endif; ?>
  <?php endif; ?> 
  </div>
   <div id="header_meta">
   <div id="search">
   <?php if ($options['header_search']) { ?>
      <div id="header_search_area"<?php if (!$options['header_rss']&&!$options['header_twitter']) : echo ' style="margin-right:0;"'; endif; ?>>
    <?php if ($options['use_google_search']) : ?>
    <form action="http://www.google.com/cse" method="get" id="searchform">
     <div>
 </div>      
       <input type="text" value="<?php _e('Google Search','neutral'); ?>" name="q" id="search_input" onfocus="this.value=''; changefc('#333');" />
          <div>
      <input type="image" src="<?php bloginfo('template_url'); ?> name="sa" alt="<?php _e('Search from this blog.','neutral'); ?>" title="<?php _e('Search from this blog.','neutral'); ?>" id="search_button" />
      <input type="hidden" name="cx" value="<?php echo $options['custom_search_id']; ?>" />
      <input type="hidden" name="ie" value="UTF-8" />
     </div>
    </form>
    <?php else: ?>
    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
     <div><input type="text" value="<?php _e('Suchbegriff eingeben...','neutral'); ?>" name="s" id="search_input" onfocus="this.value=''; changefc('#333');" /></div>
     <input type="submit" class="solid" value="Suchen">
    </form>
    <?php endif; ?>
   </div>
    <?php }; ?>
   <?php if ($options['header_rss']) : ?>
   <a href="<?php bloginfo('rss2_url'); ?>" id="header_rss" title="<?php _e('RSS','neutral'); ?>" ><?php _e('RSS','neutral'); ?></a>
   <?php endif; ?>
   <?php if ($options['header_twitter']) : ?>
   <a href="<?php echo $options['twitter_url']; ?>" id="header_twitter" title="<?php _e('Twitter','neutral'); ?>" ><?php _e('Twitter','neutral'); ?></a>
   <?php endif; ?>
  </div><!-- END #header_meta -->
  <?php if($options['use_wp_nav_menu']) { ?>
  <?php if (function_exists('wp_nav_menu')) { wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'header_menu' ) ); }; ?>
  <?php } else { ?>
    <div class="header_menu">
   <ul class="menu" id="menu">
    <li class="<?php if (!is_paged() && is_front_page()) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo bloginfo('url'); ?>/"><?php _e('HOME','neutral'); ?></a></li>
    <?php
        if($options['header_menu_type'] == 'pages') {
        wp_list_pages('sort_column=menu_order&depth=0&title_li=&exclude=' . $options['exclude_pages']);
        } else {
        wp_list_categories('depth=0&title_li=&exclude=' . $options['exclude_category']);
       }
    ?>
    </ul>
     <p class="slide"><a href="#" class="btn-slide">.</a> </p>
  </div><!-- END #header_menu -->
  <?php }; ?>

 </div><!-- END #header -->
 
Ich zitier mich mal selbst:

Und außerdem bringt PHP-Code (wie schon gesagt) wenig, um eine Fehldarstellung auf Grund von HTML-Code zu untersuchen. Zeig den problematischen, erzeugten HTML-Code wie er im Browser ankommt.

Und nochmal:
Zeig den letztlich erzeugten HTML-Code der im Browser ankommt. Im einfachsten Fall rufst Du die Seite im Browser auf und schaust dir dort die Quelltext-Ansicht an.
 
Zurück
Oben