TGB Testing Page
This is a page we use to test out new content and new ways of showing you the latest golf travel information.
Slideshow using Magic Slideshow WordPress module
Test new WP 3.4 feature to include tweets
Just paste the full url of an individual tweet into a page or post (get the url by right clicking on the “expand” link below the tweet in own account and open in new window or copy link url) and it will be recognised in WordPress and show on the page with full info and ability to follow, reply, retweet etc.
Congratulations to Webb Simpson on winning the U.S Open by 1 shot over GMac and Thompson… Simpson went 4 under… fb.me/FFup0VHF
— topgolfbreaks.co.uk (@topgolfbreaks) June 18, 2012
Test slideshow
 |
Tour name heading
£520.00
|
 |
| Tour name heading
£520.00
|
|
| Tour name heading
£520.00
|
|
| Tour name heading
£520.00
|
|
Video
Example of embedding a Youtube video on a tab – note that the video iframe code has to be put in a custom variable HTML1 or it is rewritten by WordPress and does not show
Using a slide to show content
Clicking the title text opens up more information below it, clicking again closes it.
Using an “Accordion” to show content
This is similar to a “slide” but has multiple slides in a single construction and as one is opened the others close.
The settings for the plugin allow you to change the slider speed and the styles for the tab headers etc. There is a “green” default file and you can also create a custom css file
This is the CSS code from the Green style
With Keith notes added in red
/* — Generic — */
a:active,a:focus {outline:0;}
.jwts_clr {clear:both;height:0;line-height:0;}
/* — Tabs — */
.jwts_tabberlive {margin:4px 0px;padding:0px;}
#bbb is the grey border round the tabbed content
.jwts_tabberlive .jwts_tabbertab {margin: 3px 0 0 0;padding: 10px; border:1px solid #bbb;/*border-top:0px;height:300px;overflow:auto;*/}
.jwts_tabberlive .jwts_tabbertab h2,
.jwts_tabberlive .jwts_tabbertab h3,
.jwts_tabberlive .jwts_tabbertabhide {display:none;}
ul.jwts_tabbernav {margin:0px;padding:3px 4px;list-style:none;list-style-image:none;background:none;line-height:normal;height:auto;}
ul.jwts_tabbernav li {margin:0px;padding:0px;list-style:none;list-style-image:none;background:none;display:inline;}
ul.jwts_tabbernav li a,
font size for link and hover text i tab headings – increased from 0.8e, to 1.0em
background image for tab headings and also link text colour can be changed here
ul.jwts_tabbernav li a:link {font-size:1.0em;font-weight:bold;margin:0px 1px;padding:3px 12px;color:#0F0F0F;border:1px solid #bbb;background:#eee url(green/bg.png) repeat-x top;}
ul.jwts_tabbernav li a:visited {color:#333;}
ul.jwts_tabbernav li a:hover {font-size:1.0em;font-weight:bold;margin:0px 1px;padding:3px 12px;color:#c64934;border:1px solid #aaa;background:#f2f2f2;text-decoration:none;}
ul.jwts_tabbernav li a:active,ul.jwts_tabbernav li a:focus {outline:0;}
the white bottom border on the nav blocks makes the border look like it goes up round the heading
ul.jwts_tabbernav li.jwts_tabberactive a {background:#fff;;border-bottom:1px solid #fff;}
ul.jwts_tabbernav li.jwts_tabberactive a:hover {background:#fff;border-bottom:1px solid #fff;text-decoration:none;}
ul.jwts_tabbernav li.jwts_tabberactive,
ul.jwts_tabbernav li.jwts_tabberinactive {background:none;padding:0px;margin:0px;}
ul.jwts_tabbernav{margin:0;padding:0;display:inline;}
.jwts_tabberlive .jwts_tabbertab,ul.jwts_tabbernav {text-align:left;} /* force content orientation */
ul.jwts_tabbernav li a:active{color: #000;}
/* WordPress Slider Style */
.wts_title{
}
.slideraccordion{
display: none;
}
.wts_title a.jtoggle{
color: #000;
text-decoration: underline;
font size for slider and accordion headings
font-size: 1.2em;
background: transparent url(‘../ts/arrow.png’) no-repeat right center;
padding-right: 10px;
cursor: hand;
}
.wts_slidewrapper{
display: none;
border: #e7e7e7 1px solid;
padding: 0 5px 3px 5px;
}
|
|
|||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||
