diff --git a/about.php b/about.php new file mode 100644 index 0000000..036ea14 --- /dev/null +++ b/about.php @@ -0,0 +1,11 @@ + 'Fancy', + 'Description' => "Vanilla Forums Responsive Template by Hoangsoft.com", + 'Version' => '1.1', + 'Author' => "Hoangsoft.com", + 'License'=>"GNU GPL2", + 'AuthorEmail' => 'info@hoangsoft.com', + 'AuthorUrl' => 'http://hoangsoft.com' +); \ No newline at end of file diff --git a/design/custom.css b/design/custom.css new file mode 100644 index 0000000..14f6e71 --- /dev/null +++ b/design/custom.css @@ -0,0 +1,562 @@ +a{color: #333;} +a:hover{color: #666;} +body{background-color: #eee; font-size: 14px; padding-top: 50px;} +input[type="text"],input[type="email"],input[type="password"], select, textarea{border-radius: 2px; padding: 6px 12px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); background-color: #f6f6f6; border: 0; margin-bottom: 10px; font-size: 13px !important;} +/* Full-width */ +.Row { + width: 100%; +} +.fl{float: left;} +.fr{float: right;} +.clear{clear: both;} +/* Breadcrumbs */ +.BreadcrumbsWrapper { + font-size: 13px; + padding: 6px 10px; + background: #fafafa; + border: 1px dashed #eee; + margin-bottom: 10px; +} +#Frame{ + +} +/* #fdfdfd Head & Menu */ +#Head { + position: fixed; + top: 0; + width: 100%; + content: ''; + padding: 4px 0; + height: 35px; + text-align: center; + box-shadow: 0 1px 4px rgba(0,0,0,0.3); + border-bottom: 1px solid #333; + background: #373c4a; + z-index: 11; +} +#Head .Row{ + width: auto !important; + min-width: 760px; + max-width: 1000px; + margin: auto; +} +#Head a { + color: #1E79A7; +} +#Head a:hover { + color: #ff0084; +} +#Head .SiteMenu{list-style: none; margin: 0; padding: 0;} +#Head .SiteMenu>li{float: left;} +#Head .SiteMenu>li>a{float: left; color: #9ea0a5; font-weight: normal; padding: 6px 10px; font-size: 13px; color: #9ea0a5;} +#Head .SiteMenu>li>a:hover{color: #fdfdfd; text-decoration: none;} +.SiteSearch{margin-top: 6px; width: 100%;} +#Form_Search{border-radius: 2px; padding: 6px 12px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); background-color: #f0f0f0; border: 0; margin-bottom: 10px; width: 100% !important; font-size: 13px !important;} +#Form_Go{top: 9px; right: 10px; background: url('http://vanilla.com/applications/dashboard/design/images/sprites.png') 0 -196px no-repeat transparent !important;} +.SiteTitle img{height: 28px;} +.PageControls{min-height: inherit;} +.DataList{margin-top: 10px;} +.DataList .Item{border: 0 !important; border-bottom: 1px dashed #ccc !important; background: #fdfdfd !important; border-radius: 2px; margin-bottom: 5px;} +.DataList .Read{background: #fdfdfd !important;} +.FilterMenu, .PanelCategories, .PanelInfo{ + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; +} +.FilterMenu li, .PanelCategories li, .PanelInfo li{padding: 6px 8px !important;} +.FormWrapper{background: transparent !important; padding: 0 !important;} +ul.token-input-list{border-radius: 2px; padding: 3px 0 !important; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); background-color: #f6f6f6 !important; border: 0 !important; font-size: 13px !important;} +ul.token-input-list input{border: 0 !important; background: transparent !important; box-shadow: 0 0 0 transparent !important;} +.TagCloud li{width: 100%; background: #fdfdfd !important; float: left; padding: 6px 0; border-radius: 0 !important} +.TagCloud li>span{float: left; margin: 0 10px;} +.TagCloud li .Count{float: right;} +.ProfilePhotoLarge{width: 100%; border-radius: 3px;} +textarea.TextBox{min-height: 50px !important; height: 50px !important; border-color: #ddd; border-radius: 2px;} +.Button{padding: 8px 12px; text-shadow: 0 0 0 transparent !important; background: #fdfdfd !important; box-shadow: 0 0 0 transparent !important; border-radius: 0 !important; border-color: #ddd !important; color: #666 !important;} +textarea.MultiComplete{height: 32px;} +body.Profile.EditMode #Content form{background: transparent !important;} +/* Panel on the right */ +#Panel {float: right; width: 240px; background: #fdfdfd; box-shadow: 0 1px 1px rgba(0,0,0,0.1); padding: 10px; border-radius: 3px;} +#Body{ + min-width: 320px; + max-width: 1000px; + margin: 10px auto; + box-shadow: 0 1px 1px rgba(0,0,0,.3); + padding: 10px; + background-color: #f6f6f6; + border-radius: 3px; +} +#Body .SiteMenu{display: block; float: right; margin-top: 12px;} +#Body .SiteMenu li a{font-size: 13px;} +#Body .ContentColumn {margin: 0 270px 0 0; background: #fdfdfd; box-shadow: 0 1px 1px rgba(0,0,0,0.1); padding: 10px; border-radius: 3px;} +#Panel input.InputBox { + width: 192px; +} + +/* Backwards compatibility for themes that extended/customized the old version */ +#Body .Wrapper #Content { + margin: 0 215px 0 0; +} +.Banner ul { + background: none repeat scroll 0 0 #3B5998; + margin: 0; + padding: 0; +} +#Foot{margin-bottom: 10px;} +#Foot a{color: #666; font-weight: bold;} +#Menu { + margin-right: 0 !important; +} +.Banner ul li, +#Menu li { display: inline; } +.Banner ul li a, +#Menu a { + display: inline-block; + padding: 3px 7px; + font-size: 13px; + font-weight: bold; + color: #fdfdfd; +} +.Banner ul li a:hover, +#Menu a:hover { + text-decoration: underline; + color: #fdfdfd; +} +#Head #Search form { + float: right; + padding: 0; + margin-top: -30px; +} +#Head #Search form input.InputBox { + width: 204px; + border: 0; + padding: 4px; + margin: 0 6px 0 0; + background: #fdfdfd; + -moz-border-radius: 2px; + -webkit-border: 2px; + border-bottom: 2px; + color: #969696; + font-size: 13px; + vertical-align: bottom; +} +#Head #Search form input.Button { + font-size: 13px; + border: none; +} +/* Custom for CKeditor */ +#cke_Form_Body{border: 1px solid #ddd !important; background: #fdfdfd;} +.cke_editable{min-height: 200px; white-space: pre-wrap; background-color: transparent !important;} +.cke_inner{background: #f0f0f0 !important;} +.cke_chrome{border: 0 !important; box-shadow: 0 0 0 #fdfdfd !important;} +.cke_1 .cke_top{border: 0 !important; box-shadow: 0 0 0 transparent !important; border-radius: 2px; background: transparent !important;} +.cke_float .cke_top{border: 0 !important;} +.cke_bottom{background: transparent !important; border-top: 1px solid #ddd !important;} +.cke_wysiwyg_frame, .cke_wysiwyg_div{background: transparent !important;} +/* If window is less than 800px wide, hide the panel for all pages except profile. */ +@media screen and (max-width: 799px) { + /* Hide the "started by" column of the discussions table. */ + body.Discussions .DataTable .FirstUser { display: none; } + + /* Hide the panel on non-profile pages. */ + #Body .Row { + position: relative; + } + #Body .ContentColumn { + padding-top: 50px; + } + .MeBox, + .BigButton { + visibility: visible; + position: relative; + width: 120px; + display: inline-block; + } + .BigButton { + padding: 8px 20px; + } + .MeBox { + width: 200px; + } + #Panel { + overflow: visible; + visibility: hidden; + position: absolute; + right: 2px; /* Don't know why this is adding some extra padding */ + width: auto; + display: block; + } + .Column.ContentColumn { + margin: 0 !important; + } + + /* Don't hide the panel on the profile page */ + body.Profile #Body .ContentColumn { + padding-top: 0; + } + body.Profile .MeBox, + body.Profile .BigButton { + visibility: visible; + position: relative; + top: auto; + right: auto; + width: auto; + } + body.Profile .MeBox { + width: auto; + right: auto; + } + body.Profile #Panel { + visibility: visible; + position: relative; + right: auto; + width: 200px; + } + body.Profile .Column.ContentColumn { + margin: 0 220px 0 0 !important; + } +} +#Head .HiddenOnDesktop{display: none;} +@media screen and (max-width: 780px) { + .Discussion .PageTitle h1{font-size: 18px;} + #Head .Row{min-width: 320px;} + #Head .HiddenOnMobile{display: none;} + #Head .HiddenOnDesktop{display: block;} + .cd-panel-header .SiteTitle{padding: 10px !important; line-height: 2.2 !important;} + .cd-panel-content .PanelInfo.PanelCategories{width: 90%;} + .cd-panel-content .BoxButtons.BoxNewDiscussion>.Button{margin: 10px 0;} +} +@media screen and (max-width: 600px) { + body.Profile #Panel .Photo.PhotoWrap.PhotoWrapLarge, body.Profile #Panel .BoxFilter.BoxProfileFilter{padding: 10px;} + body.Profile #Panel, body.Profile #Body .ContentColumn{width: 100%; padding: 0; float: left;} + body.Profile #Body .ContentColumn{margin-top: 10px !important; float: left;} + body.Profile #Body .ContentColumn .Profile, body.Profile #Body .ContentColumn .ProfileOptions{padding: 10px;} +} + +/* Slider in Panel */ +.cd-main-content { + text-align: center; +} +.cd-main-content h3 { + color: #000; + padding: 4em 0; +} +.cd-main-content .cd-btn { + position: relative; + display: inline-block; + padding: 1em 2em; + background-color: #89ba2c; + color: #ffffff; + font-weight: bold; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + border-radius: 50em; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1); + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + transition: all 0.2s; +} +.no-touch .cd-main-content .cd-btn:hover { + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); +} +.cd-panel { + position: fixed; + top: 0; + left: 0; + z-index: 9999; + height: 100%; + width: 100%; + visibility: hidden; + -webkit-transition: visibility 0s 0.6s; + -moz-transition: visibility 0s 0.6s; + transition: visibility 0s 0.6s; +} +.cd-panel::after { + /* overlay layer */ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: transparent; + cursor: pointer; + -webkit-transition: background 0.3s 0.3s; + -moz-transition: background 0.3s 0.3s; + transition: background 0.3s 0.3s; +} +.cd-panel.is-visible { + visibility: visible; + -webkit-transition: visibility 0s 0s; + -moz-transition: visibility 0s 0s; + transition: visibility 0s 0s; +} +.cd-panel.is-visible::after { + background: rgba(0, 0, 0, 0.6); + -webkit-transition: background 0.3s 0s; + -moz-transition: background 0.3s 0s; + transition: background 0.3s 0s; +} +.cd-panel.is-visible .cd-panel-close::before { + -webkit-animation: cd-close-1 0.6s 0.3s; + -moz-animation: cd-close-1 0.6s 0.3s; + animation: cd-close-1 0.6s 0.3s; +} +.cd-panel.is-visible .cd-panel-close::after { + -webkit-animation: cd-close-2 0.6s 0.3s; + -moz-animation: cd-close-2 0.6s 0.3s; + animation: cd-close-2 0.6s 0.3s; +} + +@-webkit-keyframes cd-close-1 { + 0%, 50% { + -webkit-transform: rotate(0); + } + 100% { + -webkit-transform: rotate(45deg); + } +} +@-moz-keyframes cd-close-1 { + 0%, 50% { + -moz-transform: rotate(0); + } + 100% { + -moz-transform: rotate(45deg); + } +} +@keyframes cd-close-1 { + 0%, 50% { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -ms-transform: rotate(0); + -o-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + } +} +@-webkit-keyframes cd-close-2 { + 0%, 50% { + -webkit-transform: rotate(0); + } + 100% { + -webkit-transform: rotate(-45deg); + } +} +@-moz-keyframes cd-close-2 { + 0%, 50% { + -moz-transform: rotate(0); + } + 100% { + -moz-transform: rotate(-45deg); + } +} +@keyframes cd-close-2 { + 0%, 50% { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -ms-transform: rotate(0); + -o-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + } +} +.cd-panel-header { + position: fixed; + width: 75%; + height: 43px; + line-height: 38px; + z-index: 9999; + box-shadow: 0 1px 4px rgba(0,0,0,0.3); + border-bottom: 1px solid #333; + background: #373c4a; + -webkit-transition: top 0.3s 0s; + -moz-transition: top 0.3s 0s; + transition: top 0.3s 0s; +} +.cd-panel-header h3 { + font-weight: bold; + font-size: 28px; + color: #000; + margin-top: 10px; + padding: 0 10px; +} +.from-right .cd-panel-header, .from-left .cd-panel-header { + top: -50px; +} +.from-right .cd-panel-header { + right: 0; +} +.from-left .cd-panel-header { + left: 0; +} +.is-visible .cd-panel-header { + top: 0; + -webkit-transition: top 0.3s 0.3s; + -moz-transition: top 0.3s 0.3s; + transition: top 0.3s 0.3s; +} +@media only screen and (min-width: 768px) { + .cd-panel-header { + width: 70%; + } +} +@media only screen and (min-width: 1170px) { + .cd-panel-header { + width: 50%; + } +} + +.cd-panel-close { + position: absolute; + top: 0; + right: 0; + height: 100%; + padding: 4px 20px; + /* image replacement */ + display: inline-block; + overflow: hidden; + text-align: center; + white-space: nowrap; + color: #fff; +} +.cd-panel-close::before, .cd-panel-close::after { + /* close icon created in CSS */ + position: absolute; + top: 22px; + left: 20px; + height: 3px; + width: 20px; + background-color: #424f5c; + /* this fixes a bug where pseudo elements are slighty off position */ + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +.cd-panel-close::before { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} +.cd-panel-close::after { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.no-touch .cd-panel-close:hover { + background-color: #ccc; +} +.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after { + background-color: #ffffff; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.no-touch .cd-panel-close:hover::before { + -webkit-transform: rotate(220deg); + -moz-transform: rotate(220deg); + -ms-transform: rotate(220deg); + -o-transform: rotate(220deg); + transform: rotate(220deg); +} +.no-touch .cd-panel-close:hover::after { + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -ms-transform: rotate(135deg); + -o-transform: rotate(135deg); + transform: rotate(135deg); +} + +.cd-panel-container { + position: fixed; + width: 75%; + height: 100%; + top: 0; + background: #f0f0f0; + z-index: 1; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-delay: 0.3s; + -moz-transition-delay: 0.3s; + transition-delay: 0.3s; +} +.from-right .cd-panel-container { + right: 0; + -webkit-transform: translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + -o-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); +} +.from-left .cd-panel-container { + left: 0; + -webkit-transform: translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + -o-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.is-visible .cd-panel-container { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-delay: 0s; + -moz-transition-delay: 0s; + transition-delay: 0s; +} +@media only screen and (min-width: 768px) { + .cd-panel-container { + width: 70%; + } +} +@media only screen and (min-width: 1170px) { + .cd-panel-container { + width: 50%; + } +} + +.cd-panel-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 60px 15px; + overflow: auto; + /* smooth scrolling on touch devices */ + -webkit-overflow-scrolling: touch; +} +.cd-panel-content p { + color: #424f5c; + line-height: 1.4; + margin: 2em 0; +} +.cd-panel-content p:first-of-type { + margin-top: 0; +} +@media only screen and (min-width: 768px) { + .cd-panel-content p { + line-height: 1.6; + } +} \ No newline at end of file diff --git a/design/slidepanel.js b/design/slidepanel.js new file mode 100644 index 0000000..58f28ea --- /dev/null +++ b/design/slidepanel.js @@ -0,0 +1,14 @@ +jQuery(document).ready(function($){ + //open the lateral panel + $('.cd-btn').on('click', function(event){ + event.preventDefault(); + $('.cd-panel').addClass('is-visible'); + }); + //clode the lateral panel + $('.cd-panel').on('click', function(event){ + if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-close') ) { + $('.cd-panel').removeClass('is-visible'); + event.preventDefault(); + } + }); +}); \ No newline at end of file diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000..59b5633 Binary files /dev/null and b/screenshot.png differ diff --git a/views/default.master.tpl b/views/default.master.tpl new file mode 100644 index 0000000..5cb51bc --- /dev/null +++ b/views/default.master.tpl @@ -0,0 +1,76 @@ + + + + + {asset name='Head'} + + + + + +
+ +
+
{searchbox}
+
+ +
+
{breadcrumbs}
+
+ {asset name="Panel"} +
+
{asset name="Content"}
+
+
+ +
+{event name="AfterBody"} +
+
+ {logo} + Close +
+
+
+
    + {activity_link} + {discussions_link} + {dashboard_link} + {inbox_link} + {profile_link} + {signinout_link} +
+ {asset name="Panel"} +
+
+
+ + \ No newline at end of file