WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Page Layout w/Round-Div's (4 posts)

  1. mitchpowell
    Member
    Posted 6 months ago #

    I've searched and not found an answer to this. I hope you can help.

    See this diagram for a page I'm hoping to create please:
    http://dev.bluewatermusicfestival.org/reachout/aboutus-proposedlayout.jpg

    Without making posts for each person, and having the words wrap around the expanding-circle images, how can I code this into a page?

    Is that enough information to go on in order to point me in the right direction? I'm not understanding a lot of the"span[1-12]", "section", and "article", and "thumb-wrapper" classes to achieve this.

    Thank you so much :D

    Mitch

  2. nikeo
    Member
    Theme Author

    Posted 6 months ago #

    Hi @mitchpowell, this would require too much coding to be simply shared on this forum.

    As a work around, you could create a "team" category for your posts and flag all team members in this category.

    Then the "team" category archive page would be your "about us" page.

    To change the title of this specific category, you can use the following snippet : http://www.themesandco.com/snippet/changing-the-title-of-the-categories-archive-pages/

    Enjoy your customizations!

  3. mitchpowell
    Member
    Posted 6 months ago #

    I love your theme and I love you even more! Look how quickly you respond to requests. Amazing. If there are awards handed out for "World-Class Support for a Theme," you deserve one for sure! :D

    Thanks so much!

    Now I just need to learn how to exclude "team" from the regular posts. :D

  4. ElectricFeet
    Member
    Posted 6 months ago #

    Alternatively, you can take the html that is output from the theme's post page html and adapt it to a static page.

    It took me a while to figure it out. The following will do what you want, but will need more styling to match your theme colours etc:

    </article>
    
    <article class="row-fluid">
    
      <div class="span8">
        <h2>1st title</h2>
        <p>Add your text here.</p>
      </div>
    
      <div class="tc-thumbnail span4">
        <div class="thumb-wrapper ">
          <img class="round-div" width="270" height="250" src="http://dev.bluewatermusicfestival.org/wp-content/uploads/2013/12/TrevorGreen300-270x250.jpg" class="attachment-medium wp-post-image" alt="Trevor Green" />
        </div>
      </div>
    </article> 
    
    <hr />
    
    <article class="row-fluid">
      <div class="tc-thumbnail span4">
        <div class="thumb-wrapper ">
          <img class="round-div" width="270" height="250" src="http://dev.bluewatermusicfestival.org/wp-content/uploads/2013/12/TheHiggs300-270x250.jpg" class="attachment-medium wp-post-image" alt="The Higgs" />
        </div>
      </div>
    
      <div class="span8">
        <h2>2nd title</h2>
        <p>Add your text here.</p>
      </div>
    
    </article>
    <hr />
    
    <article>

    Add as many of these as you want (each section is defined by a starting <article class="row-fluid"> and an ending <hr />

    Is that enough information to go on in order to point me in the right direction? I'm not understanding a lot of the"span[1-12]", "section", and "article", and "thumb-wrapper" classes to achieve this.

    Notes:

    1. "Article" seems to be key. I needed to switch off the article tag at the beginning (and then switch it back on at the end) in order to be able to use it for each row of content. Otherwise, I cannot get the zoom effect on the circles to be discrete. (That is, without this trick, they all zoom together, rather than for each section.)
    2. The "spans" are explained by the underlying twitter bootstrap scaffolding.
    3. "sections" seem to be a red herring. Divs do just as well.
    4. "tc-thumbnail" and "thumb-wrapper" seem to be part of the placement/wrapping of the image for placement and zooming. By this stage of the page development, anything that looked like a valid incantation to the css-gods stayed :-)

    Let us know how you get on.

Reply

You must log in to post.

About this Theme

About this Topic