Create 4 columns instead of 3

Community Forums Forums Design Tips and Tricks Create 4 columns instead of 3

This topic is: not resolved

Tagged: 

This topic contains 6 replies, has 4 voices, and was last updated by  trentstudios 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1944

    BrettOnTheNet
    Participant
    Post count: 20

    Hi there

    Please forgive me if this is a newbie question (because it is!)

    I want a 4-column layout on the home page of my site. I’m looking at Metric or Executive as potential themes, but they have only 3 columns on the home page. Is it fairly straightforward to make 4 columns here instead?

    I don’t want to purchase a theme and then find it needs major modification to get it to work!

    Thanks for your assistance and patience

    Brett

    #4812

    Susan
    Moderator
    Post count: 9011

    To answer you question, yes, it should be fairly easy to change the layout from three columns to four.

    This tutorial should help you:

    How to create column classes


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #5168

    BrettOnTheNet
    Participant
    Post count: 20

    Thank you Susan. I will check that all out. It turns out that 3 columns looks pretty good so we will probably stick with that. But I will take the time to learn.

    #5189

    Jonas Bystrom
    Participant
    Post count: 1

    I think BrettOnTheNett means how to change the 3-column layout on the frontpage (with page or post widgets) as displayed on the Executive demo. This is *not* the same as creating 4 columns in any page or post, which is described as above.

    The Executive (and other Genesis child themes?) are using a special front page with special “features”. The layout is created by special widgets only possible to place on this special front page. Unless you dig into the css or php coding.

    - But in this case it is simple.
    In the Editor menu, locate the Executive style.css file and change the “width” to 25%  I.e. “width: 30%;” => “width: 25%;”


    .home-middle .widget,
    .home-top .widget {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 30px;
    width: 33%;
    }

    This should do the trick. Note, it will change both the “top” and “middle” sections. If not wanted separate those defs.
    Note 2. I have not fully tested this, it works on the front page, but i cannot guarantee it works … in other cases. I find it always to be a risk to change such things as they can turn up in searches, archive listings, etc, etc with a “surprising” result sometimes. However, this seems risk free.

    /Jonas

    • This reply was modified 1 year, 9 months ago by  Jonas Bystrom.
    • This reply was modified 1 year, 9 months ago by  Jonas Bystrom.
    #5193

    Susan
    Moderator
    Post count: 9011

    Thanks for the clarification, Jonas.


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #5456

    BrettOnTheNet
    Participant
    Post count: 20

    Thanks everyone. This is great. Appreciate all the help.

    #102813

    trentstudios
    Participant
    Post count: 6

    Changing 33% to 25% didn’t work for me. Does anybody know why?
    Thanks!
    Cameron

    .home-middle .widget,
    .home-top .widget {
    	float: left;
    	padding: 0 2%;
    	width: 25%;
    }
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.