Topic: Reseller

[Daniiel]

Link to the theme

Free & Premium Responsive Themes for SMF

Reseller
Developed by Daniiel
Designed by Brian Casillas

Features

• Responsive layout
• Bootstrap
• FontAwesome
• Social networks
• Logo URL

Languages


Demo Online
GitHub

[-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]

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

Code: [Select]

.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]

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

Code: [Select]

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]

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

Code: [Select]

.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]

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

Code: [Select]

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]

<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]

<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]

// 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]

// 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]

<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]

<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]

<footer>
Replace with:

Code: [Select]

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<footer>
Reseller.css
Add to the end:

Code: [Select]

#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]

// 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]

// 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]

<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]

<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]

<footer>
Replace with:

Code: [Select]

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<footer>
Reseller.css
Add to the end:

Code: [Select]

#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]

    background: rgba(0, 0, 0, 0.7);
And the color of hover:

Code: [Select]

    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]

    background: rgba(0, 0, 0, 0.7);
And the color of hover:

Code: [Select]

    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]

body
{
min-width: 750px;
}
i had modified it to

Code: [Select]

body
{
min-width: device-width;
}

[Daniiel]

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