EpioneFree WordPress Theme

Epione is a wordpress theme with 5 gorgeous skins.The name “Epione” derived from greek goddess of the soothing of pain.
  • Fantabulous Typographic Theme.
  • Unique Homepage With Slider.
  • 5 fantastic skins.
  • Popular posts widget.
  • WordPress 3.0 Menu.
  • Mult-Level Dropdown Menu.
  • Custom login Page.
  • Social buttons to submit posts to Facebook, Twitter,
  • Stumble upon, Digg, Google Buzz!
  • Awesome font.
  • Easy to use theme options.
  • Gravatar Support.
  • Threaded comments support.
  • Valid XHTML/CSS3.
  • No hidden, paid or sponsored links in the theme.
  • One Click Install. No plugin required.

Compatibility:

  • Internet Explorer 7+
  • Firefox 3+
  • Safari 5
  • Opera 9+
  • Netscape 6+

1.4
—-
+ Added WordPress “Featured image” option available for post thumbnails and the slider.
+ Added wordpress 3.0 Menu feature

 

1.3
—–
Initial Release

1. How Do I add content to the slider?

A: Go to Appearance> Epione Options> Slider and select a category for the slider.
The slider will show the latest posts from that category.
2. How-To change the slider speed:

A: You have to open up “other.js” file from your epione/js theme folder and find:

pause: 2000,

To change the speed you have to change this value to your desired need. The default is 2000 milliseconds. If you want to slow the slider down you have to increase this value and save the file.

Note: If you dont know how to open the other.js file via FTP. Use this plugin:
http://wordpress.org/plugins/wp-filemanager/

 

3. The slider stopped sliding, how to fix that?

A: Its probably a plugin conflict. Disable all the plugins one by one and find out which one is causing this.

 

4. Whats the right dimension for the slider images?

A: 450px x 230px

The theme is released under GNU General Public License, version 2.


  • Thanks again! 🙂


  • Can you help me fix the css for the drop down menu? the submenu is not aligned with the it’s parent.

    Here is my style for the menu and the html in the header:

    /*MENU*/
    #menu{margin-top:40px;margin-bottom:15px; width:1000px;float:left;background: none repeat scroll 0 0 #000000;border-top: 1px solid #FFFFFF;
    }
    #menu-left {
    float:left;
    display:inline;
    width:570px;
    }
    #menu-right {
    float:right;
    display:inline; margin-right:15px;
    }
    .topmenu{}
    .menu-header{}
    .topmenu ul{ margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-family: ING, LiberationMonoRegular, Arial, Helvetica, sans-serif;
    font-style:italic;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 20px;
    text-transform: uppercase;
    list-style-type: none; border: medium none;
    cursor:pointer;

    }
    .topmenu ul li{ display: inline;
    margin: 0;}
    .topmenu ul li a{ float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 7px 8px; /*padding inside each tab*/
    border-right: 1px solid white; /*right divider between tabs*/
    color: white;
    background: black; /*background of tabs (default state)*/}
    .topmenu li a:visited{
    color: white;
    }
    .topmenu ul li a:hover, .topmenu ul li.selected a{
    background: #fff; /*background of tabs for hover state, plus tab with “selected” class assigned to its LI */

    color: #7661A4;
    -webkit-transition: background .5s ease-in-out;
    -moz-transition: background .5s ease-in-out;
    -o-transition: background .5s ease-in-out;
    transition: background .5s ease-in-out;
    -webkit-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
    transition: color .5s ease-in-out;
    }

    /*sub-menu*/
    .topmenu ul li ul.sub-menu, .topmenu ul li ul.children { position:absolute; z-index:888888; margin:0px; padding:5px 0px 20px 0px; width:159px; }
    .sub-menu-bottom{width:159px; height:20px; float:left;}
    .topmenu ul li ul.sub-menu li, .topmenu ul li ul.children li{ float:none; background:url(images/sub-menu_bg1.png) repeat-y;}
    .topmenu ul li ul.sub-menu li a, .topmenu ul li ul.children li a{ display:block; width:133px; background:url(images/sub-menu_border1.png) bottom repeat-x; padding:4px 0px; font-family:Georgia; color:#000; font-style:italic; font-size:12px; height:auto;}

    .topmenu ul li ul.sub-menu li ul.sub-menu, .topmenu ul li ul.children li ul.children{ margin:0px; float:left; position:relative; background:none; padding:0px;}
    .topmenu ul li ul.sub-menu li ul.sub-menu li, .topmenu ul li ul.children li ul.children li{}
    .topmenu ul li ul.sub-menu li ul.sub-menu li a, .topmenu ul li ul.children li ul.children li a{ padding-left:7px; font-size:11px; color:#feafb8;width:128px;}
    /*MENU END*/

    The HTML:

    ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>

    <form role="search" method="get" id="searchform" action="”>
    Search for:
    <input type="text" value="” onclick=”this.value=”;” name=”s” id=”s” />


    • Sorry, here is the html part:

      ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>

      <form role="search" method="get" id="searchform" action="”>
      Search for:
      <input type="text" value="” onclick=”this.value=”;” name=”s” id=”s” />


    • ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>

      <form role="search" method="get" id="searchform" action="”>
      Search for:
      <input type="text" value="” onclick=”this.value=”;” name=”s” id=”s” />


    • Drica can you share your site address? I will have to take a look at your website.


    • Thanks for the reply Towfiq. I think I got it…


    • What did you do to fix it so ppl can learn too?
      Here is my site: http://www.artok.org
      My sub menu moves down when I change the padding but the “submenu-top1.png stays up. how do you nudge this down too?

      /*sub-menu*/
      .topmenu ul li ul.sub-menu, .topmenu ul li ul.children { position:absolute; z-index:888888; margin:0; padding:13px 0px 20px 0px; width:159px; background: url(images/sub-menu_top1.png); background-position: top; background-repeat:no-repeat;}

      Thanks!


    • OK figured it out. put the padding back to 5 as it was originally, then added margin-top:13px; after background position:top

      /*sub-menu*/
      .topmenu ul li ul.sub-menu, .topmenu ul li ul.children { position:absolute; z-index:888888; margin:0; padding:5px 0px 20px 0px; width:159px; background: url(images/sub-menu_top1.png); background-position: top; margin-top:13px; background-repeat:no-repeat;}

      Hope this helps


  • Is it possible to display the HOME link on the menu bar in the header.php?


  • Hey! How can I change this so that it shows the full post instead of the excerpt. Also, Is there any way to alter the code so the slider shows just pictures instead of posts? Even if it’s complex, I can handle it. Thanks


    • 1. Go to Appearance> Editor and select “front-page.php” from right and remove these lines:

                          
                          
                          
                          
                          
                          
                          Link to <?php the_title(); ?>
                      
                          
                          

      and then find this line:

      and replace it with:


    • thank you! front-page was the only place i hadnt looked!


    • Thanks for this. However, after changing to the content, the picture shows above my text as well as in the side picture. Is there a way to fix this? possibly to put it back to the excerpt and then alter the excerpt to show all text but not the picture, so the picture only goes on the side once? Much appreciated!


    • post your site address… let me take a look at problem.


    • Sorry, i figured it out. i just left it as the excerpt and modified the excerpt length from 55 words to 5000 in formatting.php under wp-includes. thanks!


  • Hi, how do I import the stylesheet to the editor for this theme?


    • Go to Appearance> Editor and select “Stylesheet” from right. Its already there…you don’t have to import it..


  • Hi! Thanks for such an amazing theme:) Quick question: How do you remove the underline from hyperlinks in text? I can’t find where this is in the CSS. I’d rather just have the color change, but no underline. What do I need to do?

    Thanks!


    • Go to Appearance> Editor and select “Stylesheet” from right and add this line to your stylesheet:

      .post p a, .postcontent a{text-decoration:none;color:#ffffff}

      the color #ffffff will make the link color to white. Change the #ffffff with your choice of color code: colorpicker.com


    • Hi,

      What if I want to leave the color, but just have the underline removed from the hyperlink? What code do I insert?

      Thanks!


    • just this:

      .post p a, .postcontent a{text-decoration:none;}


    • Thanks so much!!! Worked like a charm:)


    • Hi! I tried to apply the code below to my style sheet to change the link color, but nothing I do seems to make a difference. Any thoughts?

      I applied the following code to remove the link underline, which works:
      .post p a, .postcontent a{text-decoration:none;}

      But when I tried to add this code (and remove the other)
      .post p a, .postcontent a{text-decoration:none;color:#ffffff

      It didn’t change anything:)

      Thanks for your help!


    • You added this in your stylesheet:
      .post p a, .postcontent a{text-decoration:none;}

      and its in full effect!


    • Well, I was able to remove the underline, but now I’m trying to insert the code you originally gave me to change the hyperlink color and it doesn’t work:
      .post p a, .postcontent a{text-decoration:none;color:#ffffff}

      I’m trying to change the hyperlink color now. Any ideas?


    • I just checked your stylesheet and I dont see that line. are you sure you added that line?


    • HI,

      It’s at the end of the stylesheet. I had removed it since it didn’t change the color, but I just added it back- still no link color change.

      I really appreciate your help with this:)


    • You added this to your stylesheet, you forgot to close the bracket:
      .post p a, .postcontent a{text-decoration:none;color:#ffffff

      remove that line and add this:
      .post p a, .postcontent a{text-decoration:none;color:#ffffff}


    • Substituted line, but still no change:(


    • remove that line and try adding this:

      body .post p a, body .postcontent a {
      color: #FFFFFF;
      text-decoration: none;
      }


    • It worked! Thanks so much!

      One more question, what is the HEX # for the Blue color?

      Thank you, thank you, thank you!


    • #02A0B4


  • Hey, I really enjoy your layout. But I have a question. The slider shows 4 pictures, and then it is left blank without recyclying photos. What should I do to have the photos recycled?

    Thanks!


    • Uninstall the share plugin which is putting adding like buttons everywhere.


    • thank you soo much!


  • where can I find the comment form? I would like to change the look a little not just using css but moving things around. I just can’t seem to find where the actual form is.

    Thank you.


    • its in the comments.php file. this is how the comment form is called:

      Editing this would not be easy.


  • How do I upload pictures and have them look porportante in the slider? Right now the post is fine but the slider picture is skewed.


    • Upload this size of image: 450px * 230px

Leave a Reply to JJ Cancel reply

Your email address will not be published. Required fields are marked *

+ Insert website address to ensure quick efficient support
+ To post your code, wrap your code with this <pre lang="LANGUAGE" line="1"></pre>