Posts by premiumwd

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says

hey rock and rolla I see you have a demo switcher, if you don’t mind I posted a thread for some help if you can I can give you some feedback?

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says

haha nice one dude!

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says

I have seen a lot of threads on theme-forest with a lot of different ways to approach this for their demos. I had a big challenge to try and make this happen and it is quite out of my level of knowledge to put it all together and function properly.

I have already created the js, css, and html to make it slide out and users to be able to change options. However connecting the styles to make it change is where I am at.

Here is the code for the js, css, and html to make a show/hide horizontal demo menu with style switcher.

HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script>
<script type="text/javascript">
google.setOnLoadCallback(function()
{
   // Color changer
   $(".blue").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/blue.css");
      return false;
   });

   $(".green").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/green.css");
      return false;
   });

   $(".orange").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/orange.css");
      return false;
   });

    $(".black").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/black.css");
      return false;
   });

   $(".white").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/white.css");
      return false;
   });

   $(".grey").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/grey.css");
      return false;
   });

  $(".purple").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/purple.css");
      return false;
   });

   $(".yellow").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/yellow.css");
      return false;
   });

   $(".red").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/red.css");
      return false;
   });

});
</script>
<ul id="navigation">
            <li><span>Click Me!</span>

             <div id="panel">

    <div style="padding:10px 10px 0 10px;">
     <a class="grey" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/grey.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/grey.png" width="25" height="25" /></a>
     <a class="white" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/white.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/white.png" width="25" height="25" /></a>
     <a class="blue" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/blue.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/blue.png" width="25" height="25" /></a>
     <a class="red" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/red.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/red.png" width="25" height="25" /></a>
     <a class="green" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/green.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/green.png" width="25" height="25" /></a>
     <a class="orange" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/orange.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/orange.png" width="25" height="25" /></a>
     <a class="yellow" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/yellow.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/yellow.png" width="25" height="25" /></a>
     <a class="purple" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/purple.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/purple.png" width="25" height="25" /></a>
    </div>

</div>

</li>
</ul>
CSS
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 140px;
    left: 0px;
    list-style: none;
    z-index:999999;
}
ul#navigation li {
    width: 30px;
    height:27px;
}
ul#navigation li span {
    display: block;
    width: 10px;
    height:10px;
    padding: 7px 10px 10px 10px;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;  
    background-color:#fff;
    margin-left:-3px;
    border:1px solid #ccc;
    border-left:none !important;
    cursor:pointer;
}

  #panel {
    background: #fff;
    border:1px solid #ccc;
    height: 450px;
    width:145px;
    position:relative;
    top:-29px;left:-147px;
    border-bottom-right-radius:5px;
}  
JS
<script type="text/javascript">
        $(document).ready(function() {
 $('#navigation > li ').toggle(function() {
   $('span,#panel',$(this)).stop().animate({'marginLeft':'145px'},200);
  },function(){
   $('span,#panel',$(this)).stop().animate({'marginLeft':'0px'},200);
  });
});
</script>

This is a great way for users to test out your demos. Have fun :P

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says

I have seen a lot of threads on theme-forest with a lot of different ways to approach this for their demos. I had a big challenge to try and make this happen and it is quite out of my level of knowledge to put it all together and function properly.

I have already created the js, css, and html to make it slide out and users to be able to change options. However connecting the styles to make it change is where I am at.

Here is the code for the js, css, and html to make a show/hide horizontal demo menu with style switcher.

HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script>
<script type="text/javascript">
google.setOnLoadCallback(function()
{
   // Color changer
   $(".blue").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/blue.css");
      return false;
   });

   $(".green").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/green.css");
      return false;
   });

   $(".orange").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/orange.css");
      return false;
   });

    $(".black").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/black.css");
      return false;
   });

   $(".white").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/white.css");
      return false;
   });

   $(".grey").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/grey.css");
      return false;
   });

  $(".purple").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/purple.css");
      return false;
   });

   $(".yellow").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/yellow.css");
      return false;
   });

   $(".red").click(function(){
      $("link").attr("href", "<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/red.css");
      return false;
   });

});
</script>
<ul id="navigation">
            <li><span>Click Me!</span>

             <div id="panel">

    <div style="padding:10px 10px 0 10px;">
     <a class="grey" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/grey.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/grey.png" width="25" height="25" /></a>
     <a class="white" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/white.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/white.png" width="25" height="25" /></a>
     <a class="blue" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/blue.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/blue.png" width="25" height="25" /></a>
     <a class="red" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/red.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/red.png" width="25" height="25" /></a>
     <a class="green" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/green.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/green.png" width="25" height="25" /></a>
     <a class="orange" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/orange.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/orange.png" width="25" height="25" /></a>
     <a class="yellow" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/yellow.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/yellow.png" width="25" height="25" /></a>
     <a class="purple" href="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/purple.css"><img src="<?php bloginfo('template_directory'); ?>/premiumwd-options/skins/images/purple.png" width="25" height="25" /></a>
    </div>

</div>

</li>
</ul>
CSS
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 140px;
    left: 0px;
    list-style: none;
    z-index:999999;
}
ul#navigation li {
    width: 30px;
    height:27px;
}
ul#navigation li span {
    display: block;
    width: 10px;
    height:10px;
    padding: 7px 10px 10px 10px;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;  
    background-color:#fff;
    margin-left:-3px;
    border:1px solid #ccc;
    border-left:none !important;
    cursor:pointer;
}

  #panel {
    background: #fff;
    border:1px solid #ccc;
    height: 450px;
    width:145px;
    position:relative;
    top:-29px;left:-147px;
    border-bottom-right-radius:5px;
}  
JS
<script type="text/javascript">
        $(document).ready(function() {
 $('#navigation > li ').toggle(function() {
   $('span,#panel',$(this)).stop().animate({'marginLeft':'145px'},200);
  },function(){
   $('span,#panel',$(this)).stop().animate({'marginLeft':'0px'},200);
  });
});
</script>

This is a great way for users to test out your demos. Have fun :P

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says

+1200

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says

Hi,

Place <?php session_start() ?> at the top of functions.php file then in your header.php use the code below

<?php

$_SESSION['color'] = 'blue';
if(isset($_GET['color']))
    $_SESSION['color'] = $_GET['color'];

?>

<link href="<?php bloginfo('template_directory'); ?>/css/<?php echo $_SESSION['color']; ?>.css" rel="stylesheet" type="text/css" media="all" />

Hi I know this is an old post, but I would like to know how you outputed this session for the colors?

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says

Hey all so I thought I post a thread to ask for some help with making my current js that shows the hidden element to work with the color wheel farbtastic color picker.

<script type=”text/javascript”> $(document).ready(function() { $(’#colorpicker’).farbtastic(’#color’); }); </script> }); </script>

<script type="text/javascript">
       $(document).ready(function() {
$('#navigation > li').toggle(function() {
  $('span,#panel',$(this)).stop().animate({'marginLeft':'145px'},200);
 },function(){
  $('span,#panel',$(this)).stop().animate({'marginLeft':'0px'},200);
 });

URL to Color Wheel http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

Apparently they both conflict when I use it, I am new to JS so I do not know why it’s conflicting, can someone give me a hint?

Thanks

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says

Spacing everywhere. That’s your big problem.

Also your search does not work.

Also you have an img tag in your head tag. What is that?

Flickr widget does not have breakets for the src for the img tag.

Also your icons are blurry.

The search button under the main menu breaks my eyes.

Your background is a gradient over a pattern. Why not repeat a layer and stop it from loading every single time that the page loads?

And just a reminder – everyone thinks that their theme is the best. Well it’s not.

I can see a lot of things wrong with it, but also can see a lot of things wrong with other theme accepted, so what do i know.

hey thanks for your input I appreciate it, can I email you and pay you for a full template advise for all pages?

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says

11 months on that theme? wow…

and still have issues like:

http://demo.premiumwd.com/innovate/?s=
http://demo.premiumwd.com/innovate/purple-haze-nightsky/
http://demo.premiumwd.com/innovate/blog-left-sidebar/
http://demo.premiumwd.com/innovate/blog-style-3-left-sidebar/
http://demo.premiumwd.com/innovate/faq/

I’m really sorry to tell you that, but this theme needs a lot of improvement in order to get accepted. Also what some of the other authors mentioned needs some reworking like spacing, typo, fonts,...

I know how frustrating a rejection can be and I’m sure many others do as well but if the reviewer doesn’t give you a short explantation what needs to be done and what not you should know that they only don’t know where to start. They “review” products, and are not teaching people webdesign principles and best practices.

I had a similar case where I tried to submit a supa-dupa-all-in-one-mega theme, but now I know that this isn’t the way to go. Extract the functionality into plugins and concentrate only on the stylings and esthetics within the theme. Less is sometimes more…

Suggestion: start over with a new design, new theme, new concept. That’s probably the best way.

You can also take your business elsewhere of course, but you’ll see even if your item gets accepted on another marketplace – you won’t get that much sales.

Good Luck

Hey thanks for the review of my theme, I appreciate it. I will look over it and improve it.

45 posts
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
  • United States
premiumwd says
I can see why you’re rejected 10 times and why they repeat the same message again and again. A quick look @ homepage:
- white space issues
- type: I counted at least 3 similar sans serif fonts being used
- margin/padding inconsistencies
...

Can you be more specific? How can I improve this theme?

by
by
by
by
by
by