Rank: Member
Joined: 2/3/2010(UTC)
Posts: 68
Thanks: 5 times
|
I'm using BV 2018, Bootstrap 3.3.2 Responsive and same layout as a DEMO store https://demo.bvcommerce.com/1. How can I simply add banner to the home page using existing css/html (please see attached image # 1)? 2. Can I add two images next to each other (please see attached image # 2 and # 3)? Do I need to create a custom css/html or it's already exist? Thank you! michael_b attached the following image(s):  home-page-layout.jpg (172kb) downloaded 3 time(s).You cannot view/download attachments. Try to login or register.
|
|
|
|
|
|
Rank: Member
Joined: 3/25/2013(UTC)
Posts: 37
Location: Hummelstown, PA
Was thanked: 4 time(s) in 3 post(s)
|
1. The demo store has several billboards (banners) which rotate via the Bootstrap Carousel. If you are using the Carousel, you can add a new slide by editing the content column (on the demo store it's System Homepage 1) and adding a new "item". Example Slide: Quote:<div class="item"><a href="PATH-TO-WHATEVER-PAGE-YOU-WANT-TO-LINK-TO.aspx"> <img src="/images/billboards/YOUR-IMAGE-HERE.png" alt="" /> </a></div> If you are not using Carousel, then you just need to add an image to System Homepage 1. <img src="/images/billboards/YOUR-IMAGE-HERE.png" alt="" /> Add margin if needed. 2. The Bootstrap Grid will allow you to set up columns. Since Bootstrap is included in the theme, the css is already in place. You just need to write the HTML to accomplish the layout you desire. If you have not done so, read over the documentation here. https://getbootstrap.com/docs/3.3/css/#gridBasically, to get two equal columns, you'd need the following markup: Quote:<div class="row"> <div class="col-md-6">COLUMN 1</div> <div class="col-md-6">COLUMN 2</div> </div> Edited by user Wednesday, November 15, 2017 9:51:13 AM(UTC)
| Reason: Not specified |
Nathan Baker
BV Commerce
Toll-free 888-665-8637 - Int'l +1 717-220-0012 |
|
|
|
|
|
Rank: Member
Joined: 2/3/2010(UTC)
Posts: 68
Thanks: 5 times
|
Originally Posted by: Nathan  1. The demo store has several billboards (banners) which rotate via the Bootstrap Carousel. If you are using the Carousel, you can add a new slide by editing the content column (on the demo store it's System Homepage 1) and adding a new "item". Example Slide: [quote]<div class="item"><a href="PATH-TO-WHATEVER-PAGE-YOU-WANT-TO-LINK-TO.aspx"> <img src="/images/billboards/YOUR-IMAGE-HERE.png" alt="" /> </a></div> If you are not using Carousel, then you just need to add an image to System Homepage 1. <img src="/images/billboards/YOUR-IMAGE-HERE.png" alt="" /> I'm not using the Carousel. All what I'm trying to do is to add the simple banner to the home page. I followed your instruction and added this: <div class="item"><a href="/sony-players.aspx"><img src="/images/homepage/splash-8.jpg" alt=""/></a></div>. I do see the image but this image breaks the mobile view. It doesn't get resized on mobile view. Again, let say I need to add a simple one banner image right before the "New Products" on your demo store: https://demo.bvcommerce.com/ and after the four set of images you have under the main splash. How do I do that?* I think the problem is that we don't have any kind of manual for BV, it's hard to figure out without any kind of information. You mentioned above that I need add the new img to "System Homepage 1", for example why can't I add it to System Homepage 2 or System Homepage 3 if I want to have the banner somewhere in the bottom of the page. Some kind of manual would be the big help.
|
|
|
|
|
|
Rank: Member
Joined: 3/25/2013(UTC)
Posts: 37
Location: Hummelstown, PA
Was thanked: 4 time(s) in 3 post(s)
|
To make your images responsive you need to make use of the Bootstrap image classes. You can read more about Bootstrap Responsive images here: http://getbootstrap.com/docs/3.3/css/#imagesNOTE: If you're not using Carousel then you don't need to wrap your Billboard image in <div class="item">. Quote:* I think the problem is that we don't have any kind of manual for BV, it's hard to figure out without any kind of information. You mentioned above that I need add the new img to "System Homepage 1", for example why can't I add it to System Homepage 2 or System Homepage 3 if I want to have the banner somewhere in the bottom of the page. Some kind of manual would be the big help. I specified System Homepage 1 because that's typically where billboards go on the homepage. You can put your Content Blocks in any Content Column you want, depending on where you want to display the content on the page. Your homepage content columns are referenced in your theme's pages/default.aspx file. Feel free to reference your own content columns there if you want, though the three provided usually can accommodate most needs. You can add Content Columns in BV's admin under Content > Columns. |
Nathan Baker
BV Commerce
Toll-free 888-665-8637 - Int'l +1 717-220-0012 |
 1 user thanked Nathan for this useful post.
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.