WordPress.org

Ready to get started?Download WordPress

Forums

How to edit header to allow additional text or graphics (5 posts)

  1. Ronnie
    Member
    Posted 2 years ago #

    on the very top of my website there's a black bar with telephone, email and social network icons.

    these things are edited via an inbuilt theme editor as so: http://www.ronniewhittaker.com/theme.png

    is there a way i could bypass this editor and somehow be able to insert and align my own text or graphics on this black bar?

    thanks for your help

  2. Hedley
    Member
    Posted 2 years ago #

    Depending on how Smoothboosh is written, you might be able to edit your header.php file (or whatever is displaying that bar - it could be a widget too), if you're comfortable tinkering with html and php. However, as that is a commercial theme, your best best is to ask the theme provider for assistance. Try logging in to your themeforest account and opening a support ticket.

  3. Ronnie
    Member
    Posted 2 years ago #

    thanks, i've not been able to get hold of the theme designer.

    though i see in header.php the following which displays the Telephone and email text. so i could edit the text there to write something else, but i'm unsure how i might be able to style the text size and colour?

    <!-- Contact Details Start -->
              <div class="contactdetails">
                <ul>
                    <?php if (get_option('sb_telephone') != ""){?><li>Telephone: <?php echo get_option('sb_telephone'); ?></li><?php } ?>
                    <li>Email: <a href="mailto:<?php echo get_option('sb_email'); ?>"><?php echo get_option('sb_email'); ?></a></li>
                </ul>
              </div>
              <!-- Contact Details End -->

    here's the code from header.php for the Social icons too, i'd love to be able to add a Google+ icon, but have no idea how i'd do that, would it be possible, can you help?

    <div class="socialicons">
                <ul>
                    <?php if($flickricon != ""){ ?>
                    <li><a href="#" class="flickr hovertip" title="Flickr">flickr</a></li>
    				<?php }
    
    				if($rssfeedicon == 0){ ?>
                    <li><a href="<?php bloginfo('rss2_url'); ?>" class="rss hovertip" title="RSS">rss</a></li>
    				<?php }
    
    				if($facebookicon != ""){ ?>
                    <li><a href="http://www.facebook.com/<?php echo $facebookicon; ?>" class="facebook hovertip" title="Facebook">facebook</a></li>
    				<?php }
    
    				if($twittericon != ""){ ?>
                    <li><a href="http://www.twitter.com/<?php echo $twittericon; ?>" class="twitter hovertip" title="Twitter">twitter</a></li>
    				<?php } ?>
                </ul>
              </div>
              <!-- Social icons End -->
  4. Hedley
    Member
    Posted 2 years ago #

    Colours: Likely the colours are defined in styles.css, as suggested by the line <div class="contactdetails">. Try searching for "contactdetails" in your style.css, and modifying the colour codes.

    Google +: Try reading this: http://www.wpbeginner.com/wp-tutorials/how-to-add-the-google-1-button-to-your-wordpress/

    In theory, if you add the java script code somewhere appropriate, you may be able to add another <li> item containing the G+ code to the section of your header.php. Tinker with it an see how it works.

  5. Ronnie
    Member
    Posted 2 years ago #

    hey, thanks a lot !

    on the google button i was thinking just an icon link to my Google+ page
    would i be able to add another line like this somehow? the part i can't work out is the $twittericon and how i'd be able to create $googleicon

    if($twittericon != ""){ ?>
                    <li><a href="http://www.twitter.com/<?php echo $twittericon; ?>" class="twitter hovertip" title="Twitter">twitter</a></li>
    				<?php } ?>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.