Artisteer V3 Beta 2 – Three Sidebars

It has been quite a while since we have written anything for the Artisteer themes community, where a lot has changed with the product and the themes it generates, the latest offering is far closer to the WordPress structure we like, but still has a lot of “art-” functions, however we feel that the latest release if worth a look.

One thing that Artisteer has never done out the box is to add a wide sidebar over two slimmer bars, these are often required for AdSense or other 336px blocks, there are a number of ways to add the script, we can code it easy into the templates pages, but then changing the script could be a nightmare, to make it easy to maintain we prefer a Widgetized area.

The Artisteer Theme

We have created a download with the finished theme and which also includes the Artisteer artx file, we have used Artisteer 3 beta 2, which can be downloaded from the Artisteer news page, this can be installed alongside the 2.xx versions for testing.  

We are going to use one of the Artisteer sample themes, Globocom we can select this when the application loads from the samples folder, this will load the html version.

sidebars-screen-0 

First thing we do is to File -> Change Template -> WordPress

sidebars-screen-1

If we are having a double sidebar then from the Layout or Sheet menu we select ‘Sheet Width’ and change this to 1000px, this gives us 630px for our content as our sidebar area will be 370px.

sidebars-screen-2

Next we change to a three column layout, this we do from Layout -> Columns and select the two right sidebars.

sidebars-screen-3

The widths of our sidebars need to come out at 370px so we select Layout -> Column Width -> Width Options

sidebars-screen-3b

We adjust the width to total 370px, we can have two different widths if we wanted to but the overall width is to match our custom over sidebar.

sidebars-screen-4

At this point we can add or remove Block Positions these are our default widgets assigned to sidebars one and two, and make any other layout changes and we now Export our WordPress theme.

sidebars-screen-5 

The Code

We are only showing screenshots here to copy the code just download and open the files.

We need to add our new ‘Over Sidebar’ to the files, and create some styles, our first file is the defaults.php this file can be found in the /library/ folder in the theme, and the line we have added is at line 27:

sidebars-screen-6 

To add our new ‘Over Sidebar’ the the sidebar widget array, in the sidebars.php this file can be found in the /library/ folder in the theme, and the lines we have added are 5 to 10:

sidebars-screen-7

Our new sidebar has to have a sidebar file in the main folder to call, so we opened one of the existing sidebar- files and saved it as sidebar-over.php then we changed the code to call our new sidebar. sidebars-screen-11

Next is our index.php this file can be found in the main theme folder, we are only showing the over widget on the front page, we could add the code to the other page files if we wanted it site wide.

Just on our landing page will be ok for this example, we have added lines 35-39 and line 50, as we can see we have two new DIV elements, art-sidebars is a container to wrap all three sidebars, art-sidebar-over is our new widget area.

sidebars-screen-8

Stylesheet

These will not display unless we have added a style to style.css which can be found in the main theme folder, styles are read from the top down so we do not change any existing styles but append our new styles and changes at the end.

Note that we may need to change the 50% values to 49% if we have trouble when testing other browsers, notice the added widths, floats, and clear:both, this allows our other sidebars to line up correctly, art-sidebars is our sidebars container.

sidebars-screen-10

That is it we can install and activate our theme, add a text widget and some code to our new widgetized area.

sidebars-screen-12 

Here is the theme with the extra sidebar, there should be enough information here to add the sidebar to other Artisteer themes, but remember that “Version 3” is still beta and structures could change.

sidebars-screen-9 

Visit the supporters page and leave some feedback!

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

6 thoughts on “Artisteer V3 Beta 2 – Three Sidebars

  1. Dear Admin,

    Sorry I didn’t catch your name, but my name is Tim and I’m creating a theme for a client and I an using your tutorial to to setup a top banner widget and a sub menu banner widget using your guide above and have added all the necessary files and code as described above.

    You can view the theme here: http://timothycaron.com/wordpress-themes/
    I’m using the latest version of Artiseer and WordPress Version 3.1.3

    I have placed 1 text widget in each one.
    The top banner should read “this is a 468 x 60 banner
    the sub menu banner should read “this is a 729 x 90 banner”

    This is the code I have added to the appropriate places.
    — defaults.php—

        ‘theme_sidebars_style_banner1’ => ‘simple’,
      
        ‘theme_sidebars_style_banner2’ => ‘simple’,

    —- sidebars.php —–

    ‘banner1’ => array(

        ‘name’ => __(‘Top Banner Widget Area’,THEME_NS),
      
        ‘id’ => ‘banner1-widget-area’,
      
        ‘description’ => __(“This is the 468x 60 Top Banner Sidebar that is displayed in the Header section. Enter your banner code below by dragging a text widget into this area, then copy and paste your banner code here. “, THEME_NS)
    ),   

        ‘banner2’ => array(
      
        ‘name’ => __(‘Submenu Banner Widget Area’,THEME_NS),
      
        ‘id’ => ‘banner2-widget-area’,
      
        ‘description’ => __(“This is the 729×90 Submenu Banner Sidebar that is displayed in the Below the menu section. Enter your banner code below by dragging a text widget into this area, then copy and paste your banner code here. “, THEME_NS)
    ),   

    And created to extra sidebar php files, one named banner1.php & banner2.php as described above.

    Have I done something wrong here.
    Could you help me correct the the problem I’m having?

    Top banner as you notice is displaying a default sidebar where text should be and the submenu banner isn’t displaying anything.

    Thanks again for your time.
    Tim

  2. This post is three sidebars not banners?

    Your website has a few unclosed html tags so there is something wrong in your code.

    Use the validator and fix the errors: http://validator.w3.org/

    If you are using code from the Investica series download ant test the theme from the final post and re-use what you can from the download in your theme.

    David

  3. Hello
    Thank you for tutorial
    I am new to this artisteer program and am trying to add the wide widget.
    I managed from your tutorial add the widget and I can see the widget area in backend.

    I tried to add the code to call in single,php and it will not work this my code for sidebars

    I added this where the gap is

    and added this to style.css
    /* Sidebar Over Style Changes */

    .art-content-layout .art-sidebars
    {
    float: right;
    position: relative;
    display: block;
    width: 370px;
    }

    .art-content-layout .art-sidebar-over
    {
    float: right;
    background-iamge: url (‘images/sidebar_bg.png’) ;
    width: 1005;
    text-align: center /* optional style */
    clear: both;
    }

    Can you please help see where I am wrong and it will position the way you have.

    Govindji Patel

  4. Dear David,

    Tim here and thank you for your post on 3 sidebars. I have a quick question.

    I have incorporated your sidebar method to create a sub-section above the main footer using artiseer, all the widgets work as described but I’m having a problem with the widgets repeating themselves and I can’t figure out for the life of me why.

    The URL is listed below:
    http://timothycaron.com/store1/

    Would you mind taking a look a the above URL and see if you can find my problem. Thanks in advance.
    Tim

  5. Dear Sir,

    Tim here again. I am using your instructions above on a theme that I’m working on at http://timothycaron.com/store1/ the only difference is the sidebars are on the left instead of the right.

    The problem that I’m having is that there is a wide gap between the Sidebars and the post content.

    Would you be so kind as to look at the above url and see if you can find out what I have done wrong.

    Thanks
    Tim

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Blog

Read More