How to Modify Mystique 3.0+ WordPress Theme

How to Modify Mystique 3.0+ WordPress Theme

In our earlier article we have covered 50 Most Wanted Mystique Theme Modifications, Hacks. Considering the huge demand by our beloved readers for modifications in Mystique 3.0 and the huge response for previous article, here we are publishing Most Wanted Mystique 3.0+ Modifications, Hacks. Customize Mystique theme as per your choice.

Note: If you’re not familiar with coding stuff then there is no necessary to edit single line of code, checkout Modified Mystique ThemeMystiqueRevised.

Code Snippets to Modify Mystique Theme:

Note: To modify Mystique WordPress Theme you have to add following code, Under Appearance -> Mystique  -> CSS or in Advanced tab. We recommend that always install Mystique child theme so you will not loose any modifications when you will update the theme.

1. Adjust position of Site Title Logo:

#site-title {
padding: 25px 0 2px 0;
}

Where 25px is the space above site title and the 2px is the space below site title or site logo.

2. Change Site title color:

#logo a {
color: #E0E0E0;
}

Change value of E0E0E0 if you want another color.

If you want to make site title as per our choice then add following code:

#logo a {
    color: #E0E0E0;
    display: block;
    font-variant: small-caps;
    text-decoration: none;
    text-transform: none;
}

#logo {
    font: bold 395% Verdana,Arial,Helvetica,"Arial Black","Helvetica Black",Gadget,sans-serif;
    letter-spacing: -2px;
}

3. Change the hover color of blog title:

#logo a:hover {
color: #CECECE;
}

Change value of CECECE if you want another color.

4. Increase site title text size:

To increase size of site title text use following code. Adjust value of 350 accordingly.

#logo {
font: bold 350% "Arial Black","Helvetica Black",Gadget,sans-serif;
letter-spacing: -2px;
}
/* Change Appearance of Previous and Next Links */
.post-links a{
background-color: transparent;
border: 0 none;
color: #0071BB;
font-size: 14px;
font-weight: bold;
padding: 2px 4px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
}

.post-links a:hover{
color: #ED1E24;
}

.post-links div{
color: #0071BB;
display: block;
line-height: normal;
max-width: 49%;
}

.post-links .alignright{
text-align: right;
}

6. Adjust space between Navigation bar and content:

.shadow-right {
padding-bottom: 18px;
}

Adjust the value of 18 according to your need.

7. Join navigation bar with main content:

.shadow-right {
padding-bottom: 0;
}

.social-media {
bottom: 10px;
right: 10px;
}

Join Navigation Bar - Mystique Theme Modifications

8. Turn widget titles to lower case:

.block .title h3 {
text-transform: none;
}

9. Change the default font size of text inside post's:

.hentry .post-content {
font-size: 16px;
line-height: 20px;
margin: 0 0 15px;
}

10. Border for each post:

Some people like to add border to each post, here is the code to do that,

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

Border For Each Post

11. Change the black background:

In Mystique theme, default background is black you can change it to other. Here we gave blue as an example. Instead of blue you can use color value as #CECECE or any other value that you want.

body{background-color:blue;}

12. Alternate header image:

To use following header image add given code below image.

/* Alternate header image */
#page{
background:transparent url(../images/extras/header-alternate.jpg) no-repeat center top;
}

If you are using child theme then give full path of the image. For example, as I am using child theme I have added following code,

/* Alternate header image */
#page {
background:transparent url(http://cdn2.techlila.com/wp-content/themes/mystique/images/extras/header-alternate.jpg) no-repeat center top;
}

13. Center the logo picture in the header:

#logo {
width : 100%;
text-align : center !important ;
}

Center Logo

14. Move up the social media icons:

.media {
    bottom: 30px;
    position: absolute;
    right: 2px;
    z-index: 5;
}

Adjust 30px value to whatever you want.

Move Up Social Media Icons

15. Display number of post views:

As Milenko (Theme Developer) told in his forum, Post views are already implemented, but disabled by default because on large sites recording post views (ie. updating the database each time a visitors views a page) can have an impact on performance.
If you want to enable post view count, open the functions.php file from your child theme folder (should be mystique-extend) and add:

define('ATOM_LOG_VIEWS', true);

Then use it wherever you want in the templates, for example in teaser.php (copy the original to your child theme folder) look for following code:

<?php if(atom()->options('post_category') && atom()->post->getTerms('category')): ?>
<?php printf(_a('in %s'), atom()->post->getTerms('category', ', ')); ?>
<?php endif; ?>

then add following code below above code:

| Views <?php echo atom()->post->getViews(); ?>

No of Views

Inside widgets, like the “Posts” widget you can output post views by using the {VIEWS} keyword in templates.

16. Replace pages with categories like in old theme:

atom()->addContextArgs('primary_menu',categoryMenu);

Now you’ll get categories in the menu.

17. Change the spacing of the blog title text:

#logo{
  letter-spacing: 0; /* change this value, default is -6px */
}

18. How to remove the navigation bar from 3.0

#header .shadow-left{
  display: none;
}

The better way, using a child theme: copy header.php to your child theme and remove the code for the navigation

19. Adjust ol,ul:

The list items between ol,ul are cut on the left border. Here is the code to adjust these items

.hentry ol,ul{
  padding-left:15px;
}

20. Add a banner just near the logo:

Logo with Banner

#header {
background: url(http://cdn2.techlila.com/wp-content/themes/mystique/images/YOUR-LOGO-NAME.png);
background-repeat: no-repeat;
background-position:70% 30%;
}

Where 70% is ‘X’ co-ordinate, 30% is ‘Y’ co-ordinate. So just change: background-position:98% 50%;
to adjust banner position

21. Star icon for order-by-views:

Only the order-by-views doesn’t have the star icon. The comment order has it though. So here is the code to add star icon for order-by-views,

.block-tabs .tabs .navi li.nav-posts-views a{background-position: 0 -37px;}

22. Change the […] from excerpts with ‘Read further’:

Use Child theme and add following code in user – defined code.

<?php
add_filter('excerpt_more', 'my_read_more_text');
function my_read_more_text($text){
return sprintf(' <a class="more-link" href="%1$s">%2$s</a>', get_permalink(), 'Read further...');
}

23. Make the sidebars grey (#eee) and the main content white (#fff):

Sidebar Content

.c2right #mask-1,
.c2left #mask-3,
.c3 #mask-2,
.c3left #mask-3,
.c3right #mask-1
  {background: #fff;}

.c2left #mask-1,
.c2right #mask-3,
.c3 #mask-1, .c3 #mask-3,
.c3left #mask-2,
.c3right #mask-3
  {background: #eee;}

24. Fixed custom background image:

#page
{
  background-repeat:no-repeat;
  background-attachment: fixed;
}

25. How to make comments dofollow:

In WordPress Dashboard -> Appearance -> Editor
Open comment.php file (Recommendation: Use Child theme, copy comment.php file from parent theme folder to child theme folder) and replace

atom()->getAuthorAsLink()

with

atom()->getAuthorAsLink('dofollow')

26. Change appearance of “Show More” button:

By default “Show More” button is not easily visible, use following code to make it easily visible.

.no-fx .block a.more, .block .fadeThis a.more {
    -moz-border-radius: 5px 5px 5px 5px;
    background: none repeat scroll 0 0 #0997e1;
}

If you want color other than blue then change value #0997e1 to whatever you want.

27. Change appearance of image which shows number of comments on homepage:

Modified Comments Image Mystique

First, download and add icons.png image file to your Mystique Image folder (themes/mystique/images/).

.hentry .comments {
position: absolute;
right: 1px;
top: 5px;
z-index: 5;
background: url("YOUR SITE URL HERE/wp-content/themes/mystique/images/icons.png") no-repeat scroll 0 -505px transparent;
width: 48px;
height: 38px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: #999 0px -1px -1px;
line-height: 34px;
font-size: 150%;
ont-weight: bold;
}

.hentry a.comments:hover {
background-position: 0px -543px;
color: #fff;
text-shadow: #000 0px -1px -1px;
}

Don’t forget to change “YOUR SITE URL HERE” text to your actual site URL.

28. Add transparent borders to tables:

table,table td,table th,table tr.even td,table tr:hover td{border:0;background-color:transparent;}

29. Reduce the size of every post heading:

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

Original value is 300%, adjust value according to your need.

30. For single posts in order to display images without covering the sidebar:

img {
max-width: 468px;
max-height: 560px;
}

Adjust max-width to your preference for anyone wanted.

31. Move tagline underneath the title:

#logo{
  float:none;
}

#site-title .headline{
 float:none;
 border:0;
 margin:20px 0;
 padding:0;
}

32. How to add Google +1 Button in Mystique 3.0+ Navigation Bar:

Under WordPress Dashboard -> Appearance -> Editor
In the Templates Column look for “footer.php” file.
In footer.php file search for tag and add following code before body tag:

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Then under WordPress Dashboard -> Appearance -> Mystique settings
In the Advanced tab -> “User-defined code“.

<?php
// for custom menus
add_filter('wp_nav_menu_items', 'add_google_plus_button_to_menus');

// for the default page menu
add_filter('wp_list_pages', 'add_google_plus_button_to_menus');

function add_google_plus_button_to_menus($items){

// append it to the nav menu
return $items.'<li style="float: right; margin-left: 111px; padding-top: 6px;">
<div class="g-plusone"><g:plusone annotation="inline"></g:plusone></div>
</li>';
}

Google Plus Button Mystique Nav

Now you'll see Google+ button on your Mystique navbar. You can repeat same procedure to add Facebook Like button.

33. How to add Search in Mystique 3.0+ Navigation Bar:

under WordPress Dashboard -> Appearance -> Mystique settings
In the Advanced tab -> “User-defined code“.

<?php

// for custom menus
add_filter('wp_nav_menu_items', 'add_search_to_menus');

// for the default page menu
add_filter('wp_list_pages', 'add_search_to_menus');

function add_search_to_menus($items){

// capture the search template
ob_start();
atom()->template('searchform');
$search = ob_get_clean();

// append it to the nav menu
return $items.'<li class="nav-search">'.$search.'</li>';
}

And add following code in Mystique settings -> CSS tab

/* increases top/bottom padding on nav items, so it fits the theme-default search form */
.nav-main a{
padding:12px 15px 14px;
}

/* position and width of the form: top-right */
.nav-main li.nav-search{
position:absolute;
background: none;
border: 0;
width: 250px; /* <- width of the search form, can be changed */
height: 34px;
right:10px;
top:5px;
}

/* no padding on this nav menu item */
.nav-main li.nav-search a{
padding: 0;
}

.nav-main li.nav-search li:hover a{
background-color: transparent;
}

.media {
bottom: 35px;
position: absolute;
right: 2px;
z-index: 5;
}

Search in Mystique Navigation Bar

34. How to Change Home Page Style:

If you want to change home page appearance and want to show only post thumbnail and title of post then create a new file and give name teaser.php to the file in your child theme folder, add following code inside teaser.php:

<article id="post-<?php the_ID(); ?>" <?php post_class('thumb-only'); ?>>
<a class="post-thumb" href="<?php atom()->post->URL(); ?>">
<?php atom()->post->thumbnail(); ?>
</a>

<section>
<header><a href="<?php atom()->post->URL(); ?>"><?php atom()->post->title(); ?></a></header>
<p><strong><?php atom()->post->terms('category'); ?></strong></p>
<footer><?php atom()->post->date(); ?></footer>
</section>
</article>

Then in Mystique settings -> CSS tab add following code:

article a img{
  border: 1px solid #fff;
  box-shadow: 0 0 5px 1px #888;
}

article section{
  text-align:right;
}

article section header{
  font-size: 130%;
}

35. How to Add Breadcrumbs:

We recommend you to add Breadcrumbs to your Mystique Theme. It is a very good addition to the design because of usability and it also provides SEO benefits because it links to the path hence increasing bot activity in page indexing. Breadcrumbs provide a way to easily navigate through site, from post, to category, to the next post, or from child page, to parent page etc.

First you need to download the Rdfa Breadcrumb plugin upload and activate it as usual. If you’re using WordPress SEO by Yoast then method is given below to add breadcrumbs using WordPress SEO.

Note: Activate Mystique Child Theme (Mystique-Extend), then under WordPress Dashboard -> Appearance -> Mystique settings -> Advanced, look for User-defined code and add following code:

echo '<div style="font-size: 13px; line-height: 18px; margin: 1px 0; padding: 2px 0;">';
       atom()->add('before_primary', function(){
          if(function_exists('rdfa_breadcrumb')){ rdfa_breadcrumb(); }
       });
echo '</div>';

If you’ve enabled breadcrumbs option (WordPress Dashboard -> SEO -> Internal Links) in WordPress SEO by Yoast then instead of adding above code add following code in Advanced-> “User-defined code”.

echo '<div style="font-size: 13px; line-height: 18px; margin: 1px 0; padding: 2px 0;">';
       atom()->add('before_primary', function(){
          if ( function_exists('yoast_breadcrumb') ) {
             yoast_breadcrumb('<p id="breadcrumbs">','</p>');
          }
       });
echo '</div>';

After adding above code you will see Breadcrumb on your post as follows:

Breadcrumbs For Mystique WordPress Theme

After adding breadcrumbs, in search engine result pages (SERP) your site results will look like this.

Breadcrumbs in SERP

Note: It'll take around 12 hours to 2 days to show breadcrumbs for all pages depending upon how search engine bots crawl your site. You can check your site breadcrumbs in Rich Snippet Tool.

One more thing, previous and next post link are useful when links are after the post instead of above post title, so look for code

<?php if(atom()->options('single_links')): ?>
            <div class="post-links clear-block">
              <div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
              <div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
            </div>
<?php endif; ?>

Cut the code and paste after following line:

 <?php atom()->action('after_primary'); ?>

If you want to modify appearance of previous and next post link then checkout fifth code snippet.

36. How to Make the Caption Text Larger:

If you want to change font size of caption text then add following code in Mystique settings -> CSS tab

.wp-caption-text {
   font-size: 13px;
}

In future, we will do many modifications in Mystique theme so we'll keep this topic updated. If you have some suggestions or problems about code snippets provided here then share it with us in form comment below, we'll try to solve your problems.

Reference: Digitalnature Forum, thanks to Milenko.

If you like these Mystique Theme Modifications please retweet and share it with your friends on Facebook, and on Google+.

Comments

  1. Sarah J says

    I’ve read the entire post including all the comments and responses. But I don’t think this question was asked: I’ve changed the theme background to a darker color (#000)… how to I change the body font color to a lighter color (#fff)?

  2. HARRY says

    nice mods..but i would like to know how to add html banner near the logo…i would like to add 728by90 adsense code

    thanks…

  3. Peter says

    Hi, I want to change the post titles to show first instead of the site description…If you look at my site and click a post the meta reads pmf.me.uk >> then the post title…I want to swap it to show the other way round..I have done this many times with other themes by just editing the header.php but no matter what code I swap around this theme just won’t have it.. Any help appreciated.
    Peter recently posted – Free WordPress.Org Web HostingMy Profile

  4. Sameer says

    Hi,

    Wow you did an amazing job, helped me a lot to design my new website.

    The only thing I want to is that how can I remove the space between the logo and the navigation bar? I want my logo to be right above the navigation bar.

    Thanks again for your impressive article.

  5. says

    mystique, seems a great theme. however…
    I would like a search form in my navbar

    I have tried every which way but loose, but cannot get it to work (feel like putting an axe through the computer screen
    I’m using the latest mystique theme
    have you a step by step guide that definitely works

    here’s, hoping

  6. Elisa says

    Great tips! I can’t seem to find out how to make the top menu in Mystique have drop downs or sub-menus…Please help!

    • says

      never mind I sorted it. Even after I copied and pasted the code into functions.php

      define(‘ATOM_LOG_VIEWS’, true);

      I actually had to DELETE the word false which was further down in the code.

      define(‘ATOM_LOG_VIEWS’, false);

      It was over riding my copy and paste statement
      Matthew Guddat recently posted – The End of TimeMy Profile

  7. Jaidev says

    Hi, I would like to know how to remove Date/Time from comments. For eg. it shows
    (No. of days or time) besides ever comment…I want to remove it.

  8. says

    Hi, I am using your R3 theme

    Now I have a problem with comments on an article.
    When is working ok, the comments appear at the end of the article normally, and can see all…in some posts i have 90 comments…
    After update to 3.6, I must click on comments to see those, and then the screen shows a limited number of comments and I cannot scroll the page up and down because they’re occuping all the page.

    I searh solutions and I see that changing the absolute to relative solves this problem, but I don’t kwow how to do it
    the line I need to change:

  9. says

    I’ve read through this article several times. I hope I didn’t miss what I’m about to ask.

    On my blog, I’m having trouble adjusting the width of the entire text box, so all of my columns are smashed together in the center. I currently I have 3 columns and would like to keep them. Do you have any advice?

    Thank you,
    Allison

  10. says

    I’m using Mystique R3.1 and use photo gallery. Photos wil apear bus problem is that the auto-cycle don’t work. I use the Nextgen gallery. How can I solve this?
    Thanks!

  11. saurabh singh says

    Hi Rajesh,

    Actully I need to a menu bar which contain sub menu but when cursor occur on the menu that time sub menu full or equal to contain width main menu, for example you can see the HealthKart.com or FlipKart.com web site. I hope you understand my question. Give me reply. itspl.saurabh@gmail.com

  12. Dave says

    Hi there,

    I downloaded the Modified Mystique/MystiqueRevisited theme to try it out. After I installed and activated the theme, it gave me an error code:

    Fatal error: Call-time pass-by-reference has been removed in /home/mysite/public_html/wp-content/themes/MystiqueR3/core/AtomAdmin.php on line 714

    Any suggestions?

 Comment Policy

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.


Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!

CommentLuv badge