News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Reseller

Started by Diego Andrés, July 30, 2014, 11:08:08 AM

Previous topic - Next topic

Diego Andrés

Link to the theme



Free & Premium Responsive Themes for SMF




Reseller
Developed by Daniiel
Designed by Brian Casillas


Features
  • Bootstrap
  • Custom Copyright
  • Social networks
  • Logo URL

Languages



Demo Online
GitHub

SMF Tricks - Free & Premium Responsive Themes for SMF.

-Captain Ghost-

Only two word "Good job"  ;D

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
.navbar-default
{
background-color: #26282b;
border-color: #222427;
border-bottom-width: 0;
box-shadow: 0 -3px #222427 inset;
}


Replace with
.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
header
{
background: #3498db;
box-shadow: 0 -3px #9fc6e0 inset;
padding: 20px 0;
}


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


Try  :P

SMF Tricks - Free & Premium Responsive Themes for SMF.

-Captain Ghost-

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

-Captain Ghost-

#4
Quote from: Diego Andrés on July 30, 2014, 11:27:56 AM
Sure, just edit the reseller.css, find this
.navbar-default
{
background-color: #26282b;
border-color: #222427;
border-bottom-width: 0;
box-shadow: 0 -3px #222427 inset;
}


Replace with
.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
header
{
background: #3498db;
box-shadow: 0 -3px #9fc6e0 inset;
padding: 20px 0;
}


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


Try  :P

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

Quote from: r4ll on July 30, 2014, 11:44:17 AM
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  ;D

Daniiel

Quote from: r4ll on July 30, 2014, 11:22:06 PM
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:
<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:
<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>




Quote from: r4ll on July 31, 2014, 01:55:15 PM
Can you tell the name of font used in logo  ;D

The name of the font is "Intro"


Neekiinh0

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


Adaptamos themes de otras plataformas a SMF!
Contactame por MP o Skype: neekiinh0 para saber mas.

Antes

Pretty please keep English in this board.

Neekiinh0

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


Adaptamos themes de otras plataformas a SMF!
Contactame por MP o Skype: neekiinh0 para saber mas.

Daniiel

Quote from: Neekiinh0 on July 31, 2014, 10:22:21 PM
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

Quote from: r4ll on July 31, 2014, 11:40:57 PM
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:
// 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:
// 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:
<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:
<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:
<footer>

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


Reseller.css
Add to the end:
#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-

Quote from: Daniiel on July 31, 2014, 11:50:56 PM
Quote from: r4ll on July 31, 2014, 11:40:57 PM
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:
// 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:
// 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:
<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:
<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:
<footer>

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


Reseller.css
Add to the end:
#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  ;D
BTW can i change black color of go to top

Daniiel

Quote from: r4ll on July 31, 2014, 11:59:43 PM
You know what if there exist a like button on smf i would have definitely pressed it  ;D
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:
    background: rgba(0, 0, 0, 0.7);

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

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

Regards!  :D

-Captain Ghost-

Quote from: Daniiel on August 01, 2014, 12:05:34 AM
Quote from: r4ll on July 31, 2014, 11:59:43 PM
You know what if there exist a like button on smf i would have definitely pressed it  ;D
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:
    background: rgba(0, 0, 0, 0.7);

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

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

Regards!  :D
Thanks again  :)

-Captain Ghost-

#18
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 body
{
min-width: 750px;
}


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




Daniiel

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

Advertisement: