Giving Way For An Advertisement Banner

[veheme]

Hi, I was wondering... would it be possible to cut the current site banner into half or even 1/3 in order for the rest of the space to be for an advertiser? I was thinking about selling Advertisement spaces or putting Adsense there. Would that be possible?

[drake]

You can use Header Widgets area for this. You can adjust that area by Custom CSS to take how much room is needed.

[veheme]

Would it be possible to help me out on what to edit to adjust my header banner size to give way for advertisement banners?

I already have a code for the social media button (like, +1, tweet) in my right header widget but they are small and are in-line with the navigation bar below header. How do I put the advertisement banner above it?

[drake]

I said above - use Header Widgets Area. If you are curious to visit Appearance -> Widgets you will see this area above "Right Header Widget" area on the left - is a separate area. Put your advertisement there. If you need help to adjust by CSS the result I will need the url of your site (please, don't tell me that you already post the url in another thread, I don't have time to search my posts, but of others...)

[veheme]

In my right header widget (in the Widgets section), I already put in this code for my social signal buttons:

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fjosephsu.com%2F&amp;send=false&amp;layout=button_count&amp;width=82&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=123271127759845" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://josephsu.com" data-text="Joseph Su the Pinoy Internet Marketing Specialist" data-via="jjsu1991">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium" href="http://josephsu.com"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

I have a few problems.. I tried to put in a banner with the size 300 x 150 (in order to only get the 1/4 or 1/3 space of the whole header) but instead, I get repeated images which take up all the space.

Here is my blog/URL: http://josephsu.com

I want the header to be like this: http://www.wolf-howl.com/ -- you see that 2/3 of the space of the header is empty? That's because the space is for sale.

Sorry, I'm a real noob at this.

[drake]

Man... a theme give you the tools to show something, but cannot take your place to thinking/arranging/writing things... What is our job if we simply activate a theme and expect from it to show something that we saw on another site? This is your job - by using instruments offered by WordPress/Themes/Plugins to obtain the look and feel needed for every site...

You tell me that your title is too long... But... Suffusion written your title? If you wish to be shorter why you don't use the usual way? At Settings -> General you have 2 fields - one for title, one for description. Put in the first field only "Joseph Su" then in the second "help....." Go at Suffusion Options -> Other Graphical Elements -> Header and check to have "Description / Sub-Header Alignment" on the left and "Description / Sub-Header Vertical Alignment, relative to header" below the header... Take a look to your site... Done, isn't?

If you wish to stay stick to your actual title can use another option. Add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles:

Code: Select all

h1.blogtitle, h2.blogtitle {width:300px;}

(you can play with the value of 300px until you are happy with the look).

But, if you really wish a header to look profi, you can make a image in a graphic editor, like this attached.

joseph-su.png (41.62 KiB) Viewed 505 times

Go to Suffusion Options -> Skinning -> Header, select "Custom Styles" at first options, scroll to "Header Foreground Image Type", select "Use a predefined image or logo", then below click on the "Upload" button and upload the image from your computer... Save the options page... Take a look at your site - Isn't better?

Now... go and add your Advertisement in HEADER WIDGET AREA... You drive me nuts with right header widget... there are 2 completely separated areas!!!

[veheme]

Thank you for writing all that for me, Drake.

I really am trying my best to do what I can to make my ideas become a reality in my site, I really am. It's just that I'm not experienced in these things. I go here, in this forum, when I'm desperate (by desperate, I mean spending a whole day trying to change a single thing).

Sorry if I made you frustrated or angry. Still, thank you for pointing out every issue by going out your way and writing that long post with all the details included. Thank you so much.

[veheme]

Okay, I have done everything you have said and everything worked out EXCEPT the part about the widgets area. I put the adsense code in but it seems to not be aligned with my site banner. As a result, they are not aligned and there is a lot of space on either side.

You can look at what happened here: http://josephsu.com/

[drake]

It's just perfect. Now add at Custom Styles:

Code: Select all

#header {width:300px;height:120px;float:left;padding:0;}
#header-widgets {width:680px;float:left;padding-left:15px;}

[veheme]

WOW! Perfect -- just perfect! Thanks Drake!