Best way is to use Twitter Bootstrap which is the underlying framework to Czr.
Start reading here and come back if you need more help.
Thank you rdellconsulting, I will head there right now. Karen
Do you mean just read about bootstrap and how to use it? I don’t need to download it right? it is already working in the background on customizr?
Thanks, Karen
No, you don’t need to download, it’s already embedded in the theme. Just use the classes and it will all fall down into place, responsively.
Thank you, I am heading there (your link) again, wish me luck.
Karen
Do I download a grid template onto the projects page so that pics will line up in 3 columns instead of one?
You just need to start coding HTML! Be brave…
Here’s some pseudo-code to give you a clue. Just add to a blank Page.
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="span4">
<img>xxxxxxx</img>
</div>
<div class="span4">
<img>xxxxxxx</img>
</div>
<div class="span4">
<img>xxxxxxx</img>
</div>
</div>
</div>
</div>
I’d suggest you try something simple just to get the hang of it, and then the world’s your oyster!
If I paste this code in the style CSS will that work?
<div class=”container”>
<ul class=”nav nav-pills”>
<li class=”active”>
Home
<div class=”row”>
<div class=”col-lg-2″>
ID
</div>
<div class=”col-lg-2″>
Name
</div>
<div class=”col-lg-8″>
E-Mail
</div>
</div>
<div class=”row”>
<div class=”col-lg-2″>
100001
</div>
<div class=”col-lg-2″>
Joe
</div>
<div class=”col-lg-8″>
MamiePVillalobos@teleworm.us
</div>
</div>
<div class=”row”>
<div class=”col-lg-2″>
100
</div>
<div class=”col-lg-2″>
Christine
</div>
<div class=”col-lg-8″>
ChristineJWilliams@dayrep.com
</div>
</div>
</div>
No, because it’s HTML, not CSS. So just go to your Dashboard>Pages>Add New. Call it something (Test). Add the code. View Page.
Then you can add the Page to your Menu via Dashboard>Appearance>Menus.
You’d then use the CustomCSS panel to style it. So look for the classes eg .col-lg-8 {color: red; margin: 10px 10px; }
Use row-fluid rather than row if you want it to be responsive, ie work on smaller viewports like smartphones.
And so on…
You might find this Guide worth a quick scan.
This isn’t CSS. It’s html, to go in your pages, not your your stylesheet.
The html you are giving above is for the bootstrap V3, whereas the underlying bootstrap for Customizr is 2.3.2. The scaffolding for BS 2.3.2 is described here. BS V3 turned it all a bit on its head, so it’s not relevant here.
There’s an extraneous <div class="span12"> in Dave’s code above. What you need for each row of 3 columns of images is:
<!-- ******************NEW ROW OF CONTENT****************** -->
<div class="row-fluid">
<div class="span4">
INSERT YOUR IMAGE HERE
</div>
<div class="span4">
INSERT YOUR IMAGE HERE
</div>
<div class="span4">
INSERT YOUR IMAGE HERE
</div>
</div>
<!-- ***************END OF ROW OF CONTENT****************** -->
However, from the example code you’ve posted above, it doesn’t look like you’re trying to add 3 columns of images, as you indicated in your first post. Have things changed?
Hi ElectricFeet, Thanks for responding, this is where I found the code
http://stackoverflow.com/questions/18204805/cant-create-columns-with-twitter-bootstrap
Yes I still want 3 columns. I don’t know why I thought that was for 3, I was trying to work while the Kids were home for the umteenth snow day & my brain is a bit fried. Plus the fact I am attempting something I have no business messing with.
I am going over to the website right now http://mbmfabricators.com/ to try what you and rdellconsulting have suggested.
Thank you again, Karen
And I REALLY hope the Kids have school tomorrow!!!!!
Thank you also to rdellconsulting, I am trying to be brave, The Company my Husband works for DESERVES to have a nice web page and I am trying to make that happen. I am so grateful for all the open source info that is available for people to try and learn and also for the people who are willing to share their time and knowledge.
THANK YOU
THANK YOU
THANK YOU
Oops, sorry Dave, I hadn’t seen you’d already posted when I posted. I must remember to hit refresh before posting!
@lawlessvintage: you’ll be fine, kids notwithstanding 🙂 It’s looking good already.
To make the slider super-professional, crop all your slider images to 1170×500.
Good luck with the snow and site.
