1.6.1.4 Tab Menu Disappears After Changing Color.

[Apury]

Hey there!

 

I'm currently in a super weird scenario. It took me around 3 hours to get this tutorial to work:

 

https://mypresta.eu/en/art/prestashop-16/product-tabs.html

 

However, the actuall solution was found here:

 

https://github.com/webprom/prestashop1.6.1.4-product-page-tabs

 

Anyways, I didn't spend those 3 hours looking for the source. I spend those 3 hours trying to make the solution look like the first version. 

 

As you can see here:  - besides the color difference and the opposite working of the active/inavtive one it is quite close. However, when I now try to change the 

background: #43bebd;

into

background: #B04445;

The whole CSS doesn't work anymore and it's just super unformatted and weird looking. This is the complete CSS:

/* ADD TO GLOBAL.CSS OR PRODUCT.CSS OF YOUR THEME */
/* product page tabs */
#product-tabs {
	margin-bottom: 0;
}
#product-tabs li {
	float: left;
}
#product-tabs a {
	background: ##B04445;
	color: #fff;
	display: block;
    font-family:"Open Sans",sans-serif;
    font-weight:600;
    font-size:18px;
    line-height:25px;
	padding: 0.8em 0.5em;
	text-transform: uppercase;
	margin: 1px 1px 1px 0;
	text-decoration: none !important;
}
#product-tabs a:hover {
	background: #2aa2a1;
	color: #fff;
}
#product-tabs a.selected {
	background: #e5e5e5 !important;
	color: #777 !important;
	cursor: default;
}
#product-info .page-product-box {
	border: 1px solid #e5e5e5;
	background: #fbfbfb;
	padding: 1.5em !important;
	margin-top: -1px;
	min-height: 12.8em;
}
#page #product-info .rte {
	padding: 0;
}
#product-info .page-product-heading {
	display: none;
}
#product-info .page-product-box .table-data-sheet {
	margin-bottom: 0;
	border-left: 1px solid #d6d4d4;
	border-right: 1px solid #d6d4d4;
}
/* eof tabs */
.idTabs .selected,#header .sf-menu > li.sfHover > a,#header .sf-menu > li > a:hover,#header .sf-menu > li.sfHoverForce > a {
color:#fff;
background: #553D3D;
border-bottom-color: #000000;
text-decoration:none;
}
 
#more_info_sheets .rte {
    padding:10px!important;
}
 
#more_info_sheets .bx-wrapper {
  width:100%!important;
  max-width:none!important;
  display:block;
}

Edited March 8, 2016 by Apury (see edit history)