"Would you like to upgrade this site to Pro?" destroyed my CSS

I’m trying to get Pro Sites set up. I enabled the radio buttons with the “Would you like to upgrade this site to Pro?” question, and it totally wrecked my registration page. I’ll attach a screen shot in a minute.

  • jimmybarr
    • Design Lord, Child of Thor

    See screenshot. Before I enabled the "Would you like to upgrade this site to Pro?" thing, the Terms of Service box was up toward the top of the form, right underneath the "Blog Details/Yes, I'd like to create a new site" check box. Now it's pushed way down the page and … well, you can see.

  • Patrick
    • Support Monkey

    Um, well, gee. Without me I guess you’d have to learn how to track down CSS bugginess on yer own :slight_smile:

    Here’s a great place to start if you want to learn more about it:

    http://htmldog.com

    It`s also important to learn how to use your favorite browser’s developer tools. In Firefox, the tool is the Firebug addon. Most other browsers have the tools built-in.

    Check ’em out. It’ll sure make your job of customizing things a heck of lot more fun for you!

  • jimmybarr
    • Design Lord, Child of Thor

    I use Firebug, and I have been tinkering with the Studio theme quite a bit. I just would have had no idea to do this, exactly:

    clear:left;

    height:auto;

    line-height:2em;

    I’ve learned a lot, yet I’ve a lot to learn. Next I need to figure out how to break the header div into 3 or 4 smaller divs so I can display 3 or 4 small affiliate banners instead of one huge one. I’ll check out htmldog.com.

  • Patrick
    • Support Monkey

    Hiya @jimmybarr

    The first time I dared dip my toes into coding, I was nervous too. Just make backup copies of any files you modify before messing around with them.

    So here are the important bits from that article in an easier format for your requirement:

    1. For each new widget area you want in your header, add the following to your functions.php file and adjust the name only:

    register_sidebars( 1,
    array(
    'name' => 'header-widget-1',
    'before_widget' => '
    <div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>
    ',
    'before_title' => '
    <h2 class="widgettitle">',
    'after_title' => '</h2>
    '
    )
    );

    Then, add the following to your header.php file where you want the widgets to appear (remember to change the name to the same as above). Perhaps just above the code for the main nav?

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header-widget-1') ) : ?> <?php endif; ?>

    Now go add a widget to your new sidebar(s) under “Appearance” > “Widgets” and you should see it appear in the header of your site.

    It’s gonna look completely wonky at first, ‘cuz it hasn’t been styled yet. So that’s the next step you get to play with :slight_smile:

    I hope this helps!

  • jimmybarr
    • Design Lord, Child of Thor

    Patrick — Check it out. I don't completely understand all the PHP that was used, but I was able to locate the right file (actually not header.php) and insert the 4 new widgets I made. Then I styled each widget individually (seems like there should be a way to make a class or something, considering all 4 are styled the same)

    float:left;

    width:25%;

    But you can see the results are awesome. (never mind that all 4 affiliate links are for the same advertiser — working on that)

  • Patrick
    • Support Monkey

    Beautiful job!

    And, yes you can add your own class to them. In the code above, just change this:

    <div id="%1$s" class="widget %2$s">',

    …to this:

    <div id="%1$s" class="my-class widget %2$s">',

    Change my-class to whatever you like. That will apply your custom class in addition to the auto-generated class to each widget in that sidebar. You can add the same class name to all 4 of them so they inherit the same styles.

  • Patrick
    • Support Monkey

    Short answers: yes and yes. :slight_smile:

    Better answer: create a style.css file and add the following to it. Save it to a new folder called SimpleMarket Child.

    /*
    Theme Name: SimpleMarket Child
    Description: Child theme of SimpleMarket theme
    Author: Jimmy Barr
    Template: simplemarket
    Version: 0.1.0
    */

    @import url("../simplemarket/style.css");

    Copy all the files you’ve modified from SimpleMarket to your new child folder, while respecting the exact folder structure of the parent (create the folders if necessary).

    Now you have your child-theme; it’s no more complicated than that.

    You can either upload it via FTP, or zip that new folder into a another called SimpleMarket Child and upload it via the WP theme uploader.

    Once uploaded, activate the child theme. You should see no changes whatsoever to your site. Now you can continue customizing the heck out the child-theme, with no risk of losing your work when you update SimpleMarket.

    Have fun! :slight_smile:

  • Patrick
    • Support Monkey

    Oh, there’s one other thing; an important one too.

    The functions you have created will need to go in a functions.php file in the child-theme. However, do not copy the functions.php of the parent. That will create nothing but problems.

    If the only custom functions you have are for the widgets, the contents of your child functions.php should look like this:

    <?php
    register_sidebars( 1,
    array(
    'name' => 'header-widget-1',
    'before_widget' => '<div id="%1$s" class="my-class widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>'
    )
    );
    register_sidebars( 1,
    array(
    'name' => 'header-widget-2',
    'before_widget' => '<div id="%1$s" class="my-class widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>'
    )
    );
    register_sidebars( 1,
    array(
    'name' => 'header-widget-3',
    'before_widget' => '<div id="%1$s" class="my-class widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>'
    )
    );
    register_sidebars( 1,
    array(
    'name' => 'header-widget-4',
    'before_widget' => '<div id="%1$s" class="my-class widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>'
    )
    );
    ?>

    Be sure to remove the sidebar codes you added to the parent functions.php also. If you have added other custom functions, cut/paste them to the child.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.