Customize homepage 3 column grid
This support request was posted in BBQ by akanekodani
- akanekodani July 2, 2013 at 3:38 am
Hello! I am a wordpress beginner to create my client store site using BBQ theme.
In my homepage, I’d like to use 2 column grid instead of 3 column grid under flexslide. How can I customize the column system in CSS?
Please help me out. Thanks!Juanfra Aldasoro July 2, 2013 at 2:29 pmHello there,
Thanks for writing. You can play around with the css in order to alter the width of the elements.
Regarding adding CSS, you should do it over the file custom.css
Best,
Juan.akanekodani July 2, 2013 at 11:09 pmThanks for the quick reply, Juan.
Does it mean that keep the original css in the style.css and write the custom css into the custom.css?
I am not quite sure how these 2 css work together…For example, I want to alter the width of the three column grid to below. Do you think I will copy this css part that I want to change from style.css and rewrite into the custom.css?
Please let me know.
Thanks!
———–
ul.three-col-grid { padding: 25px 0; list-style: none; margin: 0px auto; }
ul.three-col-grid li { width:459px; margin-right: 33.3px; float: left; margin-bottom: 30px; display: inline-block; overflow: hidden; }
ul.three-col-grid li:nth-child(3n+4) { margin-right: 0; }
ul.three-col-grid li.last{ margin-right:0 !important; }
ul.three-col-grid img{
overflow: hidden;
background: #fff;
width: 459px;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}Juanfra Aldasoro July 2, 2013 at 11:17 pmHi there,
No problem 🙂
Yes, that’s the way you should add custom CSS to the theme in order to avoid conflicts when upgrading to the new releases. Our framework load the file custom.css after the main styles, so anything that you put in there will override the main styles.
You must take the classes from the original styles file as a reference but there’s no need to rewrite everything. In your particular case, as you need to resize the width, you should search for the class where the width is defined and then use your new width number.
Please have in mind that the .three-col-grid class is used across the theme in various occasions. If you change the width to that class you might see differences in other templates.
As far as I’ve seen in your site, you only have two widgets defined for the “Pre footer” widget areas. By changing the class .three-col-grid you probably won’t see any result. Try and search the class .pre-footer-widgets .widget-section instead.
Best,
Juan.akanekodani July 3, 2013 at 4:09 amThanks for the reply, Juan. I will customize the classes using custom.css.
Thank you.
You must be logged in to reply to this topic.