Friday, 15 May 2015

Edit The Header Design/Site Name Your Blog.

Edit The Header Design/Site Name Your Blog.
the fun stuff.
These blogs are designed in a way that is eye-popping, yet simple enough to edit and make your own without really needing any design skill.
When you unzipped your original package you will have seen a folder named Design. Inside that folder is two more folders:
PSDs and Fonts
Regardless of your design, there are a couple things you're going to need to do:

 1. Install fonts
2. Be able to open PSD files
Installing Fonts:
I often use fonts that are not included in the default set that comes with your operating system, so you will need to install the fonts I've given you so that it is easy to edit and keep the design the same. This doesn't mean you have to use the same font as I did. By all means go crazy, but if you do want to simply change the name, then this makes it really easy on you.

 Here are links to installing fonts, specific to which operating system you are using:


 Once you have the fonts installed, you can open up the header file and simply use the type tool to change the name of the site.
Editing TheHeader Image
Open up Photoshop and then go to file/open and choose header.psd from the PSDs folder that came with your package (mentioned earlier).
now, from the tools pallette (the long skinny one usually on the left), choose the text tool (it's the letter T).

Since you have the fonts installed, all you have to do is click right on the word in the header name. You should now be able to type and change the site name and any other text that is in the header.

You can edit anything else by choose which design elemtns you want to edit by clicking on each one inside the layers pallette:

If you don't see the layers pallette, go to the top menu bar and click Window/Layers
Once you've made the changes and are happy with your header, then you're going to save it and replace it on your blog.


Save and replace your blog header.
The blog header is a .png file. This is because the very top of it is (usually) transparent in my designs and transparency just looks better on .png files.

So, once you're finished editing, do the following:

1. File/Save For Web And Devices from the top menu bar.
2. Save as PNG-24 and check Transparency at top right of Save windows
3. Save file name as header.png

Upload your new header image
Now you need to fire up your FTP program and upload your new blog header.
Log into your server and inside your Wordpress files, navigate to
wp-content/themes/gazette/images/

That images folder is where you will upload your new header. Once you've replaced the image, just refresh your blog in your browser and you should see your new work of art!
J
Anything else you do really depends on your knowledge of Photoshop and your inspiration to be creative. There are countless Photoshop tutorials on the Internet for free if you feel the urge to get down and dirty.
However, I know that you may not even have Photoshop. It's also possible you have Photoshop but prefer something more light weight.
I personally only ever use Photoshop, and the graphic files are layered PSDs, but I did see few programs that are supposed to be able to open PSDs files.
I haven't used any of them myself, but I know many people speak highly of GIMP
Ad Management

There are a few types of existing advertisement blocks that can be edited in your blog.
The great thing is, you don't really have to mess with too much code, since most of your ad management can be done right from the Wordpress admin section.
Here's the three main ad block areas and how to edit them:   
1. Top Sidebar 320px wide (but can use 300x250 ads)
2. To Banner (usually use 468x60)
3. Sidebar Ads (125x125)

You will manage all three of these areas from inside your Wordpress admin:
Log into your Wordpress admin and from the sidebar menu, scroll down to where you see the heading Gazette and underneath that, click the subheading Theme Options

Top Sidebar 300x250 block (320px wide)
This ad block is at the very top of the right sidebar. You can easily add either Adsense or an advertisement banner that is 300x250 pixels in size. Or, you can add your own image that is as wide as 320px and fit snug on the sidebar (like the ebook ads you see in some of the packages)

Now that you're on the Theme Options page, go to the tab that reads:
Top Sidebar (320px)
Click on it to expand it's options.

As you can see above, there are 3 options (with 4 fields to edit)
The first option you see is Disable Ad and it does just what you'd think it would. If you click the check box and Save Changes, then that whole block will disappear from the sidebar.
The second option you see is Custom Code. If you want Adsense to appear in this ad block, then enter your Adsense code into this field.
Obviously, you will want to create a new Adsense block in your Adsense account that is 300x250 pixels in size. Copy the code from your account and then paste it in this field.
You can also put opt-in code, custom HTML, or just plain text in this field.
The third option you see is for a Banner Ad (image). The first field is for the image location. You can put a banner ad image anywhere you want on your server, but to keep things organized, I usually put the ad banners in their own folder (images/ads).
If you want this section to show a banner ad, login to your server with your FTP program and upload your ad to your server to
wp-content/themes/gazette/images/ads (or wherever you want) and remember where you put it. J
Now, fill in the Banner Ad Location
Example:
http://mydomain.com/wp-content/themes/gazette/images/ads/banner.jpg
Now you have to enter the Banner Ad Destination.
This is simply the URL where you want the image to send people when they click on it. (i.e. http://www.yourdomain.com)
Note: If you want a banner image to show, then you will have to be sure that the Adsense field is empty.  If Adsense code is filled in, then Adsense will show by default.
Top Banner 468x60 Block

Everything is the same for this ad block as it is for the Top Sidebar block that I explained above. The only difference is that the ad block will appear at the top of a blog post.
So, in the Theme Options section, this time you will click on the tab,
Top Banner (468x60px)
All the same specs apply that I went over above in the Top Sidebar section.
Simply follow those instructions using a 468x60px Adsense ad block or banner ad.

Sidebar 125x125px Ads
The 125x125 ads are set up as a widget. From the Wordpress admin, you have the ability to choose 1-4 ads that show on your sidebar.
The first thing you're going to do is choose how many ads you want to appear in the sidebar.

You can set it s how 1,2,3, or 4 ads at once. I'd advise setting it to 2 or 4. It's simple and they look good side by side horizontally.
Let's get a visual of what I'm talking about:
First, from the sidebar menu in your Wordpress admin, find the heading Appearance and then click the subheading Widgets


Now you will be taken to the Widgets section. As you can see in the tp right under Sidebar Full Width, I have the 125x125 widget added.
Choose the number of ads by typing in the number (as you can see I have chosen 2. Click Save.
Now, let's go back to the Theme Options section to specify which ads we want to show.
Click on the heading Ads-Sidebar Widget (125x125)
You will see fields to enter information for 4 different 125x125 ads.
For each ad, similar to the other blocks that I described above, you have a location field and a destination field for each one.
Upload your 125x125px ads to your server using your FTP program and where you put them, that will be the Banner Ad Image Location
The Banner Ad Destination is simply the URL where you want the ad to take your visitor

Note: Order and appearance of the 125x125 ads
There are a couple things to remember about how these ads will display:
1. If you set the widget to show 2 ads, then the ones that will show are the first ones in the list (Image # 1 and Image #2)
2. Rotate banners simply means rotate the location of them individually every time the site loads.

No comments:

Post a Comment