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 5 months, 4 weeks ago.

Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #91915

    Marcy
    Participant
    Post count: 286

    Greg,
    I think you’re missing a close bracket in your style.css.
    At the end, you have this code:.
    Find your first line below where you added the HOME SECTION 2
    home-even .home-section-2 widget-area {
    and add a } on the line below so it looks like this

    home-even .home-section-2 widget-area {
    }
    /* Adding columns for product areas HOME SECTION 2 */
    home-even .home-section-2 widget-area {
    
    #column1-wrap {
        float: left;
        width: 200px;
    }
    #column1{
        background-color: #FFFFFF;
        margin-right: 200px;
    }
    #column2{
        background-color: #FFFFFF;
        float: left;
        width: 550px;
        margin-left: -200px;
    }
    #clear{
        clear: both;
    }
    
    .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%;
    }

    I think that’s all that’s wrong now; that’s why I could never see the code you added. This time I copied your style-sheet and tried it myself, and it’s working for me.
    Add all your images and text, and I’ll look at it again.


    • This reply was modified 6 months ago by  Marcy.
    • This reply was modified 6 months ago by  Marcy.
    • This reply was modified 6 months ago by  Marcy.
    • This reply was modified 6 months ago by  Marcy.
    #91937

    LaunchPad777
    Member
    Post count: 96

    Hi Marcy,

    Thanks so much…..it worked…

    Need to figure out what padding and or margins should be inserted to get it all lined up as per the
    screenshot http://screencast.com/t/DZCCDYweY

    In the meantime, I changed text-align: left; to text-align: center;

    I really appreciate you sticking with this and finding the solution.

    Regards
    Greg

    #91950

    Marcy
    Participant
    Post count: 286

    Great! And thank you for sticking too!

    If you change the 33% to 33.333333333% it will line up better at the right edge with the full-width widget.

    Here are some things to think about. It’s much easier to work with images that are all the same size because then they line up by themselves.

    Yours are:
    brain – 127x106px
    heart – 128x170px
    hand – 125x189px

    If you used an image editor to add them all centered in a background that was at least 128px x 189px, then they would all line up as in your screen shot.

    The padding is controlled by the line:
    padding: 0 2.8%;

    The 0 is the top and bottom padding – above the images and below the text; you can change the 0 to 40px or smaller. The 2.8% is the left and right padding – you can make it smaller or larger and also change it to px, if that is easier for you.

    You also might want a background-color on the entire .home-section-1 to make it look like the screen shot

    .home-section-1 {
        background-color: #fff;
    }

    All the best, Greg!


    #92046

    LaunchPad777
    Member
    Post count: 96

    Thanks Marcy,

    Good point about the image size…changed them all to one size and it’s sorted…

    Is there a way of controlling the padding and/or the margins under the text directly to ensure that each “text Box” (for want of a better word) is the same height?

    Tried getting it right by inserting <p></p> but it is not precise.

    As far as the background colour is concerned, if I change that parameter, it makes the whole background go white from left to right….you will notice in the screencast that the white area is meant to be fixed width and that there is a grey background behind the website…… http://screencast.com/t/gcho9uhP

    I was able to control the width of the widget area by using this:
    /* Change background colour to white HOME SECTION 1 */
    .home-section-1 #black-studio-tinymce-2.widget {
    background-color: #FFFFFF;
    }
    .home-section-1 #black-studio-tinymce-3.widget,
    .home-section-1 #black-studio-tinymce-4.widget,
    .home-section-1 #black-studio-tinymce-5.widget {
    background-color: #FFFFFF;
    }
    BUT, that still leaves a gap between the Header and the Home Section that isn’t white.

    Any ideas on how to get the text and other content to be a specific width?

    Thanks again,
    Regards
    Greg

    #92057

    Marcy
    Participant
    Post count: 286

    OK, you’re right about the background color on .home-section-1 covering the entire area.

    This will do it though:

    .home-section-1 .wrap {
    	background-color: #fff;
    }

    That will be easier than trying to make the actual widget heights the same.
    If you want the white background behind .home-section-2 to be the same width, and not full width too, you would use. You can add as many sections as you need.

    .home-section-1 .wrap,
    .home-section-2 .wrap {
    	background-color: #fff;
    }

    And then you may need to remove the background-color on .home-even too, but that will affect the background-color width of your other home-sections too.

    You shouldn’t need a background-color on the widgets themselves then, but it doesn’t hurt to keep them.

    As for the gap between the header and .home-section-1, that is part of Parallax Pro.
    You need to find this section

    .home-even, 
    .home-odd {
        clear: both;
        font-size: 28px;
        overflow: hidden;
        padding: 190px 0 200px;
        text-align: center;
    }

    and edit the padding line. 190px is at the top and 200px is at the bottom, and it will affect each of your home sections.

    I believe if you leave the section above, and add this new section right below the section above, that you will be able to edit the padding on only .home-section-1 until you get what you want. First work on adjusting the top padding, and then the bottom.
    .home-section-1 {
    padding: 190px 0 200px;
    }

    But that’s probably a question for another thread though.


    #92172

    LaunchPad777
    Member
    Post count: 96

    Marcy,

    You are a star….thanks so much for your help.

    Will let you know what the client says!

    Best regards

    Greg

    #92423

    Marcy
    Participant
    Post count: 286

    You’re welcome, Greg. I’m glad it worked out!

    Regards, Marcy


Viewing 7 posts - 16 through 22 (of 22 total)

You must be logged in to reply to this topic.