One of the most annoying experiences on the Web today is being delivered the wrong ad at the wrong time. It doesn’t ruin my experience, but I’m always shaking my head, wondering why the programmers didn’t do a better job.
I was thinking about that during some redesign around here, then decided to solve a problem: deliver my Thesis affiliate image ads only to people that were reading posts related to the Thesis framework. Personally, I don’t like my site cluttered with ads, but at the right time, in the right place, to the right person, I want the flexibility of including an advertisement.
There are probably many other ways to do this, so if you have something interesting to share, please write a comment below. Now I’m going to show you how I did it.
First, you’ll need to have all your Thesis posts slapped with the same tag. You could do the same thing with categories, but I didn’t. I use the tag “thesis”. That’s how I target the right audience.
We’re going to drop some code into either the custom_functions.php file, or using the time saving plugin Thesis OpenHook, at thesis_hook_after_post. I’ll show you how to do this with OpenHook, but using the custom_functions.php file can be done too, with a little more effort.
Using Thesis OpenHook, look for thesis_hook_after_post and drop the following code in there:
<?php if (has_tag('thesis')) { ?>
<p style="text-align: center;">
<a href="http://www.shareasale.com/r.cfm?b=202503&u=520806&m=24570&urllink=&afftrack=">
<img src="http://www.shareasale.com/image/24570/468x60.png" alt="Thesis Theme for WordPress: Options Galore and a Helpful Support Community" border="0" />
</a></p>
<?php } ?>
screenshot of Thesis OpenHook interface
See that first WordPress conditional tag there, has_tag('thesis') — well, some people might have tried using the more common, is_tag(), but they would have been wrong. The difference between the two conditions is that one looks for a binary condition — yes or no — while the other, has_tag is looking for a positive result among many possibilities. Trust me, this is the way you want to do it.
After the beginning — <?php if (has_tag('thesis')) { ?> — you can drop in your affiliate code, what ever it may be. Of course, this method doesn’t only work with Thesis affiliate links. You could use Amazon code in their for book reviews, for example. I’m sure you can think of many other applications.
And you don’t have to put the affiliate code at the end of a post. Using Thesis hooks you can drop it many other places, at the right time, for the right person.
Do you have any other suggestions on how to target ads using Thesis? Drop a comment below.
I’m going fixed width (pixel based) on all my Thesis sites because I don’t want them looking like just another apple in the Thesis barrel. Now, please read the argument and rationale.
I was having a conversation with another Thesis developer last week, talking about what we liked most and least about Thesis, when I realized that one of the things that bothered me the most had nothing to do with Thesis itself, but the people who used it. Â No, the problem isn’t that I personally dislike people who use Thesis.
Many people who use Thesis never get radical and make highly customized Web sites. Look at 100 random Web sites built with Thesis and you’ll probably find 80 of them very “Thesisy”; that is, the sites all have a common look or pattern to them because most of the default design options haven’t been changed very much. To change-up the common Thesis look, people need to learn some new tricks or hire the people that know the tricks. (I’m not going to link to examples of Thesisy sites because that wouldn’t be fair.)
Why is this Thesis pattern of Web design propagating across the Web? There’s a simple explanation, I think. People have the misperception that Thesis is a theme, though it does have some theme features (the design options). Thesis is really a framework (Wikipedia entry for framework). The Wikipedia entry details 4 elements of a framework:
inversion of control
default behavior
extensibility
non-modifiable framework code
By that criteria, Thesis is a framework; however, in addition to a default behavior, Thesis includes default design elements that are too irresistible not to use. If there was a framework purity test, the design options in Thesis would probably be out.
This is why I’m going with fixed width (pixel based) Thesis sites: because I can. And hardly anybody else it doing it. Thesis is a framework; I’ll do the design, thank you.
What do you think? Get it off your chest. Leave a comment below.
Photo by *Kicki* and republished here under a Creative Commons license.
Yes! Ninety-five percent of Web design is typography. That’s why that other five percent — images and video — is so important. If your design goes screwy with images or video, it’s like a turd floating on the Web page. How can you read the text with that turd floating in the sidebar?!
Since I began working with the Thesis theme, one thing has bothered me: the scaling of images in an em-based design. Along with that, I have one other note about effectively displaying images in your Web designs.
Of course, Thesis isn’t the only theme scaling images in an em-based design, but I’m going to use this as an example. Actually, other than two minor issues, I’m a huge fan of Thesis. Hey, not everything is perfect.
normal size image, not scaled
Here’s the problem: if you’re working with an em-based design and you’ve got images that are supposed to 100% span a column or header, then you need to also scale those images with an em-based formula, otherwise the images won’t span 100%. There’s no way around it.
Let’s look at this example from the Copyblogger sidebar. The right hand sidebar includes some image links that are scaled to the width of the column using ems. The images are 260 pixels wide, as you can see with the image to the right.
as it appears with em-based scaling
But, look at the image to the left, which is from a screen grab of the site in default size on Safari for Mac OS X. (The same thing happens to a lesser degree using Firefox for Mac OS X.) See the difference? That’s what I see every time I go to Copyblogger. Notice the quality degradation of the image, how the edges are blurry? That’s what happens when images are scaled using ems (or any relative measure for that matter).
How did they scale those sidebar images? Using this rule in the CSS:
Hey, it’s not my site. They can do what they want, but I think because most Web sites are typographically intense, images that are used should have pop.
What are some other options besides scaling images relationally? You can go with a fixed width layout, then using images that don’t need scaling isn’t a problem. You might also try creating images without scaling and centering them in the column. The only problem is that there might be a lot of space around the images because they aren’t filling the column. Other than that, do you know any other solutions that don’t require em-based image scaling?
Don’t scale images with HTML
I have one last similar note about using images in your Web designs.
Believe it or not, people still use HTML to scale images instead of using an image editing program. At least a half dozen times a week I see HTML scaling of images on Web sites, which then slows down entire pages from loading quickly. You’ve seen what I’m talking about: the page is completely loaded except for some images that seem to be churning away, loading slowly from top to bottom.
I did this on purpose with the image to the right, which is really 1024 pixels wide, though using HTML it’s scaled down to 206 pixels wide using width="206" in the <img> tag (right mouse click and “view image” to see what I mean). The image might look fine, but it’s slowing down this page when it loads. Also, sometimes the image might not look so fine if you haven’t figured out the correct height/width ratio before doing your HTML scaling.
Those are just two issues I see with using images in Web design. Do you have any others? Please leave them in the comments for everybody to learn from.
Photo by thebudman84 and republished here under a Creative Commons license.
This brief tutorial will show you how to customize your Thesis theme, changing it from an em based layout (flexible) to a pixel based one (fixed).
If you look at 100 Web sites built with the Thesis theme and WordPress, I would estimate that 98 of them are using the em based layout (the default). That is, the layout is flexible, not pixel based and fixed. I like flexible layouts, whether they’re em or percentage based, but sometimes that’s not the most appropriate design solution for a given project.
It’s pretty easy to build a fixed width Thesis site if you know what CSS rules to change in your custom.css file. There are four steps to change your layout from flexible to fixed:
Set up your column layout in Thesis > Design Options
Copy the “core layout elements” from the layout.css file
Paste the core layout elements into custom.css, adding “.custom” before each rule
Change appropriate em based definitions to px
Those are the basic steps we’re going to take. Let’s get into the details.
Column layout in Thesis
column preferences for billweye.com
The first thing you’ll need to do is set up your layout preferences in Thesis > Design Options.
First, here’s my obligatory rant about how these preferences are labeled. As of Thesis 1.7, the labels for column widths in the preferences are defined as “pixels”. In fact, you are not entering the pixel width you want, but rather a number that’s then translated into ems using a formula. I’m not going to go on any further, except to say that I explain this problem with more detail in my tutorial, creating a flexible header in Thesis.
Back from my rant … define the column order and widths you want. At this point, the column widths aren’t too important, but you might as well give them the pixel widths you want. The number of columns and the order you want is very important. Define these preferences and save your work.
Copying the “core layout elements”
Now you need to copy the CSS rules that define the layout of your site. There are any number of ways to get these CSS rules; I’ll briefly show you one tool that I use, Web Developer add-on for Firefox. Using that tool you can easily open up all the CSS files. Look under layout.css and find the core layout elements section, then copy all the rules under that block. These are the layout rules for this site in that block (don’t copy these! yours may differ):
[Beware that the formating of the CSS code on this page will look different from what you’ll find in the layout.css file. It’s just the word wrapping that’s different, otherwise the code is correct.]
Did you find your CSS code? Great, copy it and we’re onto the next step.
Paste core layout elements into custom.css
Now that you’ve copied the core layout elements, we’re going to paste those into custom.css and add “.custom” before every rule, like this:
Pretty simple. Now we move onto the heavy lifting in creating a fixed width layout.
Making changes to em based definitions
We’ve pasted our code into custom.css, added “.custom” to all the rules, and now we need to change most of the “em” definitions to pixel definitions. A couple of notes here: 1) I’m using this site as an example, so what you’ll need to change will differ; and 2) always test your site on multiple browsers and operating systems.
Let me show you the changes I made to the above code for this site, then I’ll explain those changes to you. Here are the fixed width CSS rules for this site:
First, note that I didn’t change all of the rules (the rule changes are highlighted in red). For example, I didn’t change any of .no_sidebars rules — it wasn’t necessary because at this time I don’t have any such pages, but when and if I do, I can easily make those changes in my custom.css file. Also, there are some rules that weren’t necessary to change, but they were in the same block of code so for the sake of simplicity I grabbed it all.
The trickiest change to make is the first, the #container width. That number is the product of the addition of either 2 or 3 numbers (in this example 3 numbers are added). #container is the width of your page with all the content inside, so we’ll need to add the width of your main post section and the sidebars, plus (!) any additional margins we add. In this example I added
The last number I added, ul.sidebar_list, is the left and right margin of the sidebar list, which pulls it away from the background and border I styled.
I’m not going to cover all the changes I made above, but let me draw your attention to a few details. On the #content_box .page I needed to take out all the margin space except for the right margin, which gives me space next to the sidebar. For the .teasers_box, that should either be the same or a little less than the #content (mine is 5 pixels less, just in case); and the .teaser should be half or less than the .teasers_box.
Otherwise, the changes should be self explanatory. If you have any questions, please leave them in the comments and I’ll try my best to answer them.
I hope you found this tutorial useful. If you have any improvements to suggest, please leave them in the comments.
Photo by ctankcycles and republished here under a Creative Commons license.
There are many things you can do with Google Analytics, WordPress, and a little Thesis theme magic, but really the tips I’ll go over here don’t require Thesis. Most of what you’ll learn here can also be applied to just about any WordPress theme with a bit of customization.
Before I lay the tips on you, let me point out that there’s a useful plugin called WordPress.com Stats. Don’t let the name fool you, the plugin is for self hosted (WordPress.org) blogs. In addition, you might also want to use WordPress.com Popular Posts (you need Stats for this plugin); the Popular Posts plugin gives me that widget on the sidebar of billweye.com. I like using the Stats plugin because it provides a quick, rough idea in real-time of my blog traffic, which isn’t Google Analytics’ strong suit.
Tools you’ll need
There aren’t many things you’ll need to improve the data collection from your blog using Google Analytics. Start with these plugins:
Thesis OpenHook (only needed if you’re using the Thesis theme, and even then it’s not required, though it makes your life a lot easier)
Widget Logic (this is for the advanced tips I’ll go over at the end of this tutorial)
This tutorial assumes that you have a Google Analytics account, have it set up, and have some very basic understanding of how it works. This isn’t a tutorial about how to use Analytics, it’s to show you how to capture customized blog traffic and action data with Analytics if you’re using a Thesis theme (or not).
Tip 1: Installing your Analytics code
We have to start with this one if you’re using the Thesis theme: under Thesis > Site Options > Stats Software/Scripts never add your Google Analytics code here (I don’t know anything about Mint or other stats software). Never. I know what the fine folks at DIY Themes say; still, don’t install your Analytics code using their method. If you do, then Analytics will also be tracking page views of your traffic on the site, which doesn’t make much sense. To get the most accurate site traffic data, you shouldn’t be tracking any of the administrators, editors, or authors on the site (or at least segment that traffic, which you can do with a Analytics plugin). This is one reason you’re going to install the Google Analyticator plugin, to cut out all of undesirable traffic from your stats.
Tip 2: Getting the most out of your Google Analytics plugin
Before we start customizing the theme, let’s get the most we can out of our Analytics plugin. I’m going to reference Google Analyticator, but for the most part all of the WordPress Analytics plugins have the same features.
As I said above, you do not want to track logged-in users, so make sure that feature is turned off. There are now more granular options in the plugin for logging specific user roles, such as premium subscriber or subscribers. This is a nice feature.
Enable both “event tracking” and “outbound link tracking”. When visitors click on outbound links or downloads, those are events that should be tracked.
If Google Adsense ads are on your site, you should definitely enter your account ID (make sure your Adsense and Analytics accounts are linked). This is going to give you much more information in Analytics, such as what pages are generating the most ad clicks. If you have one page that’s outperforming all the others, you can study the page for the reasons the ads are performing well and try to replicated that formula on other pages.
Tip 3: Using tracking codes for site visitor behavior
Links good for event tracking
Tracking the behavior of visitors to your site might be important. For example, wouldn’t you like to know every time someone subscribes to your RSS feed? That’s an event to be tracked. If you’re using the Thesis theme that may be tricky, depending on what you’re looking to track. In this example, I’ve developed a RSS subscribing widget that fits my needs, that includes other things like a YouTube, Flickr, and LinkedIn links (in another tutorial I’ll go over my “stay in touch” widget). I can go in there and manually edit all those links. First, the code you’ll need:
What you need to do now is customize the variables of the event: category, action, and optional label. For example this is how I might track people clicking on my LinkedIn profile link:
Many people get confused about what variables that can or should use when tracking events. The short answer is, there is no wrong answer; it’s totally up to you and what kind of data that you want to gather. With that said, you want to be smart. In this example, my logic was pretty simple. For the category I used the name of the area where I’m tracking links; any tracking code under Stay In Touch will have the category of “intouch”. The action I was tracking was following links, thus I used “followlink” (note: I will probably use this action with other links on the page because it isn’t category dependent). Lastly, the label is “linkedin”, which is self explanatory; this label should be the one unique variable that you use.
These variables are important because they’ll help you create some great reports in Analytics. In this example, I can create reports that tell me all about the Stay In Touch area (category), or create reports about one specific action on my site (followlink), or I can combine “followlink” and the label “linkedin” (imagine I was tracking multiple “linkedin” links on my site) and see in total how many people were clicking on my LinkedIn profile link. You could go wild creating customized reports if you capture the right data.
Tip 4: Advanced data capture
Let’s continue with the same example, my “stay in touch” widget. But now I want see how effective that widget is on my home page, compared any other page on my site. I’m thinking that even though my home page gets the most traffic, for some reason the widget’s not performing as well as when it’s on a single entry page. That’s the premise for this tip.
"stay in touch" with widget logic
Given this problem, what I need to do is create two “stay in touch” widgets that are the same except for the tracking code, then serve these different widgets onto the appropriate pages (home page, then all other pages).
To begin, we need to install the Widget Logic plugin I mention above. There are similar plugins that purport to be simpler, but I don’t find them such because their user interfaces are convoluted. With the Widget Logic plugin and a little knowledge about WordPress conditional tags, you can do some clever things.
If you look at the image to the left you’ll see my “stay in touch” widget with the Widget Logic field highlighted. That’s where you enter the conditional tags (this example is simple; using PHP you can get pretty elaborate). We’re going to create two of these widgets, one that has is_front_page() (is the front page) and the other with !is_front_page() (is not the front page) in the Widget Logic field.
Next we want to make changes to our tracking code, leaving everything else untouched for our experiment. For the home page (is_front_page()) I’ll use this as the tracking code:
Notice how I changed up the category? Now in Analytics I can create reports comparing the two.
Of course, this is a simple example of what you could do using Widget Logic. If you’ve done some other cool things, please drop a note in the comments.
I’ve got many other ideas for Thesis/Analytics tutorials. What do you think would be most useful?
If you need to roll out multiple WordPress blogs, this article is for you. I’m going to show you how to set up 10 blogs in 30 minutes, or I’ll eat my hat! Not only that, but we’ll set them up with a standard group of plugins, extra search engine optimization, and security hardening to prevent hacking of your blog.
Here are the 4 basic steps:
prepare the WordPress and plugins upload
set-up your databases
configure your wp-config.php file
WordPress install process
Let’s get started.
Preparing a WordPress installation archive
First, download the latest version of WordPress (WP). Here’s the clever part of this step: because of the WordPress automatic update, you’ll never have to do this again. As I write this WP is at version 2.9.2, but when the next version is released and I want to install a new blog, I’m going to upload the older version (that I’m going to customize) from my computer. After I upload version 2.9.2 I’ll upgrade by going to Tools > Upgrade.
Now that you’ve downloaded and opened the zip file to your computer, let’s customize a couple of things. You’re going to need a plain text editor like Notepad (Windows) or TextEdit (Mac) to create four files. Make sure it’s a plain text editor that can create asci text files, otherwise you might have problems.
The first text file you create is named robots.txt. This file is where you’ll include the rules for search engines that index your site; if you restrict the search engine bots from indexing extraneous files on your site, it’s better for the good content on your site. These are the rules for your robots.txt file:
See that last line? That tells search engine bots where you’re site map is; we’ll get to that in a moment, but for now just change the domain to yours. Save the robots.txt file into the WP directory that you unzipped.
Next we’re going to create the .htaccess file. This file can do many things, among them it includes the rules for your permanent link structure (found under Settings > Permalinks). Add the following rules to your .htaccess file and save it into the WP directory.
Options All -Indexes
# protect wp-config.php
<files wp-config.php>
Order deny,allow
deny from all
</files>
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
Highlighted files we'll be working with
First, note that depending on how the preferences are defined on your personal computer (Mac or Windows), you may or may not be able to see any file that begins with a period, as in “.htaccess”. Because of this, it’s probably best to not include the period when you save the file into your unzipped WP directory; you can add the period (don’t forget) after all the files in the WP directory are uploaded to your server using FTP (or better, SFTP). Also, after uploading  the file, removed the “.txt” so that the file’s name is “.htaccess”.
Looking back at the code I gave you for the .htaccess file, let’s review it from the top. To begin with, the first rule tells the server NOT to display the contents of any directory that doesn’t include any type of index file, such as index.php or index.html. This is for the security of WordPress and your server.
The next rule is also for security, and depending on your server may be redundant, but nevertheless won’t hurt anything. The rule allows access to your WP configuration file only from your server.
The last rule in the .htaccess file is for better tracking of statistics if you’re using something like Google Analytics. Did you know that “www.yourdomain.com” and “yourdomain.com” are two different things for search engines and site stats applications like Analytics? True. That means if you don’t force all your site visitors to one or the other domain URL, you may only be tracking some people. So, that last rule forces the server to always add “www” to your domain URL.
The last two text files you’ll create are “sitemap.xml” and “sitemap.xml.gz“. These are empty files that’ll be used by a plugin we’ll talk about soon. Don’t worry about them, though note that you might have to change their permissions using your FTP program in the future, depending on how the server is configured. The plugin will throw an error and tell you if that’s the case. No worries!
Gathering your WordPress plugins
Part of what makes the process I’m showing you so efficient is that you’re doing preparation that doesn’t have to be repeated in the future. So, gathering your plugins first and putting them into the ‘wp-content/plugins’ directory (unzip the plugins and delete the .zip files) will make your life easier. It makes sense because, at least for me, with minor exceptions, I generally always use the same plugins across many different WP Web sites.
You can develop your own set of go-to plugins (favorites), but here are the ones I recommend:
WP-DBManager (for the back-up and optimization of your database)
Again, this is the set of plugins I commonly use. Your set might be different. But, as with the easy updating of WordPress, the same is true with the plugins. If after uploading the WP directory you see that some of the plugins need updating, no problem: go to Tools > Upgrade and update all the plugins in one shot. Finished.
Set-up your databases
Because there are so many variations on how to set-up your database, depending on your server, I’m not going to get too deep into the details. I will note one thing: use strong passwords and unique database and user names. Make them a little weird, for security sake. Other than that, copy down the database info and let’s move on.
Configuring the wp-config.php file
This is straight forward, though let me recommend two things you should do. Under “Authentication Unique Keys” always make the effort to get your keys from https://api.wordpress.org/secret-key/1.1/ and copy them into your wp-config file. Always.
Second, under “WordPress Database Table prefix” always change the default “wp_”. This is for the security of your database. Never use the default. I always throw some random numbers in there like this: “w865p_”. It’s another small step for security, not using default or easily guessed values in your blog configuration.
Installing 10 Blogs Process
You’re ready. You’ve created a customized WordPress directory that you can upload multiple times. Look at that image above of the directory; does yours look like that? It should.
With your first database set-up and the wp-config file squared away, start uploading to your server. While that’s happening, on your other domains create your the WP databases, copying down the corresponding information. After the first upload is finished, move onto the second domain by editing the wp-config file again with the new information, then save. Upload to the second domain. And so on.
See how easy it is to roll out many WordPress blogs once you have a customized directory set up?
If you have any other tips that should be included in this tutorial, leave them in the comments. I can always learn something new.
The following is a tutorial on how to create a full-width image header using the em based layout in the Thesis theme for WordPress.
Increasingly I’ve been using the WordPress framework Thesis to develop Web sites. Some call Thesis a theme, others a framework. I think it’s more of a framework because there’s too much design work to do after installing Thesis, if you really want to customize it.
One of the aspects of Thesis I see people struggle with is the em based design, which is in contrast to the pixel based design so often found on the Web (here are some em resources: Wikipedia definition and history; pixel to em conversion table; general information about using ems in CSS; and using ems to create an elastic layout with css). Out of the box Thesis uses ems to measure just about everything you can think of, including font and column sizes. In general, that’s a good thing expect for the fact sometimes it can cause layout problems with images.
Bird Language site in Safari
Depending on the browser or operating system, ems may scale differently; plus the pixel to em conversion isn’t an exact science. Yes, despite all these issues I still think em based design is often the way to go. For visitors to your sites, ems are more flexible.
I want to show you how to create a full-width header for your site that has an em based layout. This technique isn’t really Thesis dependent; you could apply the same technique on any Web site with an em based layout. Onward!
First, let’s look at the problem. The screenshot to the left is of a site using the Firefox Web browser for Mac OS X. You’ll find similar design reproduction in Safari for the Mac too. Notice that header image? It doesn’t span the entire header because the image is measured in pixels, but the layout is defined in ems. Mark this: even though in Thesis preferences you’re defining the column widths in pixels, the CSS is produced in ems. That is my biggest complaint about Thesis because most people don’t understand what this means.
Eagle Hill School site in Firefox
Think of it like this: you bring plans to a cabinetmaker measured in inches, but when the cabinets are delivered they were produced based on centimeters. You could do that using a conversion, but the finished product might not be exactly what you were expecting.
Let me help you create a full-width image header that solves this problem (and retains the search engine optimization Thesis gives your site).
The two example sites I’m using are the Eagle Hill School Teacher Training (that I designed) and the Bird Language site someone pointed me towards. I’ll be showing you how to create a header like the Eagle Hill School site.
#header background image
First, start with your image design. Your final design will actually be broken into either 2 or 3 different images (all PNG files). With the example at hand I used 2 different images, but I’ll show you why you might want to use a third image.
Take a look at that #header image on the left. The image is much wider than the design would ever require (1840 pixels), but we do that just in case. This image is for the background of the header ID, which is defined thus:
That CSS defines the height of the header (no more than the image height), give a margin if you like, hooks up the background image (which you put into your custom directory in Thesis), and ensure that the image spans both 100% of the height and width without repeating. Notice that I used a PNG file here even though it wasn’t absolutely necessary (it’s not a transparency). I could have used a JPG image, however if I used a JPG for the background and a PNG file for the floating logo, there would have been a problem with color reproduction and matching. Better to make all images PNG.
background image for the #logo
The next image I need is for the logo ID in CSS. This is a transparent image that floats over the background. When you’re designing the header create your background and logo together, then export each image individually. Also, this is important: depending on where you plan on positioning the logo, give your background plenty of space to put it. Notice the tractor in the background is on the right of the image, but the left side (where my logo will be) is clear of distracting information.
Let’s look at the CSS code that produces the logo:
We’ve got two things going on here: a definition for the logo (positions where the logo will be) and the link inside the logo property (where we put the image). One important note: the width and height of the #logo is the width and height of your image. That’s it, except for one more thing …
In the Thesis header there’s also the tagline ID. There’s a couple of different ways to handle the tagline: you can do like I did in this example and hide it using CSS (it will still be available for indexing by search engines), or you can create another image (the third image) and float it opposite from your logo. Here’s the code I used for hiding the tagline:
That’s pretty straightforward, but what about using a background image for the tagline and hiding the text? I can help you with that. Just look at the header of this site. While I don’t use a background image for the header, I do replace the tagline text with an image (the image of people in the header is actually the tagline). Here’s the CSS code that will make that happen:
The trick here is positioning the image. Depending on your site, you’ll have to play around with that. Looking back at the example we started with, I could have made that tractor a third image to replace the tagline text, instead of hiding the text.
I hope this tutorial can help in your Thesis development. If you have any suggestions please drop it in the comments below.
