Results 1 to 1 of 1

Thread: Impementing a tab's style from other website into my Shopify store

  1. #1
    Join Date
    Jul 2017
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Impementing a tab's style from other website into my Shopify store

    I need your help to implement this tab's style from DJI website into my shopify store:

    Can you please guide me on how to do that ?

    Click image for larger version. 

Name:	Capture.jpg 
Views:	68 
Size:	1.8 KB 
ID:	6192
    So, it's only three tabs, I may change the titles of the tabs to mine, but In general it should take the whole width of the page and this is the link of that website with the tabs in action :

    http://store.dji.com/product/inspire-2

    Please let me know if that can be done, I have also made a snap shot for the HTML and the CSS of that tab (with SnappySnippet) and I will add them down here so will make it easier to implement the code into my store:

    Code:
    <div id="DIV_1">
    	<ul id="UL_2">
    		<li id="LI_3">
    			<button id="BUTTON_4">
    				Overview
    			</button>
    		</li>
    		<li id="LI_5">
    			<button id="BUTTON_6">
    				In The Box
    			</button>
    		</li>
    		<li id="LI_7">
    			<button id="BUTTON_8">
    				FAQ
    			</button>
    		</li>
    	</ul>
    </div>
    
    
    
    
    #DIV_1 {
        bottom: 0px;
        box-sizing: border-box;
        color: rgb(51, 51, 51);
        height: 51px;
        left: 0px;
        max-width: 1200px;
        min-width: 1200px;
        position: relative;
        right: 0px;
        text-decoration: none solid rgb(51, 51, 51);
        text-rendering: optimizeLegibility;
        top: 0px;
        width: 1200px;
        column-rule-color: rgb(51, 51, 51);
        perspective-origin: 600px 25.5px;
        transform-origin: 600px 25.5px;
        caret-color: rgb(51, 51, 51);
        background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
        border-top: 0px none rgb(51, 51, 51);
        border-right: 0px none rgb(51, 51, 51);
        border-bottom: 1px solid rgb(238, 238, 238);
        border-left: 0px none rgb(51, 51, 51);
        font: normal normal normal normal 16px / normal "Open Sans", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        outline: rgb(51, 51, 51) none 0px;
    }/*#DIV_1*/
    
    #UL_2 {
        box-sizing: border-box;
        color: rgb(51, 51, 51);
        display: flex;
        height: 51px;
        text-align: center;
        text-decoration: none solid rgb(51, 51, 51);
        text-rendering: optimizeLegibility;
        width: 1200px;
        column-rule-color: rgb(51, 51, 51);
        perspective-origin: 600px 25.5px;
        transform-origin: 600px 25.5px;
        user-select: none;
        caret-color: rgb(51, 51, 51);
        border: 0px none rgb(51, 51, 51);
        font: normal normal normal normal 16px / normal "Open Sans", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        list-style: none outside none;
        margin: 0px 0px -1px;
        outline: rgb(51, 51, 51) none 0px;
        padding: 0px;
    }/*#UL_2*/
    
    #LI_3 {
        box-sizing: border-box;
        color: rgb(51, 51, 51);
        display: block;
        height: 51px;
        min-height: auto;
        min-width: auto;
        text-align: center;
        text-decoration: none solid rgb(51, 51, 51);
        text-rendering: optimizeLegibility;
        width: 409.813px;
        column-rule-color: rgb(51, 51, 51);
        perspective-origin: 204.906px 25.5px;
        transform-origin: 204.906px 25.5px;
        user-select: none;
        caret-color: rgb(51, 51, 51);
        border-top: 0px none rgb(51, 51, 51);
        border-right: 0px none rgb(51, 51, 51);
        border-bottom: 1px solid rgb(68, 168, 242);
        border-left: 0px none rgb(51, 51, 51);
        flex: 1 1 auto;
        font: normal normal normal normal 16px / normal "Open Sans", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        list-style: none outside none;
        outline: rgb(51, 51, 51) none 0px;
    }/*#LI_3*/
    
    #BUTTON_4 {
        color: rgb(68, 168, 242);
        cursor: pointer;
        display: block;
        height: 50px;
        text-decoration: none solid rgb(68, 168, 242);
        width: 409.813px;
        column-rule-color: rgb(68, 168, 242);
        perspective-origin: 204.906px 25px;
        transform-origin: 204.906px 25px;
        user-select: none;
        caret-color: rgb(68, 168, 242);
        background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
        border: 0px none rgb(68, 168, 242);
        font: normal normal normal normal 16px / 50px "Open Sans", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        list-style: none outside none;
        outline: rgb(68, 168, 242) none 0px;
        padding: 0px 30px;
    }/*#BUTTON_4*/
    
    #LI_5 {
        box-sizing: border-box;
        color: rgb(51, 51, 51);
        display: block;
        height: 51px;
        min-height: auto;
        min-width: auto;
        text-align: center;
        text-decoration: none solid rgb(51, 51, 51);
        text-rendering: optimizeLegibility;
        width: 419px;
        column-rule-color: rgb(51, 51, 51);
        perspective-origin: 209.5px 25.5px;
        transform-origin: 209.5px 25.5px;
        user-select: none;
        caret-color: rgb(51, 51, 51);
        border: 0px none rgb(51, 51, 51);
        flex: 1 1 auto;
        font: normal normal normal normal 16px / normal "Open Sans", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        list-style: none outside none;
        outline: rgb(51, 51, 51) none 0px;
    }/*#LI_5*/
    
    #BUTTON_6 {
        color: rgb(51, 51, 51);
        cursor: pointer;
        display: block;
        height: 50px;
        text-decoration: none solid rgb(51, 51, 51);
        width: 419px;
        column-rule-color: rgb(51, 51, 51);
        perspective-origin: 209.5px 25px;
        transform-origin: 209.5px 25px;
        user-select: none;
        caret-color: rgb(51, 51, 51);
        background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
        border: 0px none rgb(51, 51, 51);
        font: normal normal normal normal 16px / 50px "Open Sans", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        list-style: none outside none;
        outline: rgb(51, 51, 51) none 0px;
        padding: 0px 30px;
    }/*#BUTTON_6*/
    
    #LI_7 {
        box-sizing: border-box;
        color: rgb(51, 51, 51);
        display: block;
        height: 51px;
        min-height: auto;
        min-width: auto;
        text-align: center;
        text-decoration: none solid rgb(51, 51, 51);
        text-rendering: optimizeLegibility;
        width: 371.188px;
        column-rule-color: rgb(51, 51, 51);
        perspective-origin: 185.594px 25.5px;
        transform-origin: 185.594px 25.5px;
        user-select: none;
        caret-color: rgb(51, 51, 51);
        border: 0px none rgb(51, 51, 51);
        flex: 1 1 auto;
        font: normal normal normal normal 16px / normal "Open Sans", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        list-style: none outside none;
        outline: rgb(51, 51, 51) none 0px;
    }/*#LI_7*/
    
    #BUTTON_8 {
        color: rgb(51, 51, 51);
        cursor: pointer;
        display: block;
        height: 50px;
        text-decoration: none solid rgb(51, 51, 51);
        width: 371.188px;
        column-rule-color: rgb(51, 51, 51);
        perspective-origin: 185.594px 25px;
        transform-origin: 185.594px 25px;
        user-select: none;
        caret-color: rgb(51, 51, 51);
        background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
        border: 0px none rgb(51, 51, 51);
        font: normal normal normal normal 16px / 50px "Open Sans", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        list-style: none outside none;
        outline: rgb(51, 51, 51) none 0px;
        padding: 0px 30px;
    }/*#BUTTON_8*/
    Last edited by jscheuer1; 07-15-2017 at 03:26 PM. Reason: format

Similar Threads

  1. Using Ultimate Fade-In Slideshow with Shopify?
    By farrahdiva in forum JavaScript
    Replies: 2
    Last Post: 11-25-2011, 06:29 PM
  2. Javascript store
    By aka NatWest in forum Looking for such a script or service
    Replies: 1
    Last Post: 12-10-2009, 04:24 PM
  3. script to store stats from another website
    By dazbobaby in forum Looking for such a script or service
    Replies: 1
    Last Post: 07-03-2009, 10:00 PM
  4. Style Sheet Switcher (v1.1) - random style on every new site visit
    By matteus in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-07-2008, 04:09 PM
  5. Objectdock style website navigation
    By stefaneh in forum Looking for such a script or service
    Replies: 0
    Last Post: 02-07-2007, 05:21 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •