| Author | Comment | |||
|---|---|---|---|---|
Cauis Sil |
Need help please. |
Lead | ||
|
Is it possible to switch between two different board skins through a drop down menu? An example would be switching from bubble talk layout to the generic
yuku layout via drop down menu, but still retain all the information, just change the layout?
|
||||
|
|
||||
1992casey |
#1 | |||
|
You can't do the dropdown menu (I would love that option), but you can certainly offer different skins to your members. Take a look at the Style Switcher script.
Regarding placement of its controls on the page, the switcher doesn't give you a lot of HTML to work with. I believe the only code it produces is an <a></a> for each included skin. There's still quite a bit you can do with it; it's just not an "anything goes" situation like much of Yuku is. You can produce powerful results, though. Note that it's CSS-only. You can't add to the headers or footers of your non-default skins. You can make it work with buttons if you'd like. For an example, take a look at the font switching buttons here at Skins. They're under the welcome message in the upper left corner of the page.
Last Edited By: 1992casey 9 Nov, 2009 19:19.
Edited 2 times.
|
||||
|
|
||||
1992casey |
#2 | |||
|
I forgot I had this. Here's an extreme example of what can be done with the Style Switcher.
Near the top, click back and forth between "Default" and "Expanded Format."
I had suggested this to Yuku powers as a way to present the tutorials currently housed on the Support board. The flaw in that plan was that tutorials would have needed to be moved to their own domain. |
||||
|
|
||||
Cauis Sil |
#3 | |||
|
thanks for the info, do you know how to make a sidebar, or if there are any other option like the side bar that i could use on my page? edit, and what code would i need to recreate your extreme example?
Last Edited By: Cauis Sil 9 Nov, 2009 22:30.
Edited 2 times.
|
||||
|
|
||||
Cauis Sil |
#4 | |||
|
for some reason my style switcher code isnt working, it should be a regular view of the categories and then a tabbed category.
|
||||
|
|
||||
Cauis Sil |
header, footer, css | #5 | ||
|
<center><a href="http://thegungancouncil.yuku.com/directory" target="_blank"><img
src="http://img.photobucket.com/albums/v625/voidofchaos/TJC/TGC2008d6.jpg" border="0"
alt="Photobucket"></a></center>
<styleswitcher separator=" | "> 13 local <img src="http://www.website.com/images/lightblue.gif"> </styleswitcher> <tabbedcats> (only on first copy of yuku skin) .category-tab-holder { padding: 4px 0px; } .category-tab { padding: 4px 6px; background: #EEEEEE; color: #000000; border: 1px solid #000000; border-right: 0px; } .category-tab.last { border-right: 1px solid #000000; } .category-tab.active { background: #999999; color: #FFFFFF; } body { font-family: Tahoma, Verdana, sans-serif; font-size: .7em; color: #1A150D; line-spacing: 1.4em; background: url(http://img.photobucket.co...haos/TJC/sampledemo.jpg) fixed left; } #wrapper { width: 80%; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; height: 100%; border-right: 4px solid #e6731c; border-left: 4px solid #e6731c; margin: auto; padding: 7px; background: #FBF9F9; } .mgr-navigation-sliver { color: #42884D; background: #FBF3F3; } .mgr-navigation-sliver a:link { color: #42884D; } .mgr-navigation-sliver a:visited { color: #42884D; } th { color: #070D0C; } th a:link { color: #070D0C; } a { color: #C18443; text-decoration: none; } a:link { color: #C18443; text-decoration: none; } a:visited { color: #C18443; text-decoration: none; } a:hover { color: #16100B; text-decoration: underline overline; } a:active { color: #FCBC6A; text-decoration: inherit; } .boxheading { text-align: center; color: #16100B; padding-top: 8px; margin-bottom: 12px; } .boxheading a:link { color: #16100B; } .boxheading h1 { font-size: 1.1em; letter-spacing: 2px; } .boxheading h2 { font-size: 1.1em; letter-spacing: 2px; } .boxheading h3 { font-size: 1.1em; letter-spacing: 2px; } .onionskin1 { background: url(http://YOUR-SERVER-HERE.C...atheadingcentertile.png) repeat-x top center; } .onionskin2 { background: url(http://YOUR-SERVER-HERE.COM/catheadingright.png) no-repeat top right; } .onionskin3 { background: url(http://YOUR-SERVER-HERE.COM/catheadingleft.png) no-repeat top left; } .category-box th { color: #5F2A55; } .forum-box th { color: #162523; } .forum-box th a:link { color: #162523; } .forum-box th a:visited { color: #162523; } .discussion-box th { color: #16100B; } .discussion-box .th { color: #16100B; } .discussion-box th a:link { color: #16100B; } .discussion-box th a:visited { color: #16100B; } .quote-title { color: #9DA20E; } td.topic-titles { width: 40%; } td.forumtitles { width: 40%; } td.topic-titles:hover { background: #eeeeee; } td.forumtitles:hover { background: #eeeeee; } td { border-bottom: 1px solid #e4e4e4; } th:link { color: #b5b5b5; } hr { border: 1px dotted #cbcbcb; } blockquote { padding-top: 10px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; border-left: 1px dotted #cbcbcb; background: url(http://YOUR-SERVER-HERE.COM/quotebg.png) no-repeat top right; } .first .post-number { padding-top: 30px; } .first .toggle { padding-top: 30px; } .first .post-url { padding-top: 30px; } .anouncement-box { border-bottom: 1px dotted #eeeeee; } .lead span.user-name { padding-top: 30px; } .first span.user-name { padding-top: 30px; } th.comment-header { display: none; } th.author-header { display: none; } h3.post-title { padding-bottom: 11px; } input#search { border: 1px solid #bbbbbb; background: url(http://YOUR-SERVER-HERE.COM/searchinputbg.png) no-repeat; } input#search-input { border: 1px solid #bbbbbb; background: url(http://YOUR-SERVER-HERE.COM/searchinputbg.png) no-repeat; } .announcement-box .onionskin1 { background: transparent; } .announcement-box .onionskin2 { background: transparent; } .announcement-box .onionskin3 { background: transparent; } .whosonline-box .onionskin1 { background: transparent; } .whosonline-box .onionskin2 { background: transparent; } .whosonline-box .onionskin3 { background: transparent; } .tool-box .onionskin1 { background: transparent; } .tool-box .onionskin2 { background: transparent; } .tool-box .onionskin3 { background: transparent; } .control-box .onionskin1 { background: transparent; } .control-box .onionskin2 { background: transparent; } .control-box .onionskin3 { background: transparent; } div.mgr-navigation-sliver-wrapper { border-top: 1px solid #d89603; border-bottom: 1px solid #d89603; background: url(http://YOUR-SERVER-HERE.COM/navbarbg.png) repeat-x; } div.mgr-navigation-sliver { border-top: 1px solid #d89603; border-bottom: 1px solid #d89603; } body li.mgr-sliver-open-button { background: transparent; } body li.mgr-sliver-open-button a:link { border: 0px; font-weight: bold; color: #fff; background: transparent; } .myheader { text-align: center; } .mybanner { margin: 5px auto; width: 437px; height: 250px; background: url(http://img.photobucket.co...oidofchaos/d2ff7d96.jpg) no-repeat left; } div.discussion-box table { table-layout: fixed; } .lead .post-number { direction: rtl; text-indent: -80px; } .reply .post-url { direction: rtl; text-indent: -80px; } .reply .post-number { direction: rtl; text-indent: -150px; } .discussion-box .firstcol { width: 180px; } div.discussion-box h3.post-title { width: 400px; overflow: hidden; } div.discussion-box span.post-title { display: block; width: 400px; overflow: hidden; } #lte7 div.discussion-box td.toggle { direction: rtl; text-indent: 0px; } #lte7 .lead .post-number { text-indent: 0px; position: relative; overflow: visible; } #lte7 .reply .post-url { text-indent: 0px; width: 30px; position: relative; overflow: visible; } #lte7 .reply .post-number { text-indent: 0px; position: relative; overflow: visible; } #lte7 div.discussion-box h3.post-title { width: 380px; position: relative; overflow: visible; z-index: 2; } #lte7 div.discussion-box span.post-title { width: 320px; position: relative; overflow: visible; z-index: 2; } #lte7 div.discussion-box div.scrolling table { table-layout: auto; } #post-form .preview-box table { table-layout: auto; } #post-form .lead .post-number { direction: ltr; text-indent: 0px; } |
||||
|
|
||||