CSS jQuery Misc

My Mystique Theme Modifications

Mystique is one of the top most free theme used for wordpress. It is bundled with many inbuilt features but still people like me are looking for Mystique Theme Modifications to suit there needs.

So here i am listing few Mystique Theme Modifications i made to this theme.
lets take a look at all of them one by one. I am listing only those changes that i have implemented in my blog, any changes can be made to it. If you are looking for any modifications then post a comment and i will try to solve your problem.

1) Mystique theme navigation menu mousehover effect

Add below javascript lines to header.php file in
Admin -> Appearance -> Editor and select header.php from right panel. and add below javascript.

But before that make sure that jquery.js in included and you are adding this code after than.

This will add on mouse-hover background change effect to Mystique theme navigation menu.

Mystique-nav-menu-mousehover-background-change

Mystique-nav-menu-mousehover-background-change

2) Change post tags style on Mystique theme index page

3) Mystique theme change text selection color

By default text selection color used by browsers is #0A246A (Navy)
we can change this by adding some CSS hacks.

4) Next and prev post name link

5) Add Facebook Like button to top navigarion bar

One of the user (Johan Svensson) of this blog asked me about this and i really found his modification useful so i have implemented this on this blog and also want to share this modification with you.

Go to Admin Panel -> Appearance -> Advanced
and scroll down to “User functions” section and put below code

6) Mystique wordpress theme language translation

You can translate Mystique theme to spanish or any other language. Tale a look at below urls.
Mystique theme for WordPress in Spanish – Geektual
Translating a WordPress theme « Digital Nature

180 Comments

  • I seen this article before some days in [Blocked]
    and I am using that tips. You are using same concept. 👿

    • Thanks for pointing this out 😀 , and sorry to say that you have not gone through any of the articles properly. because changes i have suggested are not listed on that blog, i have taken care of that. and talking about “using same concept” there are already “About 1,39,000 results” for “mystique theme modifications”.

  • OK My mistake :d
    Why you removed my link … and also you change my email address. Either delete my comment or show as I written.

  • I was wondering if you know a way to make it so that it doesn’t say the number of comments on the header of a post, but instead just says “view comments” or something similar. I use an add-on that allows facebook comments that don’t add to the total, and I think it just looks tacky the way it is.

    • just add below javascript in footer.php, this will solve your problem

      <script language=”JavaScript”>
      jQuery(document).ready(function() {
      jQuery(“p[class=’comments alignright’] a”).each(function(i){
      jQuery(this).text(“view comments”);
      });
      });
      </script>

  • Please help… I took same theme, but can’t find how to fix Navigation Tweeter icon on the header of the page to go on my page, not on default wordpress tweeter page… My brain will explode… 🙂 Thank you…

  • Hello there Amit,

    I have a question about Mystique theme that I’ve been trying to solve for a few hours now but I can’t seem to find out how… I’m trying to make the “home” button in the navigation bar to say something different like “news”! I don’t mind the picture it has on the side, in fact I like it there, I just want to change the word!
    Can you make any suggestions as to how to do that? Also, is it possible for the button to link to the homepage of my website instead of the homepage of my blog? (I installed wordpress on a subpage of my website)

    Thanks a lot for any input!

    • @Shandy : Go to admin panel -> appearance- >editor and open core.php, go to line number 318 and
      replace <?php echo get_settings(‘home’); ?> with “www.yourpageaddress.com” and
      replace <?php _e(‘Home’,’mystique’);?> with <?php _e('News !','mystique');

      repeat the process for line number 320. this should work…i havent tried it on my blog, so if it doesnt work let me know.
      Note : Before making changes, take a backup of core.php and then only edit the code.

  • 1) Mystique navigation menu mousehover effect
    What is “jquery.js” , how can i confirm that “jquery.js” is included ? How can I adding code , Is just adding the highlight words ??

    All the code have highlight words, Is copy all and adding it or just add highlight words ???

    thanks……

    • jquery.ja is javascript framework, for javascript programming (http://jquery.com/). if u want to check if jquery is included in ur page goto view source and find “jquery” if u find something then it means its included in ur page or simply post ur blog url here and i will tell u if its included or not.

  • Hi.
    I’ve just updated my site to use the mystique theme, which runs perfectly in another blog I have, and I have this problem:
    -> The RSS/Twitter buttons don’t move on mouseover, the Page Controls don’t appear where they should be and the widgets at the bottom of the page aren’t shown unless I use only one. Even when in the options page, the scroller which controls the sidebars width isn’t there, so I can’t change anything.
    I guess it is something connected with JQuery or JS, but I don’t know how to solve it.
    Could you, please, help me.
    Thanks.

    • can u please post ur blog url here and i will have a look at it or disable all the plugins and see if it works for u.

    • If you have firebug then please check if there is any javascript error. if not then please send me your blog link and i will solve your problem.

    • Solution that i have provided will not work for your blog…because its not “Mystique” theme, you are using some diff theme/ custom theme. well no problem i will take a look at it and will see if i can find any workaround for you.

  • Hello,
    this is a nice tutorial, and I have a question..?
    how do i change default sidebar without changing nice top jquery navigation, i want to add more widgets, 🙁

  • I would like to change total language of my website. like heading, Menu, catagory and all. I hv been able to change some languages . But my heading, menu & some other are being in English. I want to set up in Bangla language. Can you plz help me for doing it?

  • Hi,
    I,ve a problem with mystique.
    Images: When I open an image as a lightbox I can only refresh the browser to close it.
    The same proble happens when I try to upload image from front-end-editor (do you know?). I can only refresh the browser and image doesn,t show but it,s uploaded.

    Thanks a lot

  • I am unable to change the company name in the footer.php. When I go to themes/editor and click on footer.php the placeholder name that’s in the footer now is not in the html of footer.php. please advise how to fix this.

  • How do I disable commenting on pages?
    I looked in the page file and comments file… totally a beginner with coding stuff…

  • Hey Amit,
    I have 2 problems.

    1) How to remove the hover feature on the navigation bar? i mean, i dont want the mouse to show ‘home’ when i put my mouse point on Home on my navigation bar. I want to remove it for all the things on my navigation bar.
    2) How did u put a “Notify me of followup comments via e-mail.” thing? Which plugin should i use?

    My site address is http://www.vidhyaashram.com
    THANKS in advance.

    • 1) Praveen please read reply to “Shandy” that would help u.
      2) I m using “Subscribe to Comments Reloaded”

      • i have read it. but it shows only the way to change the mouseover for the home navigation. i want to change the mouseover for the other ones like the way u removed the mouseover for ur contact page.

        • I have added contact us page from Admin->Appearance->Mys settings->Advanced->user functions and then custom function
          <?php
          function mymenu(){
          echo 'Contact
          ‘;
          }
          add_action(‘mystique_navigation’, ‘mymenu’);
          ?>

  • Hello, Amit. Nice tutoring you got here, but can I ask you some question? I got this problem with the header . My website is 90% nearly finish but I’m having this problem with hover mouseover thing. I use Photoshop to create my own logo and using Dreamweaver to make a mouseover on my logo, but the thing is how can I put this hover logo in to this theme website? I’m not good with the coding, but I hope you can help me. Pleaseee. Thank you 😀

  • Hello sir, thanx for such a great post but i am having a problem with my website. i am not getting mouse over effect in navigation menu and social networking icons. can you please help me with that?
    Here is my website http://fluper.com

  • I tried to add the Google +1 like the LIKE from Facebook (see Mod. 5).

    Guess I made a mistake because now the website is completely down including admin panel. Had to rename the theme folder.

    Could someone please tell me in which file I find the code added here: Admin Panel -> Appearance -> Advanced
    so I can remove it and use this cool theme again?

    Please help – thanks a lot, Alex

  • Hey I wanted to know how to put an google ad next to my logo on my website. travisfaulk.com
    Where it says Bringing Rock News To You. I want my google ad to go there.

    • Hey Suhanesh, there is new version of Mystique Theme – Mystique 3.0, which allows you to add navigation bar at three different positions (Above Title, below title and at footer), I am using new version and added navigation bar at three different positions. 8)
      So try new version of Mystique Theme, also it provides a lot of feature than version 2.4.3 😉

  • I have inserted images in my slideber, but there’s a problem that, i want to reduce the space between two images, but i can’t do it, can u plz help me to do it?

  • Hello, please I have a problem with mystique. When I activate Jquery the Read More Option on Home Page just shows Loading then noting when I click on it. It doesn’t load any page. So I tried to disable Jquery and it It works, but I have the comments disabledf when I turn it off.

      • Thanks for the quick response, I solved the problem by deleting the More section in the jquery.init.php page in the Mystique Theme editor. Thanks.

  • Hi..
    Thanks for sharing this information and resources it’s really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

  • Hello Amit,

    Thank you for all these tricks.
    Do you know how to change the position of the comment box to put it before the first commentary in order to help visitors who read an article to comment more easily?

    Thank you in advance,

    Regards

    Fred

    • Hello fred,

      It can be done like this, Go to
      1) Admin -> Apppearance -> Editor
      2) Take a backup of file that u r going to edit. (Important step) 3) Select “comment.php” from list of files
      4) Then find “<!– comment form –><div class=”comment-form clear-block” id=”respond”>” and and start copying the code up to “</div><!– /comment form –>” (note the slash)
      5) Move selected code block from there and put it before “<div id=”comments-wrap”>”
      6) Save the changes and check

      Please dont forget to backup. let m eknow if this works.

      • Hi Amit,
        Thank you very much for your quick response.
        You’re a nice guy

        I just tried and it:
        –> works fine for Firefox
        –> with internet explorer the comment box goes back, but we can see hardly the comments on the right of the comment box like if it was a second small width column of a table.

        So the interpretation of the change from IE isn’t OK
        The solution seems not far 🙂

        Thank you,

        Fred

  • Hi Amit

    I want to add image with link to internal page in sidebar. Kindly tell me how can i? I also want to change favicon guide me as well.

    Regards

  • Hi Amit,

    Maybe you would know the answer to this. I’m simply trying to add a Facebook Like Box to my sidebar via widgets. I got the code from FB, but when I paste the iFrame code into my text widget it comes up as raw code only–no FB image shows. Have you experienced this same issue?

    Thanks!

    Shawn 🙂

    • seems like mystique is changing “<" tag to ">" so that browser is not able to parse that code and print "Like" button insted its printing code as it is...do u have mystique latest version ?? please send me so i can install on my machine and see what could be done.

  • You’re right! That was strange–I kept copying and pasting new code, but for some reason it kept reverting to the old code. So I put the text widget back, then dragged it again, added the new code, and it worked! Thanks, Amit! You’re a bonafide Mystique genius! 🙂 🙂

  • Hi. Thanks for this infos. I am very wondering your header.php style. Ordered by categories and when mouse-overed showing post number. Please help me with this. Im beginner and sorry for my english… Thank you in advance!

    • C’est l’homme très vieille idée ….. J’ai idée encore meilleure, pouvez-vous faire de la maison pour moi en utilisant les allumettes de sûreté? Si vous ne pouvez alors s’il vous plaît me contacter par email, car ce n’est pas au bon endroit pour parler de choses inutiles comme “serviettes jetables”, “vous”. J’espère que vous comprenez.

    • 1) Add this javascript code to your index page to make floating navigation bar

      2) For extra links use “extra nav” plugin

  • We are using the Mystique 2.6 Theme for our website. We created a different page for Blogs, however when we post a new entry it shows up on our home page. We were wondering how to post entries on the blog page. I was trying to find the home.php file to change the page name to something else and change the settings under the Reading tab to static, but I was unable to. Currently, there is no option in the Reading settings page for “Home” and if I create a new page, the Home page is still there. We like our home page, we just want to be able to post multiple posts on the Blog page, and have a opting where the post only show up on the Blog page.

    Please let us know what we can do to change this

    Thanks,
    Urvi

  • Hi
    My site is currently under construction and I wke the site-title logo and tagline centred. Currently the logo text and tagline appear in a single row but justified left. I have tried doing this in css but seem to end up with the logo centred but the tagline appears on the line below, so I have reverted back to the original css.
    Can you help please?
    Many thanks

    • Just a quick solution, try to find the header page and find and add style=”margin-left:10%”, so it will become . let me know if this works.

  • I have disabled comments completely in every place I can find but the comments form and tab still appears on the single post pages but with a Comments Closed message and the button for the Comments Feed. Can I remove the whole of the comments form, message and feed button as my client doesn’t want to use the comments facility at all.

  • Hi.

    1) I know how to change the font size of the navigation menu, but then the grey shaded background stays the same size. How do I resize it?
    2) How do I decrease the space between the navigation menu and the main content box?

    I need the CSS please, I’m not hosting my own blog. Thanks, appreciate any help.

    • @mark : which version of mystique r u using ? i’m asking this because i have done this using “User css” option in mystique 2.x, this option is not available in 3.x. So if u are using 3.x version then i need to install the 3.x version and then only i can tell u solution.

  • Hi Amit, I’m new to blogging, I’ve chosen the Mystique theme and your site has helped me very much! I’m having a small problem with the comment box – the text such as -name, email and url – like above on your comment box is invisible on m,y blog. Any ideas on why this text has disappeared. Any help is highly appreciated!X

    • I think you are logged in to admin panel and also opened ur blog in same browser (in another tab), is it ??
      Open your blog in another web browser and it will be visible.

    • i just saw ur page, i can see there is error due to “wp-smushit” plugin. try to remove the plugin and run, if that doesnt solve ur problem then reinstall wp again.

  • I have just released roofwindows-roofblinds.co.uk but would like to make a change to how the tag is generated. At the moment the system uses the site title plus the page title that I have input into the All-in-one-SEO page title field to construct the tags. I was however expecting that the All-in-one-SEO defined title would be the sole content of the tags. Do you know how I can remove the site title from the tag generation. I am not sure whether this a theme-generated issue or an issue associated with WordPress defaults or the plugin defaults?
    Any advice would b e greatly appreciated.
    Many thanks
    Joan Ward

    • Sorry joan, i found both of ur comments in spam…so i wasnt able to look in to it…anyways, glad to know you solved it.

  • Hi
    I am trying to set the background colour of the text widgets on my site – I want 3 text widgets each of which has a different background colour and each having with white text. How would I set that up – I have tried using tags and tags but that doesn’t seem to have any effect.
    Any help would be appreciated
    Thanks, Joan

    • Hello Joan, sorry for being late, actually ur comment was marked as spam. can u provide url of ur site and which widgets u want to apply colors. so i can have a look at it and suggest some css or javascript solution.

  • Hey there,

    I love what you did with your site! I’m trying to get my nav bar to feature categories instead of pages. I would also like the nav bar to follow the page like yours!

    Could you please tell me how you did this? Is there a way to make the nav bar black?

    • To make “following” nav bar u need to make changes to the footer.php, do u know programing ? i will send you code to ur email…try that code if that doesnt work let me know.

  • Hi
    I have used some of your mods on my site with great effect and would like some additional advice with respect to the main menu bar – my client would like the menu items to fill the full width of the menu bar, but I am not able to do that and find that I always end up with a blank section after the final item divider. Is there a way to make this happen, I presume that in addition to making the text items fill the full menu width I would also need some mechanism to disable the appearance of the final divider that appears to the right of the text…does that make sense?
    Thanks
    Joan

    • Uttam, Sorry for the late reply, Did u set icon settings like ur facebook fan page url, twitter account name etc. I am sure this is the problem.

      • First thanks 4 ur recent comment. I drag & drop icon from inactive to active in social media icon option & also set url there. other setting is necessary ???? If necessary where to edit sir??

        • Hello sir,
          maine aap ke email address me mera username,password aur site name send kardiya hu pls…mera social media icon menu bar me show karadijiye.
          Yours sincerelly
          Uttam

  • Hello sir,
    maine aap ke email address me mera username,password aur site name send kardiya hu pls…mera social media icon menu bar me show karadijiye.
    Yours sincerelly
    Uttam

  • I am using Mystique theme and I am trying to do a small trick. In the Mystique settings > Content > Post Previews I have chosen to show ONLY full content instead of excerpt. So elements that I do not want to show are Title, Info Bar, Tags.

    The next step I am trying is to hyperlink the entire content displayed as preview to the respective post page.

    So for example, if I am in the home page I should be able to see the respective post contents which will be hyperlinked to the respective posts.

    Can anyone please shed some thoughts on how to do this?

    Thanks in advance!

  • Hello, does anyone know how to make the menu bar black in mystique 3x? I’ve tried the #access and it doesn’t do anything. Also the photo gallery slider I can’t get to work. I tried enabling it in settings and checked all items, and it doesn’t show up. Thanks

  • Hi sir,

    How can I modify to get side bar category design?
    Please see the link below to see screenshot. I can’t think of anything to get like that. I only get plane one only.
    [link removed]

  • Hi there Amit.
    I’m using a child theme of the Mystique 3.2.9.3 under WP 3.3.1
    Just one question, how can I change the delay values for the dropdown top menu?
    Is it in a JS file? Which? Where?
    Thanks a lot.

  • Hi Amit,
    Great post! I’m trying to do the following:
    1. I’ve been searching for a way to make the nav bar solid color.
    2. I want to make a text widget on the side bar with red background. I tried inserting this html code:
    ” ”
    But it didn’t work. Do you know any idea how to make that work?

    Thanks,
    Ghassan

    • Ghassan,
      1) which version of mystique u r using ? It matters lot.
      2) Resend html code again its been striped by wp and i cant see anything.

  • Hi
    Can you tell me which plugin you are using to display the row of social media icons and counts that appear at the end of your posts please.
    Cheers
    Joan

  • I have removed the main navigation bar from view on my customisation of Mystique as my client wanted just side navigation, but I want to have the social media icons visible that normally appear behind/above the main menu bar – do you know how I can do this?
    I have used the following to hide the main menu:
    /* hide main navbar */
    #header .shadow-left{
    display: none;
    }
    Any suggestions would be very welcome
    Thanks
    Joan

  • Hi Amit.
    If you’re still around, I am hoping you will solve this little mystery for me. I’d like to change the hover over colour of the navigation bar menu font, from blue to one of my choosing. None of the found coding I’ve tried has altered the format/appearance in any way. I’m using Mystique 3.3.2.
    Cheers,
    Chloe

  • Hi, hoping someone might be able to help me out. I would like to have different headers on different pages of my site. I am using the Mystique theme? Anyhelp would be greatfuly appreaciated.

  • Hi
    I have used Mystique theme on a few sites over the last couple of years and on one of those sites my client has now asked if they can have a completely bespoke home page which has a more graphics-based navigation integrated within the body of the page. So my question is how would I leave the top navigation in place on the rest of the site but hide/remove it from the homepage so that I can put a completely bespoke homepage – is this possible?
    Any advice will be much appreciated.

Leave a Comment

*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares

Let your friends know what are you reading

Share this post with your friends!