Dynamic Text as Logo

[Alpha Phi Omega Gamma Chapter]

Hi Bill,

Instead of using a logo file, we are just using the text in the upper left corner for our organization name. For some reason, however, it is showing up in a different font on the home page as all of the other pages. Do you know how I can fix this?

Thank you!
Sarah

[Bill Robbins]

Sarah,

You can edit how it looks. Here’s what to do:

1. Go to the appearance section and select edit to open up the theme editor.
2. From the list of files on the right, choose style.css and look for this spot:

   
   #text-logo h1 a, #text-logo h1 a:visited, #text-logo p a, #text-logo p a:visited {
   	color: #fff;
   	font-variant: small-caps;
   	font-size: 44px;
   	line-height: 1;
   	word-spacing: 8px;
   	letter-spacing: -.5px;
   }
   

3. If you’d like it to look just like all the other text, delete everything except the color and font-size.
4. Save your changes.

If you run into any trouble, let me know.

Enjoy your week,
Bill

[Marcelo Soler]

Hi Bill,

I tried this but did’nt work, still showing up in a different font on the home page from the other pages. Do you know I can fix for this?

[Bill Robbins]

Marcelo,

I’d be glad to help you out. Any chance you could send a link to where you’re working with the theme so I can take a closer look for you?

Thanks,
Bill

[Marcelo Soler]

yep just check http://www.sespestcontrolsydney.com.au/about-us

(text showing up in a different font on the home)

also how can I get to show the image for the featured post?, regards

[Marcelo Soler]

that should be “how can I get to show the image for the featured post on the home page?, regards

[Marcelo Soler]

can I get reply, thanks Bill

[Bill Robbins]

Marcelo,

Always glad to help. We are closed for Support on Sundays so that’s the reason you didn’t get an answer sooner.

Thanks for sending the link. I took a look and here’s what you’ll want to do:

1. Go to the appearance section and select edit to open up the theme editor (or use the editor of your choice).
2. From the list of files on your right, choose style.css.
3. Look for this spot:

   
   #text-logo h1 a,  #text-logo h1 a:visited,  #text-logo p a,  #text-logo p a:visited {
   	color: #fff;
   	font-variant: small-caps;
   	font-size: 44px;
   	line-height: 1;
   	word-spacing: 8px;
   	letter-spacing: -.5px;
   }
   

   and replace it with this:

   
   #text-logo h1 a, 
   #text-logo h1 a:visited, 
   #text-logo p a, 
   #text-logo p a:visited {
   	font-family: BebasRegular, "Lucida Grande", Lucida, Verdana, sans-serif;
   	color: #fff;
   	font-variant: small-caps;
   	font-size: 44px;
   	line-height: 1;
   	word-spacing: 8px;
   	letter-spacing: -.5px;
   }
   

4. Save the file, and refresh your browser.

That should even out the title between the inside and front pages.

If you run into any trouble, let me know,
Bill

[Bill Robbins]

Marcelo,

The image for the featured post widget is the “featured image” of that post. When you’re editing a post, if you’ll look in the right hand column, you’ll see a box for the featured image. Click the link in it to upload an image. Once the image finishes uploading, select the link near the bottom of the pop-up that says “use as featured image.” Update the post and that should add the image to your widget.

There is also a quick screencast in our video section that walks through featured images.

Let me know if you need any help,
Bill

[Marcelo Soler]

thanks for all your help one last question …

How do I increase the summary length for the featured posts on the home page?

regards

[Bill Robbins]

Marcelo,

Great question. Here’s how to take care of that:

1. Go to the appearance section and select edit to open up the theme editor.
2. From the list of files on your right, choose “featured-post.php” and look for this on line 46:

   
   <p class="featured-excerpt"><?php the_content_rss('', FALSE, '', 37);?></p>
   

3. Change the 37 to the number of words you’d like to have and save your changes.

Test the new length and adjust accordingly.

If you have any questions or trouble, let me know,
Bill

[Alpha Phi Omega Gamma Chapter]

Hi Bill!

I had another question about the header. We are using a logo image as the header now, and for some reason only on our homepage it is showing up lower on the header (so that it is overlapping with the content below). The rest of the other pages, the logo image shows up just fine.

Could you help us out with this issue?

Thank you,
Virginia

[Bill Robbins]

Virginia,

Glad to help. What was the URL to your site again so I can take a look?

Thanks,
Bill

[Alpha Phi Omega Gamma Chapter]

Our site is apogamma.org/wordpress

Thanks!

[Bill Robbins]

Virginia,

Perfect. You can add this to the bottom of your style.css file to keep the home and inside pages inline:

#logo p,
#logo h1 {
	margin: 0;
	padding: 0;
	line-height: 1;
}

If you run into any trouble, let me know,
Bill

[Alpha Phi Omega Gamma Chapter]

That is great! Thank you so much Bill!

[Alpha Phi Omega Gamma Chapter]

Hi Bill,

Thank you so much for all the assistance you’ve provided! We were wondering if you could help us out with another couple lines of code under the Alumni page and History page. We currently have a picture of our alum and a gallery of our alumni newsletter both on the same Alumni page. But under the alumni newsletter gallery, that other one alum picture was also showing up where it didn’t belong. We adjusted the code so that the alumni picture up top does not show up again on the bottom, which was success, but we think those lines of code also took away the pop up feature of the gallery images, i.e. when you click on it the gallery images, they no longer pop up anymore, you just get taken to a new tab with the image. Would you be able to help us figure this out?

Thanks again,
Virginia

[Bill Robbins]

It looks like the content of the fancy.js file is missing. That’s what changes the image links so they pop-up in the light box. Here’s the code for the file so you can add it back:

jQuery(function(){
  // group gallery items
  jQuery('div.gallery a').each(function(){
    jQuery(this).attr('rel', jQuery(this).parent().attr('id'));
  });
    
  // Add Fancy Classes to single items:
  jQuery('a').each(function(){
    // filter items
    if ( this.href.toLowerCase().substr(-4).indexOf('.jpg') < 0 &&
         this.href.toLowerCase().substr(-5).indexOf('.jpeg') < 0 &&
         this.href.toLowerCase().substr(-4).indexOf('.png') < 0 &&
         this.href.toLowerCase().substr(-4).indexOf('.gif') < 0 )
    return;
    
    // shorter access path
    var $lnk = jQuery(this); 

    // Add the fancybox class
    $lnk.addClass('fancybox');
    
    // Copy the title tag from link to img
    var $img = $lnk.find('img');
    if ( $img.attr('title') == '' ) $img.attr('title', $img.attr('alt'));
    if ( $lnk.attr('title') == '' ) $lnk.attr('title', $img.attr('title'));
  });
  
  jQuery('a.fancybox')
  .unbind('click')
  .fancybox({ 'zoomSpeedIn':  800,
              'zoomSpeedOut': 800,
              'easingIn':     'easeOutBack',
              'easingOut':    'easeInBack',
              'zoomOpacity':  true });

});

Hopefully that will bring back the pop-ups.

[Debra Bryant]

Bill,

I tried the instructions above to change the logo font on the home page to how it appears on the demo, we want to use the logo as the name of our site as Sarah requested above.
I tried changing it as you suggested above, and the style.css sheet did not have the following so I can change it:

#text-logo h1 a, #text-logo h1 a:visited, #text-logo p a, #text-logo p a:visited {
color: #fff;
font-variant: small-caps;
font-size: 44px;
line-height: 1;
word-spacing: 8px;
letter-spacing: -.5px;
}

my site name is http://www.debra-bryant.com

Thank you for your help.

Debra

[Bill Robbins]

Debra,

Thank you for your business first of all. This post is actually in the forum for the “Live” theme which is made a bit differently from the Bottega theme.

You still can make changes to the typography in the logo though. In the Bottega theme, the spot in the style.css file is this:

#text-logo h1, 
#text-logo p {
	font-size: 50px;
	text-shadow: #262526 3px 3px 3px;
}

If you’d like to change the color of the logo, you can edit this right below that:

#text-logo a, 
#text-logo a:visited {
	color: #fff;
}

You can also use a plugin called Fontific if you’d like some additional options for fonts. It provides integration with Google web fonts.

If I can help you, just let me know,
Bill

[Author]

Posts