Ondersteuning » Thema en CSS/opmaak » Logo responsive maken

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Hoi Ruby,

    Je theme gebruikt voor je logo de afbeelding die je hebt aangepast alleen gebruikt deze als ‘background image’. Hierdoor kan je logo niet responsive gemaakt worden omdat het geen onderdeel is van de content (afbeelding) van je website.

    Je kan het wel oplossen alleen dan zal je het theme moeten gaan aanpassen. Dit zal zeer waarschijnlijk het header.php bestand zijn.

    Als oplossing zou je de volgende code kunnen gaan plaatsen:

    <a href="<?php echo get_site_url(); ?>"><img class="logo" src="<?php echo get_template_directory_uri(); ?>/link-naar-logo-afbeelding.jpg" alt="Naam van je website"></a>

    Thread starter rubyvandort

    (@rubyvandort)

    Hi Niels,

    Bedankt voor je reactie!
    Is er niet een manier om in Css te zorgen dat de afbeelding niet als background image wordt gebruikt maar als gewone afbeelding?
    Als dat zou kunnen, doe ik dat liever namelijk.
    Zo niet dan ga ik de code in de header aanpassen:)

    nogmaals bedankt voor je bericht!

    Nee, om het met CSS op te lossen zal je toch echt de markup (HTML) moeten aanpassen. Een background image kan je niet in de DOM plaatsen met CSS.

    Thread starter rubyvandort

    (@rubyvandort)

    Okee, ik wil de code gebruiken die je hierboven beschreven hebt.
    Ik heb het header.php bestand geopent en zie deze code voor het logo nu staan:

    <!– BEGIN .content-wrapper –>
    <div class=”content-wrapper clearfix”>

    <?php if( $smof_data[’text_logo’] ) : ?>
    <div id=”logo”>
    <h1>
    “><?php bloginfo( ‘name’ ) ?>
    <span id=”tagline”><?php bloginfo( ‘description’ ) ?></span>

    </h1>
    </div>

    <?php elseif( $smof_data[‘image_logo’] ) : ?>
    <div id=”logo” class=”site-title-image”>
    <h1>
    “><img src=”<?php echo $smof_data[‘image_logo’]; ?>” alt=”” />
    <span id=”tagline”><?php bloginfo( ‘description’ ) ?></span>
    </h1>
    </div>

    <?php else : ?>
    <div id=”logo”>
    <h1>
    “><?php bloginfo( ‘name’ ) ?>
    <span id=”tagline”><?php bloginfo( ‘description’ ) ?></span>

    </h1>
    </div>
    <?php endif ?>

    Moet ik die dan weghalen en jou code daar invullen?

    Als je alleen de afbeelding van het logo wil gebruiken dan kan je de code tussen <div class="content-wrapper clearfix"> en `</div>
    <?php endif ?>` verwijderen en vervangen door mijn code. Pas alleen wel de link aan van de afbeelding want anders werkt het niet en is je logo niet zichtbaar.

    De code die ik heb gebruikt gebruikt als basis de ‘root’ van je template directory.

    Thread starter rubyvandort

    (@rubyvandort)

    Hi Niels,

    Sorry dat ik je weer lastig val.
    Volgens mij gebruikt mijn logo nu deze code:
    <!– BEGIN .content-wrapper –>
    <div class=”content-wrapper clearfix”>

    <?php if( $smof_data[’text_logo’] ) : ?>
    <div id=”logo”>
    <h1>
    “><?php bloginfo( ‘name’ ) ?>
    <span id=”tagline”><?php bloginfo( ‘description’ ) ?></span>
    </h1>
    </div>

    Dus het bovenste gedeelte van de code die ik je al eerder stuurde.
    Ik heb namelijk in mijn theme options aangevinkt: “text logo”
    in plaats van een image. De tekst wordt opgehaald bij mijn site titel, die gelijk is aan mijn logo.
    Maar ik weet dus niet welke code/verwijzing naar de afbeelding ik zou moeten invullen in jouw code aangezien ik geen afbeelding heb toegevoegd maar wordpress info haalt van verschillende plekken.

    Oftewel HELP, ik kom er niet uit hihi

    cheers

    Ah, als je toegang hebt tot de server van je website en ook in de template map kan komen kan je daar het logo plaatsen en dan ook de link aanpassen naar het logo.

    Thread starter rubyvandort

    (@rubyvandort)

    Hi niels,

    Ik maak gebruik van filezilla en heb een childtheme waarin ik alle aanpassingen doe.
    Ik heb ondertussen al even zitten zoeken en googlen, volgens mij is mijn logo: #logo h1 a
    en in de responsive.css zie ik alleen: #logo staan en geen #logo h1 a, misschien is dat het probleem?
    Als ik die #logo h1 a in responsive.css zou kunnen zetten zou dat dan werken?
    Ik weet alleen niet hoe ik dat zou moeten doen haha.

    Cheers again

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