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!
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!
Thread Starter
dred4
(@dred4)
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 :))
Thread Starter
dred4
(@dred4)
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?
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.
Thread Starter
dred4
(@dred4)
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….
Thread Starter
dred4
(@dred4)
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
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…
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”>
Thread Starter
dred4
(@dred4)
http://www.sundanceceremonies.com/Here/
As you can see I’m trying to get the Contributors listed side by side with text appearing below….
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…
Thread Starter
dred4
(@dred4)
Many thanks – Did exactly that – but sadly no go….this is what I get….
Thread Starter
dred4
(@dred4)
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
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.
