Need help with creating columns in widget?

Community Forums Forums Design Tips and Tricks Need help with creating columns in widget?

This topic is: not resolved

This topic contains 21 replies, has 2 voices, and was last updated by  Marcy 4 months, 4 weeks ago.

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #91135

    LaunchPad777
    Member
    Post count: 96

    Hi there,

    Just started using Parallax Pro for client site….

    Need to create 3 columns in one of the Home Section widget areas.
    Essentially there will be an image at the top of each column with some text below each image…similar to the portfolio view you see in some parallax sites….

    This option isn’t offered out of the box for Parallax Pro, so I need help creating it.

    Can this be done using a table like one would do in the Page content area (using something like Ultimate TinyMCE Plugin)?
    Or is there a way of creating the table effect using CSS?

    If so what does the CSS look like?

    Thanks for your help…
    Regards
    Greg

    http://www.test.gregcooksley.com
    #91282

    Marcy
    Participant
    Post count: 286

    This tutorial shows you how to do what you want in two different ways.

    http://wpsites.net/web-design/add-featured-widgets-inline-anywhere-in-genesis/

    The first method is easier because you already have your full-width widget area, so you don’t need to edit the functions.php.
    Brad calls his widget area .category-top. Yours will be called .home-section-1 or .home-section-3 (whatever you choose)

    Brad uses 4 widgets, so where he has

    .category-top .widget {
    float: left;
    padding: 0 2.8%;
    width: 25%;
    }

    You would want

    .home-section-1 .widget {
    float: left;
    padding: 0 2.8%;
    width: 33.333333333333%;
    }

    (This is later in the tutorial)
    If using 33% is too wide, you can try a slightly smaller number.
    Also you may need to add a new image size to your functions.php if you are using the Genesis Featured Page or Posts widgets. It’s this line in Brad’s tutorial

    /** Add new featured image sizes */
    add_image_size( 'featured-category', 100, 75, TRUE );

    You will need to change the size to fit your image.

    If you’re using a text widget, you can adjust the image size yourself. Also if you need to use an editor for your text widget, I like using Black Studio TinyMCE Widget for clients.

    And if you really choose to use a table, you can use Ultimate TinyMCE Plugin, but your page may not be responsive then.


    #91409

    LaunchPad777
    Member
    Post count: 96

    Thanks Marcy,

    Really appreciate you providing so much information….

    If I needed to apply this to a single text widget within the main .home-section-1 area, and not to the entire Home Section……

    I looked at the code using Firebug and this looks like the right area:
    <section id=”text-6″ class=”widget widget_text”> (this shows up on the left)

    But under Style on the right I can’t seem to isolate the code that needs to be targetted….
    What would I need to change?

    If I changed the code and added id=”text-6″ as follows:

    .home-section-1 .widget id=”text-6″{
    float: left;
    padding: 0 2.8%;
    width: 33.333333333333%;
    }

    Thanks again…
    Regards
    Greg

    #91458

    Marcy
    Participant
    Post count: 286

    OK. You said three columns.

    I am recommending that you install three text widgets in your home-section-1 and spread your content yourself between them.

    Then the code will work.

    Add the three text widgets and the content you want, and then I can look at it.


    #91567

    LaunchPad777
    Member
    Post count: 96

    Hello Marcy,

    Okay I added the 3 text widgets (using Black Studio TinyMCE Widget) and added the image and content for each one.
    Also added the complete code from Brad and only changed this section:

    .home-section-1 .widget id=”black-studio-tinymce-4″{
    float: left;
    padding: 0 2.8%;
    width: 33.333333333333%;
    }
    However, that didn’t produce the required effect…..

    As a test, I then also added a further text widget with just 3 images to see if that would work.
    And changed the code:

    .home-section-1 .widget id=”black-studio-tinymce-6″{
    float: left;
    padding: 0 2.8%;
    width: 33.333333333333%;
    }

    Still no change….

    Any ideas
    Regards
    Greg

    #91718

    Marcy
    Participant
    Post count: 286

    First:
    Right now in home-section-1, I count 9 text widgets (some are Black Studio text widgets), but there are 9.
    In home-section-2, there are 2 text widgets, and in home-section-3, there is one text widget.

    Which section are you working on?

    If you are trying to put 9 text widgets in home-section-1 and float them three across, Brad’s code should still work for you.

    Second:
    Do not add that “id=…..”to the code; you are breaking it.

    Just add the code below to your style.css just before the first @media section, and then let me look at it.

    .home-section-1 .widget {
    float: left;
    padding: 0 2.8%;
    width: 33.333333333333%;
    }

    • This reply was modified 5 months ago by  Marcy.
    • This reply was modified 5 months ago by  Marcy.
    #91740

    LaunchPad777
    Member
    Post count: 96

    Hi Marcy,

    This query is only for ONE of the widgets in home-section-1….so only trying to target one widget….
    The reason is that there is a variety of content in home-section-1 and each type of content needs to be formatted in a seperate widget. See screenshot http://screencast.com/t/DZCCDYweY

    So the first widget contains content and and several images….
    The second widget is the one we are dealing with here and it needs the 3 widgets to be horizontally arranged next to each other.

    So how do I target the right widget? I thought you had to try and target using the “id”???

    Will the code you mention above target the correct widget?
    Regards
    Greg

    #91752

    Marcy
    Participant
    Post count: 286

    It wasn’t clear that this is what you asked in your OP, but I will try to help you.
    You do need to target each specific id, if they all have different widths. But you do it with #

    So the first widget would be:

    .home-section-1 .widget #black-studio-tinymce-2 {
    float: left;
    padding: 0 2.8%;
    width: 100%;
    }

    Then you need:

    .home-section-1 .widget #black-studio-tinymce-3,
    .home-section-1 .widget #black-studio-tinymce-4,
    .home-section-1 .widget #black-studio-tinymce-5 {
    float: left;
    padding: 0 2.8%;
    width: 33%;
    }

    This should give you something close to what is in your image.
    If you’re using plain text widgets, the code would be:

    .home-section-1 .widget #text-6 {
    float: left;
    padding: 0 2.8%;
    width: 100%;
    }
    
    .home-section-1 .widget #text-7,
    .home-section-1 .widget #text-8,
    .home-section-1 .widget #text-9 {
    float: left;
    padding: 0 2.8%;
    width: 33%;
    }

    You will need to adjust the ids and widths to match what you want.


    #91760

    LaunchPad777
    Member
    Post count: 96

    I do apologise Marcy,

    This parallax is a huge learning curve….but no excuse!

    Just confused as to whether I need to keep Brad’s code in place and insert the code above into it OR whether to delete his code?

    #91767

    Marcy
    Participant
    Post count: 286

    Just try the code above. It’s Brad’s code, but more specific for what I could see on your site.


    #91786

    LaunchPad777
    Member
    Post count: 96

    Hi Marcy,

    Ok removed Brad’s code and just inserted the code above…..

    Unfortunately it is not working.

    #91792

    Marcy
    Participant
    Post count: 286

    I can’t see any code added. Is it still there? I need to see it with the code.


    #91803

    LaunchPad777
    Member
    Post count: 96

    Hi Marcy,

    I had added the code above the @media section as you had instructed…

    Moved it now to the end of the last code in the editor.

    However, just now, Andrea on another post mentioned this:

    http://my.studiopress.com/tutorials/content-column-classes/

    So I started playing around with it and got 3 images in a row on another text widget…
    The only thing is that I have to find out how to accurately format the text because all the text in the design is justified on both sides…..

    It’s almost 1am here in South Africa so I’m going to hit the sack….feels like my eyes are square…
    Thank you for your help.
    Highly appreciated.
    Regards
    Greg

    #91840

    Marcy
    Participant
    Post count: 286

    Hi, Greg,

    OK. It’s my fault; I’m really sorry. I used the wrong selectors in the first place and then kept repeating my mistake. :-/
    Chalk it up to me looking at it with tired eyes in the first place.

    You can use column classes, but what we are doing is putting each text widget into it’s own column (using the column class code basically.) If you want all your images and text in one big text widget, I can write that for you, but I thought it would be easier if you have a different widget for each set of image and text. I think it will make it easier for you to edit, but let me know.

    In the meantime, this will work for what you have.
    You can leave the code at the end where you have it, but this is what you need:

    .home-section-1 .widget#black-studio-tinymce-2  {
        float: left;
        padding: 0 2.8%;
        text-align: left;
        width: 100%;
    }
    .home-section-1 .widget#black-studio-tinymce-3,
    .home-section-1 .widget#black-studio-tinymce-4,
    .home-section-1 .widget#black-studio-tinymce-5  {
        float: left;
        padding: 0 2.8%;
        text-align: left;
        width: 33%;
    }

    Notice how the selectors are run together now with no space between .widget and #black-studio-tinymce.

    Right now your text should be centered.
    I added a text-align: left to each section of code, in case you wanted that, but that will affect the titles too, so let me look at it once you correct the code


    #91900

    LaunchPad777
    Member
    Post count: 96

    Thanks Marcy,

    No problem at all…..last night I eventually couldn’t see the wood for the trees either…

    Tried the code but still not working I’m afraid….the three widgets remain one on top of the other.
    I wonder if it is not part of the parallax code somewhere.

    I have left the code and widgets in place for you to look at…

    Regards
    Greg

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.