Agency Pro – force content and sidebar columns to be same length?

Community Forums Forums Design Tips and Tricks Agency Pro – force content and sidebar columns to be same length?

This topic is: not resolved

This topic contains 9 replies, has 2 voices, and was last updated by  Au Coeur 5 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #97317

    kheilmann
    Member
    Post count: 14

    Hi all, I am new to this site. More of a marketer than a web developer, so I apologize in advance for my lack of technical knowledge.

    I am working on a website for a client (www.invisiblesunenergy.com/temp/) using the Agency Pro theme. The pages (other than homepage) are content-sidebar. He doesn’t like the look of it when either the content or the sidebar is shorter than the other. He wants me to force the content and sidebar to be the same length, even if it means extra white space (which I suppose it would). Is there a way to do this in Agency Pro without custom development? Any code ideas I can pop in to my .CSS files?

    Thanks in advance for any advice.

    Kathy

    http://www.invisiblesunenergy.com/temp/
    #97326

    Au Coeur
    Participant
    Post count: 102

    You can add a minimum height on a case by case basis to whichever one is shorter. How familiar are you with CSS?


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    #97327

    kheilmann
    Member
    Post count: 14

    I am not familiar with writing CSS but I have successfully cut and pasted code (that others have written) into my style.css file.

    Can you show me what the code would look like?

    #97338

    Au Coeur
    Participant
    Post count: 102

    This explains minimum height: http://www.w3schools.com/cssref/pr_dim_min-height.asp

    As long as your sidebar is the same on every page, you can add the min-height to .entry in your css file and it will make it the same height as your sidebar.

    Making the sidebar longer on pages with longer content is trickier because you have to do each page individually. You would add the appropriate height to each page’s sidebar and also add the white background to the sidebar.

    So on the process page, for example, it would look something like this:

    .page-id-146 .sidebar {
    color: #999;
    height: 1338px;
    background-color: #FFF;
    }

    You probably want to round the corners to match.


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    #97501

    kheilmann
    Member
    Post count: 14

    Thank you for this. If understand this approach correctly, it would mean that anytime you make changes to content or the sidebar that affect the length of the longer one, you would have to go back and re-edit the CSS file. Is that correct? It would make it difficult for my client to maintain his website ongoing.

    I wonder if there’s a more automated way of doing this? Or would we be better off switching to a different theme that has content and sidebar defined as equal length as part of the basic design? Any suggestions on a theme that would handle this better? I’ve purchased the whole set of StudioPress themes.

    Thanks in advance for any and all help.

    #97677

    Au Coeur
    Participant
    Post count: 102

    Yes, you are correct that it would require ongoing CSS changes. Another thing you could do is add a background to the content sidebar wrap. This would make them appear to be the same height because they would be in the same visible container. This would remove the visible site background that currently appears between them though, so you have to decide if that is something you want to do stylistically.


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    #97727

    kheilmann
    Member
    Post count: 14

    Actually, that is something my client would be interested in. Could you please show me how to do that? I really appreciate it.

    #97958

    Au Coeur
    Participant
    Post count: 102

    Just add a background to .content-sidebar-wrap in your CSS file.


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    #98216

    kheilmann
    Member
    Post count: 14

    Sorry to be a pest, but can you show me what that code would look like? I’m not a programmer.

    I really appreciate your help so far!

    #98227

    Au Coeur
    Participant
    Post count: 102

    http://www.w3schools.com/cssref/pr_background-color.asp

    Add that to the div I mentioned :-)

    If you want it to be white, use #fff;


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    • This reply was modified 5 months, 3 weeks ago by  Au Coeur.
    • This reply was modified 5 months, 3 weeks ago by  Au Coeur.
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.