Simbabox
07-15-2017, 01:49 PM
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 ?
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:
<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*/
Can you please guide me on how to do that ?
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:
<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*/