Reseller

[Diego Andrés]

Link to the theme

Free & Premium Themes for SMF

Reseller
Developed by Daniiel and Diego Andrés
Designed by: Brian Casillas

Preview:

Demo Online

☑️ Features

• FontAwesome
• Social Networks
• Logo URL
• Forum Width
• Separate sticky topics
• Avatars
  
  • Boards
  • Topics
  • Online Users
  • Recent Posts
  • Memberlist
• Menu Customization
  
  • Disable Menu Icons
  • Add Log out, Log in and Sign up buttons
  • Remove Specific Menu
  • Community Button for Grouping
• Select CDN for Fonts
• Quick New Topic Button

📦 Installation
It is installed as a traditional SMF Theme for SMF 2.1.x, just grab the latest release of the package and go to: Admin > Configuration > Themes and Layout > Install a New Theme > From an Archive > Select File > Upload.

You can find detailed instructions and/or more documentation about the process in Installation - How do I install a theme.

🌐 Localization
Translations are all based off the Theme Customs strings, and you can contribute directly on Crowdin.

🔨 Changelog
Review the changes and patches from the different releases/versions of the package in the Changelog

[-Captain Ghost-]

Only two word "Good job" 

I think it's first responsive theme for smf ??

One question that is to possible to make menu bar visible if we scroll downward like http://wpcentral.com

Thanks

[Diego Andrés]

Sure, just edit the reseller.css, find this

Code Select Expand

.navbar-default
{
background-color: #26282b;
border-color: #222427;
border-bottom-width: 0;
box-shadow: 0 -3px #222427 inset;
}

Replace with

Code Select Expand

.navbar-default
{
background-color: #26282b;
border-color: #222427;
border-bottom-width: 0;
box-shadow: 0 -3px #222427 inset;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}

And find

Code Select Expand

header
{
background: #3498db;
box-shadow: 0 -3px #9fc6e0 inset;
padding: 20px 0;
}

Replace with

Code Select Expand

header
{
background: #3498db;
box-shadow: 0 -3px #9fc6e0 inset;
padding: 20px 0;
margin-top: 50px;
}

Try 

[-Captain Ghost-]

Thanks for replying with speed of light 
Will check and tell you.

[-Captain Ghost-]

Sure, just edit the reseller.css, find this

Code Select Expand

.navbar-default
{
background-color: #26282b;
border-color: #222427;
border-bottom-width: 0;
box-shadow: 0 -3px #222427 inset;
}

Replace with

Code Select Expand

.navbar-default
{
background-color: #26282b;
border-color: #222427;
border-bottom-width: 0;
box-shadow: 0 -3px #222427 inset;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}

And find

Code Select Expand

header
{
background: #3498db;
box-shadow: 0 -3px #9fc6e0 inset;
padding: 20px 0;
}

Replace with

Code Select Expand

header
{
background: #3498db;
box-shadow: 0 -3px #9fc6e0 inset;
padding: 20px 0;
margin-top: 50px;
}

Try 

It worked but one last question that can you add any css style(Do know what to say to this) to this like fade in fade out or other. 

[Daniiel]

It worked but one last question that can you add any css style(Do know what to say to this) to this like fade in fade out or other. 

I do not understand what you're trying to say, can you explain better?

[-Captain Ghost-]

Is there any way to add effects (like hover) to the menu bar when it is going up or down just like wpcentral.com

Thanks 

[-Captain Ghost-]

Can you tell the name of font used in logo 

[Daniiel]

Is there any way to add effects (like hover) to the menu bar when it is going up or down just like wpcentral.com

Thanks 

Index.template.php
Search:

Code Select Expand

<script type="text/javascript">
$(document).ready(function(){
$("input[type=button]").attr("class", "btn btn-default btn-sm");
$(".button_submit").attr("class", "btn btn-primary btn-sm");
$("#advanced_search input[type=\'text\'], #search_term_input input[type=\'text\']").removeAttr("size");
$(".table_grid").attr("class", "table table-striped");
$("img[alt=\'', $txt['new'], '\'], img.new_posts").replaceWith("<span class=\'label label-warning\'>', $txt['new'], '</span>");
$("#profile_success").removeAttr("id").removeClass("windowbg").addClass("alert alert-success");
$("#profile_error").removeAttr("id").removeClass("windowbg").addClass("alert alert-danger");
});
</script>

Replace with:

Code Select Expand

<script type="text/javascript">
$(document).ready(function(){
var previousScroll = 0, headerOrgOffset = $("nav").height();
$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $("nav").fadeOut();
        } else {
            $("nav").fadeIn();
        }
    } else {
            $("nav").fadeIn();
    }
    previousScroll = currentScroll;
});
$("input[type=button]").attr("class", "btn btn-default btn-sm");
$(".button_submit").attr("class", "btn btn-primary btn-sm");
$("#advanced_search input[type=\'text\'], #search_term_input input[type=\'text\']").removeAttr("size");
$(".table_grid").attr("class", "table table-striped");
$("img[alt=\'', $txt['new'], '\'], img.new_posts").replaceWith("<span class=\'label label-warning\'>', $txt['new'], '</span>");
$("#profile_success").removeAttr("id").removeClass("windowbg").addClass("alert alert-success");
$("#profile_error").removeAttr("id").removeClass("windowbg").addClass("alert alert-danger");
});
</script>

Can you tell the name of font used in logo 

The name of the font is "Intro"

[Neekiinh0]

Muchos errores para validar daniel, fijate en eso! El diseño plano esta bien logrado!

[Antes]

Pretty please keep English in this board.

[Neekiinh0]

Ok, try to validate all the errors you have. The flat design very good.

[Daniiel]

Ok, try to validate all the errors you have. The flat design very good.

The theme is validated or else they would not have approved. Remember validate as HTML5.

[-Captain Ghost-]

Sorry but again i need your help.
How can i implement this go to top http://codepen.io/rdallaire/pen/apoyx

Thanks,

[Daniiel]

Sorry but again i need your help.
How can i implement this go to top http://codepen.io/rdallaire/pen/apoyx

Thanks,

Easy.
Index.template.php
Search:

Code Select Expand

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '>
<head>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/reseller.css" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

Replace with:

Code Select Expand

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '>
<head>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/reseller.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';


Search:

Code Select Expand

<script type="text/javascript">
$(document).ready(function(){
var previousScroll = 0, headerOrgOffset = $("nav").height();
$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $("nav").fadeOut();
        } else {
            $("nav").fadeIn();
        }
    } else {
            $("nav").fadeIn();
    }
    previousScroll = currentScroll;
});
$("input[type=button]").attr("class", "btn btn-default btn-sm");
$(".button_submit").attr("class", "btn btn-primary btn-sm");
$("#advanced_search input[type=\'text\'], #search_term_input input[type=\'text\']").removeAttr("size");
$(".table_grid").attr("class", "table table-striped");
$("img[alt=\'', $txt['new'], '\'], img.new_posts").replaceWith("<span class=\'label label-warning\'>', $txt['new'], '</span>");
$("#profile_success").removeAttr("id").removeClass("windowbg").addClass("alert alert-success");
$("#profile_error").removeAttr("id").removeClass("windowbg").addClass("alert alert-danger");
});
</script>

Replace with:

Code Select Expand

<script type="text/javascript">
$(document).ready(function(){
var previousScroll = 0, headerOrgOffset = $("nav").height();
$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $("nav").fadeOut();
        } else {
            $("nav").fadeIn();
        }
    } else {
            $("nav").fadeIn();
    }
    previousScroll = currentScroll;
});
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $("#return-to-top").fadeIn(200);    // Fade in the arrow
    } else {
        $("#return-to-top").fadeOut(200);   // Else fade out the arrow
    }
});
$("#return-to-top").click(function() {      // When arrow is clicked
    $("body,html").animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
$("input[type=button]").attr("class", "btn btn-default btn-sm");
$(".button_submit").attr("class", "btn btn-primary btn-sm");
$("#advanced_search input[type=\'text\'], #search_term_input input[type=\'text\']").removeAttr("size");
$(".table_grid").attr("class", "table table-striped");
$("img[alt=\'', $txt['new'], '\'], img.new_posts").replaceWith("<span class=\'label label-warning\'>', $txt['new'], '</span>");
$("#profile_success").removeAttr("id").removeClass("windowbg").addClass("alert alert-success");
$("#profile_error").removeAttr("id").removeClass("windowbg").addClass("alert alert-danger");
});
</script>

Search:

Code Select Expand

<footer>

Replace with:

Code Select Expand

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<footer>

Reseller.css
Add to the end:

Code Select Expand

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}


[-Captain Ghost-]

Sorry but again i need your help.
How can i implement this go to top http://codepen.io/rdallaire/pen/apoyx

Thanks,

Easy.
Index.template.php
Search:

Code Select Expand

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '>
<head>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/reseller.css" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

Replace with:

Code Select Expand

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '>
<head>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/reseller.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';


Search:

Code Select Expand

<script type="text/javascript">
$(document).ready(function(){
var previousScroll = 0, headerOrgOffset = $("nav").height();
$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $("nav").fadeOut();
        } else {
            $("nav").fadeIn();
        }
    } else {
            $("nav").fadeIn();
    }
    previousScroll = currentScroll;
});
$("input[type=button]").attr("class", "btn btn-default btn-sm");
$(".button_submit").attr("class", "btn btn-primary btn-sm");
$("#advanced_search input[type=\'text\'], #search_term_input input[type=\'text\']").removeAttr("size");
$(".table_grid").attr("class", "table table-striped");
$("img[alt=\'', $txt['new'], '\'], img.new_posts").replaceWith("<span class=\'label label-warning\'>', $txt['new'], '</span>");
$("#profile_success").removeAttr("id").removeClass("windowbg").addClass("alert alert-success");
$("#profile_error").removeAttr("id").removeClass("windowbg").addClass("alert alert-danger");
});
</script>

Replace with:

Code Select Expand

<script type="text/javascript">
$(document).ready(function(){
var previousScroll = 0, headerOrgOffset = $("nav").height();
$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $("nav").fadeOut();
        } else {
            $("nav").fadeIn();
        }
    } else {
            $("nav").fadeIn();
    }
    previousScroll = currentScroll;
});
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $("#return-to-top").fadeIn(200);    // Fade in the arrow
    } else {
        $("#return-to-top").fadeOut(200);   // Else fade out the arrow
    }
});
$("#return-to-top").click(function() {      // When arrow is clicked
    $("body,html").animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
$("input[type=button]").attr("class", "btn btn-default btn-sm");
$(".button_submit").attr("class", "btn btn-primary btn-sm");
$("#advanced_search input[type=\'text\'], #search_term_input input[type=\'text\']").removeAttr("size");
$(".table_grid").attr("class", "table table-striped");
$("img[alt=\'', $txt['new'], '\'], img.new_posts").replaceWith("<span class=\'label label-warning\'>', $txt['new'], '</span>");
$("#profile_success").removeAttr("id").removeClass("windowbg").addClass("alert alert-success");
$("#profile_error").removeAttr("id").removeClass("windowbg").addClass("alert alert-danger");
});
</script>

Search:

Code Select Expand

<footer>

Replace with:

Code Select Expand

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<footer>

Reseller.css
Add to the end:

Code Select Expand

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}


You know what if there exist a like button on smf i would have definitely pressed it 
BTW can i change black color of go to top

[Daniiel]

You know what if there exist a like button on smf i would have definitely pressed it 
BTW can i change black color of go to top

Yes you can. You only have to go to Reseller.css and change the following:

Code Select Expand

    background: rgba(0, 0, 0, 0.7);

And the color of hover:

Code Select Expand

    background: rgba(0, 0, 0, 0.9);

You can visit this page to get your rgba color: http://hex2rgba.devoth.com/

Regards! 

[-Captain Ghost-]

You know what if there exist a like button on smf i would have definitely pressed it 
BTW can i change black color of go to top

Yes you can. You only have to go to Reseller.css and change the following:

Code Select Expand

    background: rgba(0, 0, 0, 0.7);

And the color of hover:

Code Select Expand

    background: rgba(0, 0, 0, 0.9);

You can visit this page to get your rgba color: http://hex2rgba.devoth.com/

Regards! 

Thanks again 

[-Captain Ghost-]

There is a problem that theme is not resizing according to mobile screen size and one more problem that there is a Spanish text when you click login below password box.

My phone Lumia 520

See screen shots.

Thanks

Edit:
I had observed the code which is causing problem
It is a code in portal.css of simpleportal
Here it is

Code Select Expand

body
{
min-width: 750px;
}

i had modified it to

Code Select Expand

body
{
min-width: device-width;
}

[Daniiel]

I added the PSD of the logo (the file includes the font).