50 Most Wanted Mystique Theme Modifications, Hacks – Version 2.4.3

Update:

This tutorial was written for the Mystique WordPress theme up to 2.4.3 and since version 3.0 the themes code has change that much that these tutorials no longer work. For new modifications, hacks read this article, How to modify Mystique 3.0+ WordPress Theme.

Mystique is a free WordPress theme that attempts to top commercial templates in terms of design and functionality. In our earlier articles, we showed a way for users to add social icons to Mystique Nav bar. In this article, we will share with you a way by which you can modify various fields in Mystique theme. Customize each and every part of Mystique WordPress theme using this guide.

If you don’t like to edit code, then download Modified Mystique Theme – MystiqueRevised.

User CSS Code:

Note: Add following code to, Under Appearance -> Mystique settings -> User CSS.

1. Adjust the Position of Site Title/Site Logo

/*** LOGO/Site_Title and Navbar***/
#site-title {padding:35px 0 10px 0;}

Where 35px is the space above site title and the 10px is the space below site title or site logo.

2. Adjust Page Width

For some reason you want to change your default 960 (Grid System) page width to custom width then do following steps: First Under Appearance -> Mystique settings -> Design -> select Fluid (100%)/Custom option then add following code in User CSS.

/* Page Width */
body.fluid .page-content{
 max-width: 1060px;
}

Change value of 1060 accordingly and if you want to change sidebar size then Design -> Use column sizes option.

3. Set a Custom Featured Post Width and Height

If you adjust page width other than 960 (Grid System) then you have to adjust featured post width. You can also adjust featured post height using following code snippet. Change value of 174, 1060 accordingly.

/* Custom featured page width and height*/
#featured-content .slide-container, #featured-content ul.slides li.slide{ height:174px;
width:1060px;
}

4. Hide Tagline from Homepage

If you want to hide tagline from homepage but it should be display at browser page and so on.

/* Hide tag line from homepage */
#header .headline{ display: none; !important}

5. Change Site Title Color

/* Change Site title color */
#site-title #logo a{
color:#FFFFFF;
}

Default colour is White. Change value of FFFFFF if you want another color.

6. Change Site Tag Line Color

/* Change Site tag line color */
#site-title p.headline{
color:#C2DC15;
}

Default colour is Green. Change value of C2DC15 if you want another color.

7. Change the Hover Color of Blog Title

/* The hover colour of blog title */
#site-title #logo a:hover{color:#ed1e24;}

Default colour is Red. Change value of ed1e24 if you want another color.

8. Join Navigation Bar with Main Content

/* Join navigation with main content */
.header-wrapper .shadow-right{padding-bottom:0;}

9. Black Navigation Style

/* Black navigation */
ul.navigation{background-position:left -464px;background-color:#000;}

ul.navigation li{background-position:right bottom;}

ul.navigation li a{text-shadow:none;color:#b3b3b3;}

ul.navigation li.active a, ul.navigation li.current_page_item a,ul.navigation li.current_page_parent a,ul.navigation li.current_page_ancestor a, ul.navigation li.current-cat a,ul.navigation li.current-cat-parent a,ul.navigation li.current-cat-ancestor a{background-position:left -164px;color:#fff;}

ul.navigation li a:hover,ul.navigation li:hover a,ul.navigation li a.fadeThis span.hover{background-color:rgba(255,255,255,0.1);}

ul.navigation li:hover li a{background-color:transparent;}

ul.navigation li li a:hover,ul.navigation li li a.fadeThis span.hover{background-color:#ed1e24 !important;}

ul.navigation li.active a span.pointer, ul.navigation li.current_page_item a span.pointer,ul.navigation li.current_page_parent a span.pointer,ul.navigation li.current_page_ancestor a span.pointer, ul.navigation li.current-cat a span.pointer,ul.navigation li.current-cat-parent a span.pointer,ul.navigation li.current-cat-ancestor a span.pointer
{background-position:center bottom;}

ul.navigation ul{background-color:rgba(0,0,0,0.66);border-color:#000;}

ul.navigation li.active ul, ul.navigation li.current_page_item ul,ul.navigation li.current_page_parent ul,ul.navigation li.current_page_ancestor ul, ul.navigation li.current-cat ul,ul.navigation li.current-cat-parent ul,ul.navigation li.current-cat-ancestor ul
{background-color:#656565;border-color:#656565;}

ul.navigation ul ul{border-top:1px solid rgba(255,255,255,0.5);}

Custom Colors for the Navigation Bar

/* Custom colors for the navigation bar */
ul.navigation li a:hover,ul.navigation li:hover a{background-color:#fc0;}
ul.navigation li.active a:hover, ul#navigation li.active:hover a{ background-color:#a6c61c;}

ul.navigation li.active a span.pointer, ul.navigation li.current_page_item a span.pointer, ul.navigation li.current_page_parent a span.pointer, ul.navigation li.current_page_ancestor a span.pointer{ display: none; }

ul.navigation li a.fadeThis span.hover{ background-color: #fc0; }

ul.navigation li.active a, ul.navigation li.current_page_item a, ul.navigation li.current_page_parent a, ul.navigation li.current_page_ancestor a{ background:#a6c61c; color:#fff; text-shadow:rgba(0,0,0,0.5) 1px 1px 1px; }

ul.navigation{ background:#c4db63 url(images/nav.png) repeat-x left top; }
ul.navigation li a{ text-shadow:rgba(0,0,0,0.5) 1px 1px 1px; color: #fff; }<strong></strong>

10. Decrease Site Title Text Size

To decrease size of site title text use following code. Adjust value of 300 accordingly.

/* Decrease site title text size */
#site-title #logo{font-size:300%;}

11. Change Size of Header

/* Change font size of header */
h1.title{font-weight: bold;font-size: 180%;margin:0 0 .2em 0;padding:.2em 0 0 0;text-shadow: #fff 1px 1px 1px;}

Adjust value of 180 accordingly.

12. Turn Widget Titles to Lower Case

In Mystique theme all widget titles are in uppercase. To change this use following code.

/* turn widget titles to lower case */
.block h3.title{text-transform:none;}

13. Border for Each Post

/*border for each post */
.post{
    border:2px solid;
    margin:0 0 40px;
    padding:15px;
    text-align:justify;
}

14. Change the Default Font Size of Text Inside Post’s

/* Custom font size inside post */
div.post-content{ font-size: 120%; }

15. Change the black background:

In Mystique theme, default background is black you can change it to other. Here we gave blue as an example.

/* Change black background */
body{background-color:blue;}

16. Change Background Color with Upper and Lower Color:

/* Change background colour with upper and lower colour */

body{
   background-color: white;
}

#page{
   background: #000; /* for non-css3 browsers or Opera */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#CCCCCC'); /* for IE 6 & 7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#CCCCCC')"; /* for IE 8 */
   background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0))); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #000, rgba(0,0,0,0));} /* For gecko FF3+ */
}

17. Permanent Page Controls

To make the increase or decrease text size control button (Page Control Button) in the top right to permanently stay visible instead of having to mouse-over add following code. Some people want this great feature to be highly visible and not hidden like it is.

/*Permanent Page Controls */
#pageControls a{ display: block !important; }

18. Remove Page Controls Permanently

/* Remove page controls */
#pageControls{
    height:100px;
    position:absolute;
    right:0;
    top:0;
    width:0;
    z-index:4;

19. Alternate Header Image

To use following header image add given code below image.

/* Alternate header image */
#page{background-image:url(http://localhost/wp-content/themes/mystique/images/_alt/header2.jpg);}

Replace localhost by your site URL.

20. Move Up the RSS Feed and Twitter Buttons

By default we found Twitter and RSS buttons are hidden by the navigation bar and are hard to see and are not easily accessible to readers, so move them up for user friendliness.

/* Move up Twitter and RSS buttons */
#header a.nav-extra{
   height:64px;
}

#header p.nav-extra{
   top:-60px;
}

21. Hide RSS Button in Navigation Bar

/* Hide RSS button */
#header a.rss{display:none;}

22. Hide Twitter Button in Navigation Bar

/* Hide Twitter button */
#header a.twitter{display:none;}

23. Hide Post Information Bar

In your homepage if you want to hide post information like Date, Posted by, Category, comment then use following code.

/* Hide post information bar */
.post-date, .post-info{display:none;}

24. Always Show “REPLY | QUOTE | EDIT” in Comments

By default “REPLY | QUOTE | EDIT” will be shown when you hover mouse over them. To show them permanently use following code.

/* Always show “REPLY | QUOTE | EDIT” in comments */
#comments .controls{
   opacity : 1 !important;
   position: absolute;
   display: block !important;
   top: -3px !important;
}

25. Change Footer Background Color to Light Gray

/* Change footer background color to light gray */
#footer{background:#ddd;}
#footer-blocks .leftFade,#footer-blocks .rightFade{background-image:none;}

If you want other color then change value of #ddd, we are using #eeeeee value.

26. Change Footer Background Color to Dark Gray

/* Dark background footer */
#footer{background:#666;color:#ddd;}
#footer a{color:#fff;}
#footer-blocks .leftFade,#footer-blocks .rightFade{background-image:none;}

27. Get Your Uploaded Background to Repeat

If you have uploaded custom background image and you want to repeat it then use following code.

body{background-repeat: repeat;}

(or repeat-x, repeat-y)

28. Adjust the Space Between Line and Paragraphs

/* Adjust space between line and paragraphs */
.post-content p{
   margin: 0 0 1.2em 0;
   line-height: 150%;
}

First property: Spacing between paragraphs (top/right/bottom/left).
Second property: Spacing between lines. Adjust values accordingly.

29. Decrease the Gap between Widgets

Some people don’t like the large gap between the the widgets. So here is the code to adjust the gap.

/* Decrease space between Widgets */
li.block{list-style-type:none;padding:0;margin:0;}
li.block, .arbitrary-block{margin:1em 0 1.2em;position:relative;}

Adjust the value of 1.2 accordingly.

30. Hide or Remove the Page Title

If you want to hide or remove post title on a single post page then add following code.

h1.title{font-size:0%;}

31. Modify Appearance of Tags like ATOM Theme/Framework

/* Modify appearance of tags */
.post-tags a{
 -moz-border-radius: 10px 10px 10px 10px;
 border: 1px solid #EEEEEE;
 color: #AAAAAA;
 margin-bottom: 2px;
 padding: 1px 5px 2px;
 text-decoration : none;
}

.post-tags a:hover{
 background : #666666;
 border: 1px solid #666666;
 padding: 1px 5px 2px;
 color : #ffffff;
 -moz-border-radius: 10px 10px 10px 10px;
 text-decoration : none;
}

32. Turn Navigation Titles to Lower Case

In Mystique theme all navigation titles are in upper case. To change this use following code.

ul.navigation li  a{text-transform:none !important; font-size:115%;}

Also you can adjust font size of navigation titles. Change value of 115% accordingly.

33. Modify Appearance of Next and Previous Links

You can modify appearance of next and previous links so it will be easily visible and attractive.

/* Change Previous and Next Links */
.single-navigation a{
   border: 1px solid #EEEEEE;
   color: #d96109;
   margin-bottom: 2px;
   padding: 1px 5px 2px;
   text-decoration : none;
}

.single-navigation a:hover{
   background : #666666;
   border: 1px solid #666666;
   padding: 1px 5px 2px;
   color : #ffffff;
   text-decoration : none;
}

34. Remove the Tags

Use following code to hide the tags.

/* Hide Tags */
div .post-tags{
  display:none;
}

35. Hide Post Information Bar

Add following code to hide post information bar.

/* Hide post information bar */
.post-date, .post-info{display:none;}

36. Text-Justify on Post and Page Content

If you want to justify the text and page content add the following code:

/* Text-Justify post and page content */
.post-content{text-align:justify;}

37. Fixed Custom Background Image

To fix custom background image add following code:

/* Fixed custom background image */
body{background-attachment:fixed;}

38. Increase Font Size Inside Pages

You can increase font size of pages using following code:

body p{
 font-size:15px;
}

Other Useful Code Snippet for Mystique Theme

1. Place the Description Directly below the Blog Title

Under Appearance -> Look in your style.css find

#site-title p.headline{float:left;border-left:1px solid  #999;margin:0 0 0 1em;padding:.2em 0 .2em  .8em;font-weight:normal;font-size:140%;line-height:64px;letter-spacing:0.4em;}

Delete:-   border-left:1px solid #999;
Add:-       clear:left;
Change:-  margin:0 0 0 0em;
Change:-  line-height:44px;
Change:-  padding:.2em 0 .2em .1em;

Adjust the numbers as you like.

2. Add Favicon to your Blog/Site:

For those who don’t know what is Favicon, “Favicon is a small icon (image) displayed at the beginning of the address bar of the browser. It is also called Favourite Icon, Page icon and url icon.” Most of the people use 16*16 pixel favicon(you can also use 32*32 pixel favicon) with “.ico” format. But, you can also use gif,png (image formats) as well.

The main advantage of creating and using favicon is, it makes it easy to find your blog or site when someone favourites or bookmarked your site/blog among several other sites.

Under Appearance -> Look in your header.php, find

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

and change it into

<link rel="shortcut icon" href="Your Favicon File URL HERE" />

Don’t forget to replace, .ico and .gif file urls. Visit www.iconj.com for free 18000+ animated favicons, online icon generator, favicon hosting and more.

3. Get images in a post to open in lightbox, like this:

Lightbox is default feature provided in Mystique theme. The lightbox will open any link that ends in .jpg, .png or .gif (it will asume it’s a image). So just make the images from the posts links. eg. thumbnails that link to the full size image.

4. To put a link in the top navigation bar, add following code to, Under Appearance -> Mystique settings -> Advanced > User functions.

<?php 
  function mymenu() {  
     echo '<li><a href="Link to Your Menu" rel="nofollow">Menu Title</a></li>'; 
  }
  add_action('mystique_navigation', 'mymenu'); 
?>

It is useful when you want to put a external link in navigation bar. Change “Link to your Menu” by your link and “Menu Title” by your title.

5. Make the Background Transparent

Under Appearance -> Look in your style.css, find

/*** MAIN LAYOUT ***/
.shadow-left{background:url(images/shadow.png) no-repeat left bottom;}
.shadow-right{background:url(images/shadow.png) no-repeat right bottom;padding-bottom:0px;position:relative;}
#main{background:#fff url(images/main-right.jpg) no-repeat right top;}
#main-inside{background:transparent url(images/main-left.jpg) no-repeat left top;min-height:380px;}

and change it into

/*** MAIN LAYOUT ***/
.shadow-left{background:url(images/shadow.png) no-repeat left bottom;}
.shadow-right{background:url(images/shadow.png) no-repeat right bottom;padding-bottom:0px;position:relative;}
#main{background:transparent;}
#main-inside{background:transparent;min-height:380px;}

6. Remove the Space between the Top Navigation Bar and the Actual Content

There is some space between the top navigation bar and the actual content. If you want to remove this space or you can join the content and the nav bar together. Under Appearance -> Look in your style.css, find

/*** MAIN LAYOUT ***/
.shadow-left{background:url(images/shadow.png) no-repeat left bottom;}
.shadow-right{background:url(images/shadow.png) no-repeat right bottom;padding-bottom:10px;position:relative;}

Change 10px to 0px if you want join the content and the nav bar together Or change it accordingly.

7. Another Way to Decrease the Font Size of Posts Title

Under Appearance -> Look in your single.php, find

<h1 class="title"><?php the_title(); ?></h1><?php endif; ?>

Change h1 to h2, h3 as per your choice.

8. Another Way to Adjust the Position of Site Title/Site Logo

In Appearance -> Editor -> Open Stylesheet (style.css), find:

/*** LOGO/Site_Title and Navbar***/
#site-title{padding:4em 0 3.7em 0;}

By adjusting value of 4em and 3.7em you can adjust header logo position. 4 em is space above site title and 3.7em is space between site title and Navigation bar.

9. Another Way get More Space Between the Lines

In Appearance -> Editor -> Open Stylesheet (style.css), find:

p{margin:.6em 0 .3em;line-height:150%;}

By default value is 150%. You can change it to higher value as you need.

10. Include More Text in Feature Content Bar

If you have increase the width of feature content bar then you want to include more text in feature content bar. To do this you require FTP client, then under wp-content -> themes -> mystique -> extensions -> featured-posts -> featured-posts.php, find:

echo '<div class="summary">'.mystique_strip_string(420, strip_tags(strip_shortcodes($featured_post['post_content']))).'</div>';

Change the 420 to however many characters you wish to have in your featured post.

11. How to add “Go to Top” button

There are two ways to add this feature: Modifying header.php and by using plugins.

Modifying Header (header.php)

Under WordPress Dashboard -> Appearance -> Editor -> header.php, Look for

< ?php wp_head(); ?>

Below this line add following code:

<style type="text/css">
a.go-top{display: none;position:fixed;right:10px;bottom:10px;cursor: pointer;z-index: 99;padding: 5px 10px;background: #eee;text-decoration: none;}a.go-top:hover{background: #333;color: #fff;}
</style>
<script type="text/javascript" >
jQuery().ready(function(){
     jQuery( window ).bind("scroll",function(){
       if(jQuery(window).scrollTop() > 170){
            jQuery(".go-top").show();
	}
       else
           jQuery(".go-top").hide();
     });
  });
  </script>

Then exactly after two lines i.e. after

add following code:

<a href="#page" id="goTop" class="go-top">Go to Top</a>

Now, in your site you will see “Go to Top” button that appears in the bottom right corner of your screen that allows user to smoothly scroll up.

Just scroll a little bit and you will see a “Go to Top” button appearing at the bottom of your page.

Using Plugins

If you want to add “Go to Top” button without modifying your template files then try any one of following plugin.

1) Scroll to Top Plugin

Scroll to top plugin will add a button that hovers in the bottom right corner of your screen that allow users to smoothly scroll up your page. Download and install Scroll to Top Plugin.

2) WP To Top

This plugin will add a “Back to top” link automatically to your blog. Download and install WP To Top.

3) Go To Top

Add a “Go to Top” link to your posts. This is a WordPress plugin which based on jQuery, jQuery Easing and Scroll to Top v3. Download and install Go to Top Plugin.

12. How to add +1 Google Button to Mystique Navigation Bar

One of the latest and splendid innovative idea of Google is the Google Webmaster’s +1 Button which is to let your visitors or friends recommend your article for better visibility in search engines. Recently Google has changed their algorithm and emphasized on what people like and share.

We highly recommend every blog/website owners to add the Google’s +1 Button on their sites. Here we are sharing a way for adding +1 Google button to Mystique navigation bar.

1. The Snippet of Code is available at:- http://www.google.com/webmasters/+1/button/
2. Under WordPress Dashboard -> Appearance -> Editor. In the Templates Column look for “footer.php” file. In footer.php file search for </body> tag and add following code before body tag:

   <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

   then

3. Under WordPress Dashboard -> Appearance -> Mystique Settings -> Advanced. Scroll down to User functions then add following code:

                   <?php  
                     add_action('mystique_navigation', 'googleplus');
                     function googleplus(){
                       echo '&nbsp &nbsp &nbsp &nbsp <g:plusone></g:plusone>';
                     }
                   ?>
               

That’s all you need to do and the +1 Google Button will appear on your website/blog.

We hoped that you enjoyed this long and resourceful article. If you like it please retweet and share it with your friends on Facebook, Twitter, Google+.