Advertisement:

Author Topic: Reseller  (Read 135721 times)

Offline Daniiel

  • Semi-Newbie
  • *
  • Posts: 78
  • Gender: Male
    • SMFTricks on GitHub
    • SMFTricks
Reseller
« on: July 30, 2014, 11:08:08 AM »

Offline -Captain Ghost-

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
Re: Reseller
« Reply #1 on: July 30, 2014, 11:15:55 AM »
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

Offline Diego Andrés

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 3,058
  • Gender: Male
  • We know, we'll be coming
    • DiegoCortes on GitHub
    • @comeladrillos on Twitter
    • SMF Tricks - Free & Premium Themes
Re: Reseller
« Reply #2 on: July 30, 2014, 11:27:56 AM »
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  :P

SMF Tricks - Free & Premium Responsive Themes for SMF.

Offline -Captain Ghost-

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
Re: Reseller
« Reply #3 on: July 30, 2014, 11:33:50 AM »
Thanks for replying with speed of light  ;D
Will check and tell you.

Offline -Captain Ghost-

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
Re: Reseller
« Reply #4 on: July 30, 2014, 11:44:17 AM »
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  :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.  :)
« Last Edit: July 30, 2014, 11:55:09 AM by r4ll »

Offline Daniiel

  • Semi-Newbie
  • *
  • Posts: 78
  • Gender: Male
    • SMFTricks on GitHub
    • SMFTricks
Re: Reseller
« Reply #5 on: July 30, 2014, 08:56:40 PM »
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?

Offline -Captain Ghost-

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
Re: Reseller
« Reply #6 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  :)

Offline -Captain Ghost-

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
Re: Reseller
« Reply #7 on: July 31, 2014, 01:55:15 PM »
Can you tell the name of font used in logo  ;D

Offline Daniiel

  • Semi-Newbie
  • *
  • Posts: 78
  • Gender: Male
    • SMFTricks on GitHub
    • SMFTricks
Re: Reseller
« Reply #8 on: July 31, 2014, 05:02:25 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:
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  ;D

The name of the font is "Intro"


Offline Neekiinh0

  • Jr. Member
  • **
  • Posts: 226
  • Gender: Male
    • neecorc on Facebook
    • @neekiinh0 on Twitter
    • SMFpersonal
Re: Reseller
« Reply #9 on: July 31, 2014, 05:50:27 PM »
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.

SMFPersonal.net

Themes Demo

Dolphin
Personal

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,634
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: Reseller
« Reply #10 on: July 31, 2014, 07:01:07 PM »
Pretty please keep English in this board.
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline Neekiinh0

  • Jr. Member
  • **
  • Posts: 226
  • Gender: Male
    • neecorc on Facebook
    • @neekiinh0 on Twitter
    • SMFpersonal
Re: Reseller
« Reply #11 on: July 31, 2014, 10:22:21 PM »
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.

SMFPersonal.net

Themes Demo

Dolphin
Personal

Offline Daniiel

  • Semi-Newbie
  • *
  • Posts: 78
  • Gender: Male
    • SMFTricks on GitHub
    • SMFTricks
Re: Reseller
« Reply #12 on: July 31, 2014, 11:01:17 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.


Offline -Captain Ghost-

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
Re: Reseller
« Reply #13 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,

Offline Daniiel

  • Semi-Newbie
  • *
  • Posts: 78
  • Gender: Male
    • SMFTricks on GitHub
    • SMFTricks
Re: Reseller
« Reply #14 on: July 31, 2014, 11:50:56 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:
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;
}

Offline -Captain Ghost-

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
Re: Reseller
« Reply #15 on: July 31, 2014, 11:59:43 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:
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  ;D
BTW can i change black color of go to top

Offline Daniiel

  • Semi-Newbie
  • *
  • Posts: 78
  • Gender: Male
    • SMFTricks on GitHub
    • SMFTricks
Re: Reseller
« Reply #16 on: August 01, 2014, 12:05:34 AM »
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:
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!  :D

Offline -Captain Ghost-

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
Re: Reseller
« Reply #17 on: August 01, 2014, 12:09:58 AM »
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:
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!  :D
Thanks again  :)

Offline -Captain Ghost-

  • Jr. Member
  • **
  • Posts: 110
  • Gender: Male
Re: Reseller
« Reply #18 on: August 01, 2014, 02:14:15 AM »
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;
}


« Last Edit: August 01, 2014, 07:07:58 AM by r4ll »

Offline Daniiel

  • Semi-Newbie
  • *
  • Posts: 78
  • Gender: Male
    • SMFTricks on GitHub
    • SMFTricks
Re: Reseller
« Reply #19 on: August 02, 2014, 04:01:27 PM »
I added the PSD of the logo (the file includes the font).