Ondersteuning » Algemeen WordPress » Logo i.p.v. titel, hoe?

15 reacties aan het bekijken - 1 tot 15 (van in totaal 18)
  • De blog gewoon geen naam geven, maar in je header.jpg (of hoe die ook moge heten) het logo opnemen. Zoiets?

    als je je blog geen naam geeft, dan komt er ook geen titel in browserr. je kan ook de naam van je blog hidden maken in style.css

    Thread starter luchtpost

    (@luchtpost)

    Waar moet ik de link naar die afbeelding dan precies plaatsen?

    Ergens in je dashboard bij het tabblad weergave kan je de afbeelding regelen. In die afbeelding moet je de het gewenste logo opnemen. Maar zoals Macbrink zegt: je moet wel een naam geven aan de site, anders krijg je een error.

    luchpost, welk theme gebruik je? wellicht ondersteunt die niet de oplossing van AdrianusV.

    Thread starter luchtpost

    (@luchtpost)

    Ik gebruik de volgende theme:
    Basic2Col 2.3 by Kristin K. Wangen

    Wel kan ik via Edit Theme de header script aanpassen. Zou het hierin mogelijk zijn i.p.v. een titel een logo te tonen?
    Zoja, wat moet ik in het volgende script aanpassen?

    Header.php

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <!– Don’t underestimate the Power of the Source –>

    <html xmlns=”http://www.w3.org/1999/xhtml&#8221; lang=”<?php _e(‘en’); ?>”>

    <head profile=”http://gmpg.org/xfn/11″&gt;
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

    <title>
    <?php wp_title(‘ ‘); ?><?php if(wp_title(‘ ‘, false)) { echo ‘ | ‘; } ?> <?php bloginfo(‘name’); ?>
    <?php if (is_home()) { ?> : <?php bloginfo(‘description’); ?><?php } ?>
    </title>

    <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” />
    <!– leave this for stats please –>

    <style type=”text/css” media=”screen”>
    @import url( <?php bloginfo(‘stylesheet_url’); ?> );
    @import url( <?php bloginfo(‘stylesheet_directory’); ?>/custom/custom.css);
    </style>

    <!– Internet Explorer styles –>
    <!–[if lte IE 6]><style type=”text/css” media=”screen”>
    @import url( <?php bloginfo(‘stylesheet_directory’); ?>/ie.css);
    @import url( <?php bloginfo(‘stylesheet_directory’); ?>/custom/customie.css);
    </style><![endif]–>
    <!– /Internet Explorer styles –>

    <link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
    <link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
    <link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />

    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
    <?php wp_get_archives(’type=monthly&format=link’); ?>
    <?php //comments_popup_script(); // off by default ?>
    <?php wp_head(); ?>
    </head>

    <body id=”custom”>
    <div id=”wrap”>
    <div id=”top”></div>

    <div id=”accessnav”>[ Content | View menu ]</div>

    <div id=”header”>
    <h1>/”>
    <?php bloginfo(‘name’); ?>
    </h1>
    <p><?php bloginfo(‘description’); ?></p>
    </div>

    <div id=”content”>

    <!– end header –>

    Met vriendelijke groeten

    Als ik jou was zou ik zou dit script zou houden.
    Sla je logo plaatje op in een (sub)folder van je thema bijvoorbeeld images.
    Het volgende kan je wijzigen in je stylesheet style.css:

    #header {
    background-image: url(images\plaatje.jpg);
    ...rest van header declaraties
    #header h1 {
    visibility: hidden;
    ...
    #header p {
    visibility: hidden;
    ....

    zou hou je de content en presentatie netjes gescheiden, bovendien blijft je titel en je strapline zichtbaar voor spiders.

    Thread starter luchtpost

    (@luchtpost)

    Heel erg bedankt!
    Groeten Wanja

    Beste Mensen,

    Ik ben helemaal nieuwe met WordPress. Maar in mijn header staat: Brands and Brothers (Naam van ons weblog/bedrijf) en daaronder “alweer een wordpress” weblog. Ik snap de basis van css en html maar kan wel wat hulp gebruiken. Hoe krijg ik bijvoorbeeld dat “alweer een wordpress weblog” weg? En hoe kan de header vervangen met een image? Lukt mij namelijk niet.

    Graag jip en janneke taal

    Dank u.

    In Jip en Janneke taal:
    “Alweer een wordpress weblog” verander je in het wp-admin-Opties-Algemeen-Onderschrift.

    @macbrink:

    Ik heb de volgende aanpassing gemaakt in mijn style.css maar mijn logo is nog steeds niet zichtbaar wel is de kop en subkop tekst uit mijn site verdwenen. Welke aanpassing moet ik nog maken?

    /*
    Theme Name: Darkwater
    Theme URI: http://www.antbag.com
    Description: Blackened Waters.
    Version: 1.1
    Author: Antbag
    Author URI: http://www.antbag.com/

    */

    body, h1, h2, h3, h4, h5, h6, blockquote, p, form{
    margin: 0;
    padding: 0;
    }

    body{
    margin: 0;
    font-family: Verdana, Helvetica, Georgia, Sans-serif;
    font-size: 13px;
    text-align: center;
    vertical-align: top;
    background: #000 url(images/body_bg.jpg) no-repeat top center fixed;
    color: #AAA;
    }

    #wrapper{
    clear: both;
    overflow: hidden;
    margin: 10px auto 10px auto;
    width: 900px;
    text-align: left;
    border-top: 2px solid #333;
    }

    h1{
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 30px;
    padding: 25px 0 10px 15px;
    }

    h3{
    padding: 15px 0 15px 0;
    }

    h4{
    padding: 0 0 0 15px;
    color: #555;
    }

    a:link{
    text-decoration: none;
    color:#9CF;
    }

    a:hover{
    text-decoration: underline;
    color: #FFF;;
    }

    a:visited{
    text-decoration: none;
    color:#9CF;
    }

    blockquote { font-style: italic;
    font-family: Verdana, Helvetica, Georgia, Sans-serif;
    font-size: 90%;
    color: #777;
    margin: 1.5em 30px 1.5em 30px;
    padding: 4px 4px 4px 10px;
    background: #111;
    border-right: 1px dotted #555;
    border-bottom: 1px dotted #555;
    }

    .entry p {
    margin: 0 0 15px 0;
    }

    .entry ul, .entry ol {
    margin: 0 0 15px 40px;
    }

    .entry ul {
    list-style-type: disc;
    }

    .entry li {
    margin: 0 0 5px 0;
    }

    .entry ul li ul, .entry ul li ol, .entry ol li ul, .entry ol li ol {
    margin: 5px 0 5px 30px;
    }

    .entry img.left {
    padding: 6px;
    margin: 0.5em 15px 0.5em 0;
    border: none;
    float: left;
    clear: left;
    }

    .entry img.right {
    padding: 6px;
    margin: 0.5em 0 0.5em 15px;
    border: none;
    float: right;
    clear: right;
    }

    .entry img.center {
    display: block;
    padding: 8px;
    margin: 0 auto 1.5em auto;
    border: none;
    float: none;
    clear: both;
    }

    .entry img.frame {
    padding: 6px;
    margin: 0.5em 0 0.5em 15px;
    border: 1px solid #666;
    background: #444;
    float: right;
    clear: right;
    }

    .entry img.stack {
    clear: none !important;
    }

    /*—-HEADER—-*/

    #header{
    background-image: url(images\logo.jpg);
    float: left;
    width: 100%;
    height: 100px;
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 0;
    color: #fff;
    clear: both;
    }

    #header a{
    visibility: hidden;
    }

    #header a:hover{
    visibility: hidden;
    }

    /*—-POST—-*/

    #container{
    float: left;
    width: 500px;
    padding: 0 0 0 0;
    }

    .post{
    padding: 20px 30px 40px 20px;
    }

    .post h2{
    font-family: Georgia, Sans-serif;
    font-size: 22px;
    padding: 20px 0 0 0;
    }

    .entry{
    line-height: 22px;
    }

    .postinfo{
    font-size: 11px;
    color: #aaa;
    padding: 2px 0 20px 0;
    }

    .postinfo a{
    color: #aaa;
    }

    .postdate{ color: #aaa; }

    p.postmetadata{
    font-size: 12px;
    color: #BFB8A1;
    border-top: 1px dotted #CCC;
    margin: 20px 0 0 0;
    padding: 5px 0 0 0;
    }

    p.postmetadata strong{
    float: right;
    }

    /* This is the link at the bottom of a post which lets you go to the next or previous post */

    .postnav{
    padding: 10px 20px 20px 10px;
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
    }

    h2.archive_head{
    font-weight: bold !important;
    font-size: 14px !important;
    letter-spacing: normal !important;
    margin: 0 0 1.8em 10px !important;
    padding: 0.4em 5px !important;
    border-bottom: 1px dotted #CCC;
    background: none;
    }

    /*—-SIDEBAR STYLES—-*/

    .sidebar{
    float: right;
    width: 180px;
    margin: 30px auto 5px auto;
    padding-top: 15px;
    padding-bottom: 15px;
    display: inline;
    overflow: hidden;
    border-left: 1px solid #333;
    }

    .sidebar ul{
    list-style: none;
    margin: 0;
    padding: 0 10px;
    }

    .sidebar ul li{
    padding: 10px 0 20px 0;
    }

    .sidebar ul li h2{
    font-family: Georgia, Sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    color: #555;
    padding: 3px 0;
    margin: 0 10px 0 22px;
    border-bottom: 1px solid #333;
    }

    .sidebar ul ul li{
    padding: 0;
    margin: 0 0 0 13px;
    line-height: 20px;
    list-style: none;
    font-size: 11px;
    border-bottom: 1px solid #333;
    }

    .sidebar .syndication .rss {
    width: 179px;
    height: 33px;
    position: relative;
    }

    .sidebar .syndication .rss span{
    background: url(images/sub_rss.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

    .sidebar .rss .sub{
    border-bottom: none;
    }

    .sidebar .rss .sub a:hover{
    background: none;
    }

    .sidebar ul li a{
    display: block;
    text-decoration: none;
    color:#9CF;
    padding: 2px 2px;
    }

    .sidebar ul li a:hover{
    text-decoration: none;
    color: #CCC;
    background: #222;
    }

    table#wp-calendar{
    width: 100%;
    }

    /* Left Sidebar */

    .leftbar{
    float: left;
    width: 190px;
    margin: 30px auto 5px auto;
    padding-top: 5px;
    padding-bottom: 15px;
    display: inline;
    overflow: hidden;
    border-left: 1px solid #333;
    }

    .leftbar ul{
    list-style: none;
    margin: 0 0 0 7px;
    padding: 0 0 0 7px;
    }

    .leftbar ul li{
    padding: 10px 0 20px 0;
    }

    .leftbar ul li h2{
    font-family: Georgia, Sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    color: #555;
    padding: 3px 0;
    margin: 0 0 0 14px;
    border-bottom: 1px solid #333;
    }

    .leftbar ul ul li{
    padding: 0;
    margin: 0;
    line-height: 20px;
    list-style: none;
    font-size: 11px;
    border-bottom: 1px solid #333;
    }
    .leftbar ul li a{
    display: block;
    text-decoration: none;
    color:#9CF;
    padding: 2px 2px;
    }

    .leftbar ul li a:hover{
    text-decoration: none;
    color: #CCC;
    background: #222;
    }

    /*—-COMMENT FORM—-*/

    #comment-form{
    width: 425px;
    margin: 50px 0 0;
    border: 1px dotted #555;
    padding: 5px 5px 15px 15px;
    background: transparent;
    }

    .comments-template ol{
    margin: 0 0 15px;
    list-style: none;
    }

    .comments-template ol li{
    line-height: 18px;
    margin: 10px 0 10px 0;
    }

    .comments-template h2, .comments-template h3{
    font-family: Georgia, Sans-serif;
    font-size: 16px;
    color: #9CF;
    padding: 10px 0 30px 0;
    }

    .commentmetadata{
    font-size: 12px;
    color: #555;
    padding: 20px 0 20px 0;
    }

    .commentmetadata strong {
    font-size: 16px;
    }

    .comments-template p.nocomments{
    padding: 0;
    }

    .comments-template input{
    border: 1px solid #555;
    }

    .comments-template textarea{
    font-family: Arial, Hevletica, Georgia, Sans-seriff;
    font-size: 12px;
    color: #000;
    margin: 30px 15px 15px 0;
    background: #FFF;
    border: 1px solid #555;
    }

    /*—-FOOTER—-*/

    #footer{
    clear: none;
    float: left;
    width: 885px;
    margin: 0;
    padding: 10px 5px 5px 10px;
    line-height: 18px;
    font-size: 80%;
    color: #CCC;
    background: #000;
    border-top: 1px dotted #CCC;
    border-bottom: none;
    }

    #footer a:link{
    text-decoration: none;
    color: #9CF;
    }

    #footer a:hover{
    text-decoration: underline;
    color: #FFF;
    }

    #footer a:visited{
    text-decoration: none;
    color: #9CF;
    }

    Inmiddels is het me gelukt kijk maar: http://www.bijlobith.nl maar nu blijft m’n logo helemaal links staan. Hoe krijg ik dit nu in het midden van de site of nog beter precies boven het begin van het blog links van het midden?

    Volgens mij moet je in style.css bij #header hebben staan position: center;
    Of float: center;

    Heb ik geprobeerd maar er veranderd niks dus maar weer even terug gezet. De #header tekst luidt nu weer zoals hieronder aangegeven misschien dat wat meer duidelijkheid geeft over wat ik over het hoofd zie (of moet het ergens anders gezocht worden):

    /*—-HEADER—-*/

    #header{
    background-image: url(images/logo.png) ;

    float: center;
    width: 453px;
    height: 100px;
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 0;
    color: #fff;
    clear: both;
    }

    #header a{
    visibility: hidden;
    }

    #header a:hover{
    color:#FFF;
    }

    Al doende leert men ik heb het m.b.v. http://www.cssmate.com/csseditor.htm het logo nu op de positie waar ik het wil hebben maar nu is er te weinig ruimte aan de bovenzijde om het logo in z’n geheel te laten zien: De aanpassing op hierboven die ik heb gemaakt staat hieronder maar hoe moet ik nu verder zodat het logo mooi in z’n geheel boven het blog staat?

    Oh ja, nog even de url zodat je kunt zien wat ik bedoel: http://www.bijlobith.nl

    #header{

    background-attachment: scroll;
    background-repeat: no-repeat;
    clip: rect(auto, auto, auto, auto);
    text-align: center;
    background-image: url(images/logo.png);
    position: top center;
    background-position: 25% 30px;
    display: block;

15 reacties aan het bekijken - 1 tot 15 (van in totaal 18)
  • Het onderwerp ‘Logo i.p.v. titel, hoe?’ is gesloten voor nieuwe reacties.