Adding a Widgetized Sidebar to Your Header

NOTE: If you are using Artisteer 4, it already comes with a Header Widget area. However, it doesn’t include styling, so you can just take a glance through the styling elements of this post for adding your desired styling to the widget area. Also, you may want to reference how to create a new block style for use specifically in the header as well. Content below is related specifically to Artisteer 3.

The newest version of Artisteer already comes with a lot of widget spaces, but sometimes you want even a little more flexibility. This post is designed to show you how you can easily add a sidebar area within your header although the same principles can be applied to add a sidebar anywhere within your site. It’s a great place to ad social icons, advertisements, or a slider that you can easily edit and adjust in the future through the use of simple widgets. You can also just simply use it to place a different header image into the header space whenever you want to. Tip: use a plugin like Widget Logic to be able to choose which which widgets display on which pages, posts, or categories and you can easily have your own image or slider per page! Ok, on to the steps.

What you’ll need:

  • An exported Artisteer WordPress Theme
  • A testing platform
  • A text editor (like Notepad which comes as standard on most computers. I recommend downloading Notepad ++ which is also free but helps with alignment and catching missing elements.)

Steps
1.) Look in your exported themes folder to find the sidebar-secondary.php file. Using a text editor, change the code to what is shown below, then save it as sidebar-banner.php. Notice that you replace the word “secondary” with the word “banner” in both the first and second line. Make sure that your original sidebar-secondary.php file stays in tact because you will still need that file if you are using more than one column on your page.

<?php if ( !theme_dynamic_sidebar( 'banner' ) ) : ?>
<?php $style = theme_get_option('theme_sidebars_style_banner'); ?>

<?php endif; ?>

2.) Now, look in the library folder of our theme and open up the sidebars.php. Copy all of the code related to the secondary sidebar and paste it directly above the default sidebar code. Make sure that the spacing and style is identical to those below it. It should begin with a single quotation mark and end with a comma with space above and below. Now change that newly pasted code to look like the following:

'banner' =>  array(
      'name' => __('Banner Widget Area',THEME_NS),
      'id' => 'banner-widget-area',
      'description' => __("This sidebar is active within the header.", THEME_NS)
    ),

Notice that there are three places to replace the word “secondary” with “banner.” Also make sure to change the description text to match where your sidebar is located.

3.) Add your new sidebar into your header.

Open up your header.php file, and add the following code within the header wrapper. You may have a few more or less lines of code depending upon your header’s design and width. It’s usually best to add it directly above the logo code.

<div class="banner-wrapper">
<?php get_sidebar('banner'); ?>
</div>

Notice: You add middle line is what calls the sidebar to the header, and the class wraps it. This class is designed so you can style how the sidebar displays which is in the next step.

4.) Add the dimensions of your sidebar to the stylesheet.

Go into your style.css file, and just above the styling for the logo (usually just underneath the Header Object styling or header.jpg styling), add the following code. Your code will be different depending upon the width and height of your header as well as if you want the header to span the entire width and height of the header area or not. The following code is for a sidebar that covers the entire header area.

/* begin Banner */
div.banner-wrapper
{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}
/* end Banner */

If you want the sidebar to be only on the right side of the header, you could use the following code:

/* begin Banner */
div.banner
{
  position: absolute;
  display: block;
  width: 50%;
  height: 100%;
  right: 0;
}
/* end Banner */

Note: There are a ton of different options for the sidebars position. You’ll need to specific the exact width and height in pixels instead of percentages if you want to add padding or a margin, and you’ll also have to add the exact pixel amount from the top and right or left if you want a smaller sidebar area in a very specific spot.

5.) Finally, open up your options.php file found in the library folder of your theme, and make the following additions.

Copy the following into a text editor

array(	
	'id'	=>	'theme_sidebars_style_default',
	'name'	=>	__('Primary sidebar', THEME_NS),
	'type'	=>	'select',
	'options'	=>	$theme_sidebars_style_options
	),

Change the name from “Primary” to “Banner” and the style “default” to “banner.” Now paste it directly above the Primary sidebar code (the code you just copied and changed):

array(	
	'id'	=>	'theme_sidebars_style_banner',
	'name'	=>	__('Banner sidebar', THEME_NS),
	'type'	=>	'select',
	'options'	=>	$theme_sidebars_style_options
	),

That’s it, you are all finished and able to enjoy your new header widget! Note, if you plan to use a slider or image within the widget space, and you don’t want a margin or you want a style completely different from your other widget styles, it’s suggested that you create a new block style specifically for this new widget area. See my post on adding widget styles to learn how to do this.

© 2011 – 2012, reflectingthedesigner.com. All rights reserved.

March 12th, 2011 at 12:40 pm

Looks nice, giving it a try in a minute, but look … clicking on text file brings.

pologies, but the page you requested could not be found. Perhaps searching will help.

March 13th, 2011 at 6:59 am

Hi Bazish,

Thanks for pointing out the link error. It’s been corrected now.

March 20th, 2011 at 2:30 pm

Ok I edited my code as stated and the banner widget area did show up but it seems to only show the default widget and will not show the Next Gen slide show. Here is the site. http://liveview.uniqueonlineconsulting.com. Did maybe i not do it right?

March 20th, 2011 at 8:34 pm

I apologize if you were subscribed to comments and got several for this post. WordPress was not allowing my code to show up unfortunately.

In looking at the source code, I didn’t see the call to the php and I also noticed an additional sidebar id below it with a complimentary “role” that I wasn’t sure what the purpose was for. That is probably what is messing you up.

Sarah

October 13th, 2011 at 6:03 pm

Hi Sarah,
I have the exact same problem and you’re right, I do have an extra sidebar div saying complimentary and I agree that this seems to be the problem. However, I can only see all this in Firebug and I have no idea which part of the code (which file) needs to be changed to delete this div…
Please help!
Many thanks,Ildi

October 13th, 2011 at 9:18 pm

If you’ve inserted the code into your header, you’ll need to look inside the header.php file to correct the divs. Make sure that your code matches the code I’ve listed above. Also, be sure that you’ve titled your new sidebar the same in every step (the new sidebar.php file name, the name within that file, and the class names throughout.)

October 14th, 2011 at 2:57 am

I’ve redone the whole thing step by step, I’m reasonably sure I’ve got every detail right. This is what I have in the header.php:

I can’t see the extra div here, it just doesn’t make sense to me where that extra div is coming from?

October 14th, 2011 at 3:04 am

Do you have any plugins that are doing anything with the sidebar? That could be your problem.

Your code didn’t come through. If you want to add example code into your comment, just surround it with “” (no quotation marks, though). Also, what is the link to the site in question?

October 14th, 2011 at 3:06 am

Ok, basically, to add code into a comment, you need to surround your code with the word “pre” and “/pre” just replace the quotation marks with the little opening and closing tags instead.

March 21st, 2011 at 9:06 am

No need to apologize i understand. Thank you so much. Going to look at it and re do it. You do such nice work. I told my wife that i want to be able to create at your level one day. Thank you again.

March 21st, 2011 at 9:10 pm

Thanks for the kind remarks. I think you should be all set with your code if you just remove that additional sidebar div. The one that has the div id below the code for the banner.

March 24th, 2011 at 1:13 pm

Hi Sarah,

Thanks for all your help. Any tips on moving the banner to the right side of the header? I’ve tried it in styles.css to no avail.

March 24th, 2011 at 8:31 pm

So, float:right; didn’t do the trick for you? Let me look into it and see what I can figure out.

March 25th, 2011 at 11:30 am

I was out of it when responding earlier. If you only want a smaller widget area on the right side, just add another div wrapper within the header that you can put the sidebar code within. This way, you can align the wrapper css to the right by the usual top: 0; right: 0; method, and you can determine the exact dimensions of your sidebar. Hope that helps.

March 28th, 2011 at 3:57 pm

I got it to work. Thank you again for your help

March 29th, 2011 at 7:54 am

Glad you got it working.

March 29th, 2011 at 1:23 pm

Can I admit I am still confused as to how to create the div to align the widget to the right and the corresponding css. Sorry. :)

March 30th, 2011 at 9:57 pm

I just did a post detailing the instructions for how to wrap the widget within a div. http://reflectingthedesigner.com/wordpress/2011/03/30/positioning-a-sidebar-within-your-header/

Hope that helps.

May 18th, 2011 at 7:00 pm

Hi, thanks for your knowledge, i found this site so useful, i try to place the widgets and since is already viewable in the widgets page it does not shows in the actual template, if you can help me to know what is wrong i’ll appreciate it. :)

May 18th, 2011 at 7:35 pm

Hi Julian,

You’ll need to contact me with the exact steps you took and code you used if I’m going to be able to help you. I won’t be able to know what steps are incorrect without that.

Lars Brinck
May 22nd, 2011 at 4:12 am

Hi, Thanks for knowledge way beyond mine! I´ve tried to follow your instructions with some exeptions – I´m tweaking a friends artisteer theme and the code referred to in the header.php was in the page.php, so I put it there. No secondary-sidebar.php existed so I made one with just you code. No options.php existed either so I made one with just your code as well (is it absolutely needed?). Anyway, I get a widget-area at the right place but whatever I put there (meteor-slides thanks for tip!) I just get a standard sidebar list on the jpg header… I´ve doublechecked code a thousand times… Any ideas??? Thanks!

May 22nd, 2011 at 7:28 am

Lars,

It sounds like you have 2.5. If so, the code is totally different, so the steps will be different as well. You need to make sure that the new sidebar is registered correctly. I don’t know the code for 2.5 off the top of my head, though, to tell you how to add it appropriately.

May 22nd, 2011 at 10:54 am

Ah…So it is. The template is made in artisteer 2.6 – Is the code generated by 3.xx sort of cleaner or easier to read? I´m no php guru, but it is very difficult to see where and what the code does. As for this example, where the page.php seems to manage the stuff header.php does. Thanks for your answer anyway. If I upgrade, will 3.x be able to read the 2.6 artisteer file and make a new wp-template? (And my apologies for bothering you on a sunday:))

May 22nd, 2011 at 10:58 am

I’d definitely recommend the upgrade to 3. It’s got a lot more features, and that options.php file will make sense to you once you go to three as well.

May 22nd, 2011 at 4:29 pm

Thanks – I will upgrade. I returned to the artisteer forum where I got your link (and where you apparently are god :)) – http://www.artisteer.com/?post_id=158409&p=forum_post – and followed the first tip and got it working – when I put his code at “your” place – below the header object div. (result: http://www.teaterslava.org/wordpress/ — site under construction) …ways of the Lord…:)

May 22nd, 2011 at 8:12 pm

Glad you got it working. :)

May 30th, 2011 at 10:15 pm

Hi Sarah,

I read all your notes with jealousy because I am often so lost, I’d love it if this all came a bit easier. I want to have the ability to change a header for just a couple of pages and it seems to be so complicated. I tried your instructions, but I don’t have a page that is just sidebars.php, I seem to have sidebars-top, sidebars-bottom etc. But none that is just plain sidebars.php. I have upgraded to version 3, is there a particular one of those that I should be changing?

Thank you for the generosity of your knowledge.

May 31st, 2011 at 8:39 am

Hi Mary,

Try looking again for sidebars.php because it will be there from a V3 export. That general sidebars.php is where all of the individual sidebars are registered. So you will have the plain, sidebar.php file as well as the secondary, top, and bottom files.

May 31st, 2011 at 5:05 pm

Honestly, I’ve looked at it isn’t there. I am looking in the wp-content/themes/name of my theme folder. Am I looking in the wrong place? They are alphabetical, so there isn’t a way it could be hiding.

Are there certain templates that you make in artisteer that perhaps don’t have a plain sidebar? I have
Sidebar-bottom.php
Sidebar-default.php (could this be it?)
Sidebar-footer.php and
Sidebar-top.php

Thanks again,

Mary

June 1st, 2011 at 12:09 pm

I was referring to the exported files within your WordPress Dashboard. But, if you are just editing the files within the folder, you’ll need to look in the “Libraries” folder to find that sidebar.php file.

mathdoc
June 1st, 2011 at 12:22 pm

Hi.

I think there must be some variation between different Artisteer V3 versions. I have Artisteer Version 3.0.0.32906, but I do not have a lot of the files you mention in this post.

I do not have secondary-sidebar.php, nor do I have options.php. I do have sidebars.php. For me, sidebars.php is located in a folder called “core”.

The content of your options.php seems to be in my functions.php, though it’s a little different. My code looks like:

array(
'id' => 'art_sidebars_style_default',
'name' => __('Primary Sidebar', THEME_NS),
'std' => art_ini_option('sidebars_style.default'),
'type' => 'select',
'options' => $sidebars_style_options
),

I can’t seem to find the code you have in your secondary-sidebar.php in any of my files. Also, your header.php is much different than mine. My header.php contains all the metadata, etc.–everything up to the tag. The actual content for the “header” is located in a file called templates/page.php.

June 4th, 2011 at 8:33 pm

I haven’t upgraded to the newest beta release because I’ve been fairly swamped with projects. I’ll have to check it out when I have the chance.

mathdoc
June 1st, 2011 at 12:24 pm

Woops, the second to last sentence should read “… up to the body tag”

June 4th, 2011 at 5:03 pm

Thank you, I was looking in the wrong place. I’ll try your instructions again.

Thanks again for being so patient.

Patrick
June 28th, 2011 at 8:05 pm

There is no secondary-sidebar.php there is however sidebar-secondary.php. 2.) In sidebars.php, copy the secondary sidebar code and in your text editor, change it to look like the following: what file is supposed to be sidebars.php? Is this the file that you said to name banner-sidebar.php?

June 30th, 2011 at 10:15 am

Patrick,

You should have your main sidebar.php file which pulls information relating to all of the different sidebars, and you should also have a variety of the individual sidebar files such as top, bottom, footer, and secondary. The first thing you have to do is to create a brand new individual sidebar file. The easiest way to do that is to take the sidebar-secondary.php one, make the changes I suggested and save it as sidebar-banner.php. (Sorry about the name confusion.)

In your main sidebar.php file, you just need to make sure that you call to that new file you created. You’ll see that it already calls to the other files, so if you just copy code from one of those (again, the secondary sidebar works best), make your small edits, than copy it back into that file and save.

I hope that clears things up.

July 1st, 2011 at 1:17 pm

I can’t claim to be a programmer, and I’ve been having trouble getting a working sidebar. I’m running the released Artisteer 3 bits, and finding that many of the “art-someting” are “theme-something” in my theme. I’ve tried it both ways, copy/paste from your test doc, or edited to match existing.

I also tried both “banner-sidebar.php” and “sidebar-banner.php”. No change, which leads me to wonder what else I might be doing wrong…

What I get is a default sidebar, that changing the banner widget in the widget screen has no effect on. I’m testing on an internal-only system, so I can’t give you a url to look at it.

Any thoughts? Thanks!!!

July 1st, 2011 at 2:45 pm

Do you mean you don’t currently have any sidebar and you are trying to add one? If so, my tutorial won’t work because you’ll need a lot more code. My tutorial is only for adding an additional sidebar area. Without seeing what you are doing it’s difficult to know where you are going wrong. Can you give me a little more details or steps you are taking?

shalva
August 10th, 2011 at 2:59 pm

Warning: Invalid argument supplied for foreach() in C:\Program Files\VertrigoServ\www\sac\wp-content\themes\ddd\library\admins.php on line 90

pliss help me…

August 10th, 2011 at 3:55 pm

You should not be doing anything with the admin.php file, and since I don’t see the file or the error message I have no way of knowing what is wrong.

AmyJo
August 11th, 2011 at 1:13 am

Sarah, I think the commenter above is confused because (at least on my Art3 themes) the sidebars.php is inside the “Library” folder. If someone is looking to find it among all the other sidebar-x php files it won’t be found.

huyD
August 21st, 2011 at 10:06 pm

I tried your tutorial and got this message:

Fatal error: Call to undefined function art_dynamic_sidebar()….

at step 3: inserting the div in header.php. Could you please help?
Thanks!

August 21st, 2011 at 10:45 pm

I have no way of knowing what’s wrong without seeing the file. Did you follow all of the first steps?

huyD
August 21st, 2011 at 11:52 pm

Yes I did follow all steps. There are 2 versions of Step 3, one in the document from the link and the other is on this page and I tried them both.

Also your instruction: “Open up your header.php file, and add the following code within the header wrapper (if you are using a page wide header) just below the header-object div and on top of the logo code.”

…I don’t have the header-object div but I do have the logo code. So I put the above code above the logo code. I still got the fatal error of Call to undefined function art_dynamic_sidebar()….

August 24th, 2011 at 10:46 am

Did you actually upload the new sidebar php file to your site? It sounds like it’s not finding that php file.

August 29th, 2011 at 5:40 am

HI, I was wondering if I can do the same to add a page wide footer at the bottom of the content?

Thanks for being such a great Artisteer Resource

Hanè

August 29th, 2011 at 6:35 am

I see now that its not necessary since the fist bottom widget can fill the whole space

August 31st, 2011 at 11:39 am

Your welcome. Just remember that the bottom widget area won’t look quite right extending the entire bottom when you have a two column layout. You can always use my same tutorial to easily add another widget area anywhere on the page. If you want it in the footer, simply edit the footer.php file instead of the header.php file. Or, you can also add a new sidebar area to the page.php file. You’ll just need to also add it to the one-column page file as well so it will appear on both one column and two column pages.

September 4th, 2011 at 1:02 pm

Great Site! I appreciate you sharing your knowledge with us. : )

I just picked up artisteer 3 days ago and started to familiarize myself with it. I noticed that there were differences between certain coding examples you gave and what I had in my theme. I have a demo site online that I added the widgit to the header and documented what I did in case it is helpful to anyone.

http://justforblogs.com/demo/wordpress/adding-a-widgetized-sidebar-to-your-header/

Any idea if there is a way to modify the code in the Artisteer – Templates – WordPress – Export – Files directory before hand and have these changes already in place when you create a theme?

Don’t mind if the site is a mess if you do go there to check the code, it is for testing.

Thanks Again

techtom

September 5th, 2011 at 7:29 pm

Artisteer gives you the option of adding your own extra css, but I’m not sure that there is an easy way of editing Artisteer itself so that it puts out what you want. Your test site looks like it has the same code as mine, although the css will of course be different for every site. My css is always a little different as well for the page wide header because I don’t like the way that Artisteer spits out a huge image rather than making use of a repeating graphic. It adds in all sorts of extra divs that are completely unnecessary and fails to make use of repeated small graphics that speed up load times.

September 6th, 2011 at 3:28 pm

The code is pretty close to what you originally had listed. Some of it is different and there are some extra lines of code here and there also the file I created was saved as sidebar-banner.php. Not sure why the other way did not work.

I agree that Artisteer adds some extra coding here or there complicating fine tuning with css. I am not sure why using the Additional CSS Options to add custom css to some items does not work the way it should and the site retains what you configured in the program itself. In all fairness to Artisteer, I have noticed with many different CMS and PHP platforms including the wordpress frameworks that there are issues and workarounds that have to be applied to get things to work right and with every update that brings major changes things break. Makes life interesting : )

BTW, would love to see a How To for building Page Templates for Artisteer if you ever have the time to do one.

Thanks,
techtom

Alen
September 19th, 2011 at 9:17 am

My dear

thanks a lot for your tutorial and I love your web designs.. :)

I have inserted the sidebar to the header so far everything is fine
problems are first that sidebar displays search engine, a list of all my pages, archives, categories, blogroll etc. and second doesn’t shoes the widgets that I insert (like vertical menu)

I can’t figure out how to solve this! I’m using latest Artisteer and WP

Thanks a lot

September 19th, 2011 at 9:26 pm

Have you tried hard refreshing your browser? Also, be sure that you didn’t remove or replace the old sidebar.php but simply used it as a starting point to create a new sidebar php file for your header. How you title things is pretty important and one tiny mistake can really screw things up. I can’t really be of more help without seeing your actual code.

Alen
September 19th, 2011 at 10:13 pm

wow thanks you
I got it work

I just rename all the “art_…” to “theme_…” as it is coded in latest Artisteer

yeh I’m so happy :)

October 13th, 2011 at 9:26 pm

As a note, I’ve corrected a couple of the original mistakes I found in this post. For example, I had listed the sidebar php file incorrectly. It should be sidebar-secondary.php and the new file you create would be sidebar-banner.php. Also, I found an error in the options code suggestions. So, if you were having trouble getting things to work, please revisit the post. The instructions and the code are much clearer now and you shouldn’t have any trouble. I apologize for any confusion.

October 28th, 2011 at 9:23 pm

banner-sidebar.php caused troubles, now when file name is changed everything is in order…
You still keep errors in post, but guess this is deliberately to make people read all and contact for support when having headaches like I did :)
Finally scrolled down to the last comment and Voila!

BTW, used text block before to set html in header, but widget is much better solution. Tnx Sarah!

October 29th, 2011 at 4:47 am

I did make some edits to this post already but must have missed renaming the sidebar. I’d actually much prefer people to get it right the first time than having any issues. Thanks for pointing that out.

Joy
November 2nd, 2011 at 5:13 am

Dear Sarah
Thanks A LOT for your brilliant tutorials, this info opens up so many new possibilities of styling with Artisteer in WP.

I have been searching all over to find a way to add widgets on pages, inside the page (or post).

Can I use this tutorial and place the code in page.php instead of header.php?

with gratitude
Joy

November 2nd, 2011 at 5:20 am

Joy, you can certainly add this same code within the page php file. Just note that if you want the sidebar to appear in both the single column and the page template with a sidebar, you’ll need to add the code to both files. If you want the code to be within the loop, you’ll want to add it to the index.php file. If you do this, be sure to realize that the same widget will appear within every single post, so you’ll need to think through how you add it in.

Maddy
November 4th, 2011 at 1:02 pm

Thanks for this – worked perfectly.

November 4th, 2011 at 8:25 pm

Glad it worked for you. :)

December 19th, 2011 at 7:20 pm

Sarah,
Just a quick note to say thank you for this little write-up on putting a widget up in the banner. I reference this page at least once per website I make. I need to copy it into a text document just in case your server goes down. (haha)

One thing, am I doing something wrong or is the div you use in step 3 does not reference the div you create in step 4. I always have to rename the div in the .css to .banner-wrapper.

Also, what does step 5 do? I’ve forgotten it in the past and everything works. I still do it, just wondering what it does.

Thanks for a great article.
-Jeremy

December 22nd, 2011 at 9:16 pm

Sorry for the late reply, and thanks for noticing the different name for the div. That’s why I always say to make sure that it matches in both the html and the css. I’ve changed the post to match. As to step 5, that’s just giving you the option to choose the default block style within your Theme’s Options page for that new banner area. So, yes, it works fine without that step, you just can’t set a default in the Theme’s Options unless you do it.

January 10th, 2012 at 8:32 am

Hi again. Updated to Artisteer 3.1 and this time your code works out-of-the-box! Q: do you think I can use the same method to create a small widget area in the top right corner – aligned with the (top) menu? I would like the symbols from the translation-plug-in to show up as they were a part of the top menu and not in the sidebar…

January 10th, 2012 at 9:07 am

It’s certainly doable. You just need to add the sidebar code within the nav div instead of above it as you would in the example given.

January 10th, 2012 at 12:02 pm

Genious! Thx. I will try this and come back.

January 20th, 2012 at 2:58 am

Hi again again
One more Q: Is it possible to put one small widget area on top of another? I would like to put a small text rolling in the bottom right corner of the banner-wrapper. Like this: http://www.teaterslava.org (work in progress)
/all the best from icing-cold Sweden…

January 22nd, 2012 at 8:22 am

I was searching for tutorials and stuffs to modify a theme but none of them has helped me except for yours. :D Yours didn’t really apply to what I want actually, but it has helped me to find how to modify the theme to the way I want it. So thanks.

January 25th, 2012 at 5:15 pm

Hi x3:)
As to my question of 10/1 – it worked just as you said. A bit more CSS tweaking but I´m learning. Now I´ll go for the rolling text…
/Still freezing :)

Zoe
January 28th, 2012 at 12:07 pm

Hi,
Thank you for your posts – I was ready to give Artisteer away but I am returning to the software to try and learn how to customise it!

I have followed your steps above and the the new sidebar appears in the header (yey!) and the image I put in the widget appears in the sidebar (souble yey!), but I have image mapped the image using image-maps.com and the map doesn’t work. I have tried it in the body of text to make sure I haven’t make an error with the mapping and it works fine in the body of the text.

Any suggestions?

April 11th, 2012 at 10:28 am

Sarah, I tried your modification on a Template which was designed in Artisteer 3.1.0.48375 but it spans the whole width of the template, and I don’t understand it.

When I look at the CSS code in Firefox’s Web Developer Tools, it looks like the original search bar’s CSS has been added inside the banner’s DIV, as follows:

Do you perhaps know why the extra DIVS are added, and how to get rid of them? I have searched the Artisteer forums and couldn’t find anything related to this matter.

April 12th, 2012 at 12:08 am

If you want to try adding code into the comments you need to add enclose it within pre tags so < pre > (with no spaces) and close with < /pre > (again no spaces.)

You need to look at your actual css styling sheet to see what’s happening. Did you style the wrapper for the new sidebar to the correct width? Did you actually call to the correct divs in your header? Without seeing the code I can’t help you.

April 12th, 2012 at 12:12 am

One other thing. If you are using a page wide header, that will affect how your styling of the wrapper appears when using the percentages in the css. You may want to use actual pixel dimensions instead.

sate
April 30th, 2012 at 11:59 am

Hi,

I tried this tutorial on my artisteer v3 theme. But I got a problem. I’m trying to put flash slideshow on the banner widget, and what i got is the slideshow is on top of header image.
Please help me. And sorry for my bad english

Thanks in advance

Kristin
June 12th, 2012 at 11:18 pm

Hello,

I followed your tutorial step by step and everything has worked perfectly except the positioning. For some reason my banner will not align to the right. I have tried making changes in the .css file but nothing has helped. Could you please look at my site and tell me what I’ve done wrong? Thank you so much in advance.

freetrialsonline (dot) co.cc

June 14th, 2012 at 3:58 pm

Was just on your site and it appears that you got it working ok. The positioning needs to be done to the wrapper (width, height, and position from the top, left, right, and bottom of the page).

June 18th, 2012 at 3:45 pm

Sarah,

I finally got my banner to position properly after I read your other article about wrapping the code. I had been searching for weeks to learn how to do this, and then I saw a link to this post in a forum. Thank you so much for this tutorial!

Kristin

October 10th, 2012 at 9:30 am

Very nice! This can really spice up a website. I plan to use it in one of my next web designs. Thanks for letting us post a comment.
Bill

October 10th, 2012 at 8:58 pm

Thanks, Bill. As a note. If you are using Artisteer 4, it now comes with a widgitized sidebar. However, you still may want to take a peek at this tutorial for the styling element as it doesn’t include any styling on it’s own.

November 19th, 2012 at 10:34 am

Hey Sarah,
Big thanks for the tutorial. worked like a charm :)
As a coding noob I’m pretty happy with the result, although I need to play with css a bit more to make it look perfect.
Anyway, enjoying the playing and thk you soooo much again!

November 26th, 2012 at 7:46 pm

Glad to help. :)

March 1st, 2013 at 12:20 pm

Having the same problem as Kristen above as far as the positioning. It seems that it is ignoring the css that I added
/* begin Banner */
div.banner
{
position: absolute;
display: block;
width: 50%;
height: 100%;
right: 0;
}
/* end Banner */

it sees the wrapper but I can’t change that because that is where my logo is.

LEAVE A COMMENT

Powered by sweet Captcha

Anti-Spam Protection by WP-SpamFree