WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Main Body images and text alignment (15 posts)

  1. dred4
    Member
    Posted 10 months ago #

    Hello everybody,

    I have an old site that is in desperate need of renewal which I am now updating using the customizr theme and templates.

    However I am trying to align my images with text in the main body area exactly like my old site which is : http://www.redman-films.com

    I've searched everywhere on these forums and the best I got was the styles to ensure that the text was closer to the image.

    I would like to be able to use the same format (from my old site) i.e 4 photos with text below, instead of having to use 2 photos side by side followed by the other 2 beneath.

    If there is a solution, please help.

    Thank you.

  2. rdellconsulting
    Member
    Posted 10 months ago #

    You need to read up on Twitter Bootstrap 2

    When you've looked at the grid & understood it, you'll see that within the central container, you'll need to code something like:

    <div class="row-fluid">
    <div class="span3"><img xxxxxxxxxxxxxxxxxxxxxx><p>yyyyyy</p>
    <div class="span3"><img xxxxxxxxxxxxxxxxxxxxxx><p>yyyyyy</p>
    <div class="span3"><img xxxxxxxxxxxxxxxxxxxxxx><p>yyyyyy</p>
    <div class="span3"><img xxxxxxxxxxxxxxxxxxxxxx><p>yyyyyy</p>
    </div>

    You need to invest in learning, but well worth it I can assure you!

  3. rdellconsulting
    Member
    Posted 10 months ago #

    I'll try again!

    You need to read up on Twitter Bootstrap 2

    When you've looked at the grid & understood it, you'll see that within the central container, you'll need to code something like:

    <div class="row-fluid">
    <div class="span3"><img xxxxxxxxxxxxxxxxxxxxxx></img><p>yyyyyy</p></div>
    <div class="span3"><img xxxxxxxxxxxxxxxxxxxxxx></img><p>yyyyyy</p></div>
    <div class="span3"><img xxxxxxxxxxxxxxxxxxxxxx></img><p>yyyyyy</p></div>
    <div class="span3"><img xxxxxxxxxxxxxxxxxxxxxx></img><p>yyyyyy</p></div>
    </div>

    You need to invest in learning, but well worth it I can assure you!

  4. dred4
    Member
    Posted 10 months ago #

    Thank you - I'm going to do just that. Whilst I can get my head around most aspects of filmmaking, cameras, lenses, film, sound, editing and all the other stuff that goes with that, css, php, java etc, has not been my strong point. But you're right, I guess the time has come to pull up my own bootstraps :))

  5. dred4
    Member
    Posted 10 months ago #

    Learning bootstrap and really enjoying it. A little steep learning curve for me, but I am understanding how things work a little bit.

    You mention the "central container" , is this found on the index.php? I assume I would need to make a copy of this and edit into my child theme?

    Is customizr based on Bootstraps 12 column grid system?

  6. rdellconsulting
    Member
    Posted 10 months ago #

    Central container was not the best description in the world!

    In CSS terms, I meant the #main-wrapper section that runs down the centre (with possibly left/right sidebars to each side).

    When you Dashboard>Pages>Edit, what you put in the Editor is what appears in that container/wrapper so nothing to do with index.php or child themes.

    Customizr is most definitely based on TB2.

  7. dred4
    Member
    Posted 10 months ago #

    With reference to the code, just so I am doing this right. I use the CSS editor and paste in your code. The images I assume will contain the images I use on the site?

    I am now a little more confused as to how would the text then fit underneath the images when I use the page editor?

    Sorry, but thanks for your help....

  8. dred4
    Member
    Posted 10 months ago #

    PS: Will this be responsive too? I guess the "span" has been broken up into equal parts. I'm struggling with the content on the page not aligning.

    I've tried using TinyMCEAdvanced with its table features but the alignment again seems way off and I can't seem to correct the text to the image.

    My previous site was designed in iWeb and this was so convenient to just add text boxes and align the images accordingly with no use of code.

    I can send you a link to the site I am currently re-designing which may help with visualizing my problem.....

    Thanks again

  9. rdellconsulting
    Member
    Posted 10 months ago #

    Nope! My code is HTML and is just pseudo-code to show you the way to go.

    Dashboard>Pages>Edit puts you into an Editor with Visual/Text tabs. Visual = No HTML, Text = HTML so that's the setting you need. (TinyMCE will give extra buttons for the Visual tab).

    The image will be described similar to:
    <img class="span3" alt="(what displays before image is rendered)" src="/wp-content/uploads/filename.png" width="150" height="150" />

    The Text will go between the <p>, </p> tags

    Give us a link to see how you're doing...

  10. rdellconsulting
    Member
    Posted 10 months ago #

    TB2 is what makes the code responsive (unless you choose not to use it). That's the difference between <div class="row"> and <div class="row-fluid">

  11. dred4
    Member
    Posted 10 months ago #

    http://www.sundanceceremonies.com/Here/

    As you can see I'm trying to get the Contributors listed side by side with text appearing below....

  12. rdellconsulting
    Member
    Posted 10 months ago #

    So rip out the 2 <table></table> sections and that's where your new code should go. Something like:

    <div class="row-fluid">
    <div class="span6">
    <a class="grouped_elements" title="Red Man" rel="tc-fancybox-group4" href="http://www.sundanceceremonies.com/Here/wp-content/uploads/2013/10/dov_simens.jpg">
    <img class="size-thumbnail wp-image-168" width="150" height="150" src="http://www.sundanceceremonies.com/Here/wp-content/uploads/2013/10/dov_simens-150x150.jpg" alt="Dov Simens">
    </a>
    <p>yyyyyy</p>
    </div>
    <div class="span6">
    <a class="grouped_elements" title="Red Man" rel="tc-fancybox-group4" href="http://www.sundanceceremonies.com/Here/wp-content/uploads/2013/10/Thomas2-filtered.jpg">
    <img class="size-thumbnail wp-image-220" width="150" height="150" src="http://www.sundanceceremonies.com/Here/wp-content/uploads/2013/10/Thomas2-filtered-150x150.jpg" alt="Thomas Dullien">
    </a>
    <p>yyyyyy</p>
    </div>
    <div class="span6">
    <a class="grouped_elements" title="Red Man" rel="tc-fancybox-group4" href="http://www.sundanceceremonies.com/Here/wp-content/uploads/2013/10/dov_simens.jpg">
    <img class="size-thumbnail wp-image-168" width="150" height="150" src="http://www.sundanceceremonies.com/Here/wp-content/uploads/2013/10/dov_simens-150x150.jpg" alt="Dov Simens">
    </a>
    <p>yyyyyy</p>
    </div>
    <div class="span6">
    <a class="grouped_elements" title="Red Man" rel="tc-fancybox-group4" href="http://www.sundanceceremonies.com/Here/wp-content/uploads/2013/10/dov_simens.jpg">
    <img class="size-thumbnail wp-image-168" width="150" height="150" src="http://www.sundanceceremonies.com/Here/wp-content/uploads/2013/10/dov_simens-150x150.jpg" alt="Dov Simens">
    </a>
    <p>yyyyyy</p>
    </div>
    </div>

    I have a busy weekend but will try to catch up sometime...

  13. dred4
    Member
    Posted 10 months ago #

    Many thanks - Did exactly that - but sadly no go....this is what I get....

  14. dred4
    Member
    Posted 10 months ago #

    I changed the <div class="span6"> to <div class="span3">
    This seemed to do the trick - although I now have to make the images more responsive to mobile platforms as they tend to stack with the menus and the slider getting way off whack...

    Have a great weekend and thanks again

  15. rdellconsulting
    Member
    Posted 10 months ago #

    I changed that at last minute before I went out. I forgot to add another <div class="row-fluid"> after the first 2 span6 divs.

Reply

You must log in to post.

About this Theme

About this Topic