Announcement

Collapse
No announcement yet.

Add Text Banner At Top Of Center Panel

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Add Text Banner At Top Of Center Panel

    Can anyone tell me how to add 3 section text banner at the top of the center panel, where carousel was before I turned it off? I've attached what it looked like in my former store. I'm a relative newbie ay web programming, but pointed in the right direction, I can usually get the job done.

    Bigcom.TBM.Store.TopBanner2.jpg

    I'm not doing something right - I can't seem to get the image big enough to see. :(

    Finally figured the image out. I used a PNG first and couldn't make it bigger. I saved it as a JPG and was able to make it bigger. Learn something new every day!
    Last edited by cwnoah; 09-20-2015, 06:45 AM.

  • #2
    cwnoah this might not be the best way to do it, but it works. I kind of hack my way around this stuff.

    The <style> section, either goes at the top of the page, or you can add it to the CSS file. You can also breakdown the @media even more for better layout on tablets and phones.
    The <div> part would go in the home page where you want it. Settings > Design > Titles & Content > Home

    Code:
    <style>
    @media screen and (min-width:640px) {
    .box1 {float:left;padding:10px 1% 10px 1%;width:31%;background-color:red;text-align:center;height:300px;
        }
    .box2 {float:left;padding:10px 1%10px 1%;width:31%;background-color:blue;text-align:center;height:300px;
        }
    .box3 {float:left;padding:10px 1% 10px 1%;width:31%;background-color:yellow;text-align:center;height:300px;
        }
    }
    @media screen and (max-width:639px) {
    .box1 {float:left;padding:10px 1% 10px 1%;width:98%;background-color:red;text-align:center;
        }
    .box2 {float:left;padding:10px 1%10px 1%;width:98%;background-color:blue;text-align:center;
        }
    .box3 {float:left;padding:10px 1% 10px 1%;width:98%;background-color:yellow;text-align:center;
        }
    }
    
    </style>
    ----------------------------------------
    <div Style="width:100%;max-width:800px;margin:auto;background-color:grey;">
    This is the header <br /><br />
    <div class="box1">box 1</div><div class="box2">box 2</div><div class="box3">box 3</div>
    </div>
    Attached Files
    Last edited by elightbox; 09-20-2015, 01:21 PM. Reason: Added height:300px;, so all boxes are the same height when they are in a row.

    Comment


    • #3
      Thanks! I'll give it a shot.

      Comment


      • #4
        I have my top banner working pretty well, but it shows on all pages. Should I move it from frame.html to home.html? I just want it to show on the first (home, I think) page.

        Comment

        Working...
        X