I have created a CSS based Quicktabs style. In case someone finds that useful I am posting it here. It has been modified from garland and should work with all the latest browsers. Its named after my site isocentre.


.quicktabs_main.quicktabs-style-isocentre {
  clear:both;
  background:#eeffaa;
  background: rgba(238,255,170,0.3);
  border:8px solid #ffcc00;
  padding:5px;
  border-radius: 0 25px 0px 25px ;
  -moz-border-radius: 0 25px 0px 25px ;
  -webkit-border-radius: 0 25px 0px 25px ;
  -o-border-radius: 0 25px 0px 25px ;
  -khtml-border-radius: 0 25px 0px 25px ;
  margin-bottom: 5px;
}

ul.quicktabs_tabs.quicktabs-style-isocentre {
  background: transparent;
  font:bold 1.2em;
  padding:0px;
  height: 20px;
  margin:0 0 0px 0;
 
}

.sidebar ul.quicktabs_tabs.quicktabs-style-isocentre {
  padding:0 0 3px 0;
}

ul.quicktabs_tabs.quicktabs-style-isocentre li {
  margin:0 5px 0 0px;
  padding:0px;
  display: block;
  float: left;
  padding: 2px 0 1px !important;
  list-style-type: none;
  background: #ffcc00;
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
}

.sidebar ul.quicktabs_tabs.quicktabs-style-isocentre li {
  margin:0;
  display: block;
  float: left;
  padding: 2px 0 1px;
  list-style-type: none;
  background: none;
}

ul.quicktabs_tabs.quicktabs-style-isocentre li a:link,
ul.quicktabs_tabs.quicktabs-style-isocentre li a:visited {
  color: #333;
  padding: 8px 12px 4px 11px;
  margin:0;
  font: 1em;
  font-weight:bold;
  text-decoration:none;
}

ul.quicktabs_tabs.quicktabs-style-isocentre li.active a {
  color: #333 !important;
  background: #ffec00;
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
}
ul.quicktabs_tabs.quicktabs-style-isocentre li.active {
}

.sidebar ul.quicktabs_tabs.quicktabs-style-isocentre li.active a {
  color: #333 !important;
  background: #ffec00;
   border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
}
.sidebar ul.quicktabs_tabs.quicktabs-style-isocentre li.active {
}

/* IE 6 Debug */
* html ul.quicktabs_tabs.quicktabs-style-isocentre,
* html .sidebar ul.quicktabs_tabs.quicktabs-style-isocentre {
  padding-bottom: 0px;
}

/* IE 7 Debug */
*+html .sidebar ul.quicktabs_tabs.quicktabs-style-isocentre li a:link {
  padding-bottom: 4px;
}

Comments

pasqualle’s picture

pasqualle
Location 🇭🇺 Budapest
commented
Title: A CSS Based QT style » New tab style: isocentre
Component: Miscellaneous » Tab styles
Issue tags: +QT tabstyle
pasqualle’s picture

pasqualle
Location 🇭🇺 Budapest
commented
Status: Active » Needs review
santam’s picture

santam commented

Website for review http://isocen.dev4.webenabled.net/

I have modifed the code further for borders and stuff and will be putting in a commented CSS file soon.

docans’s picture

docans commented

Any progress to this issue. I want to create a custom style for my quicktabs that will remain despite updates to the quicktabs module. How can this be achieved

Thanks

ultimateboy’s picture

ultimateboy commented
Status: Needs review » Closed (won't fix)

Without a properly formatted patch, there is nothing to review.

I'm not against adding additional quicktabs styles to the module, but will only consider it with properly formatted patches.

netw3rker’s picture

netw3rker commented
Status: Closed (won't fix) » Needs work

reopening discussion since new styles are a clear request

nikit’s picture

nikit commented

And provide sample image, instead of site, please...

smustgrave’s picture

smustgrave commented
Status: Needs work » Closed (outdated)

With D7 EOL approaching in a month I'm starting to triage the D7 side of quicktabs queue.

If still an issue or needed for 4.0.x (latest branch) feel free to reopen