Theme Mystique customization

For one of the websites I am maintaining I implemented the Mystique theme of Digital Nature. I was already familiar with the theme’s of Digital Nature as I am using it for my own website. One of the advantages of the Mystique theme is that it is highly customizable via user style sheets. Unfortunately there where still some difficulties to overcome, which I would like to share via this blogpost.

Adjusting the default Mystique layout

As the initial layout of Mystique was to dark for me I started modifying the basis settings of Mystique. The following adjustments have been made:

  1. Set the layout to one sidebar on the right;
  2. Set the color scheme to ‘green’;
  3. Add my own background color;
  4. Set the font to Helvetica/Arial;
  5. Upload and add the site specific logo;
  6. Some site specific setting on the Content, Navigation and SEO option groups;

Most of the work has been done by modifying the User style sheet. If you like to can download the content of the user style sheet.

Twitter widget not working

Initially the Twitter widget was not working. This had to do with the fact Twitter recently changed the way external systems should connect to the API, oAuth should be used. In order to work around this problem one of the other users of the Mystique theme made some modifications to the widgets.php file.  For end users the main change is that the ‘refresh date rate’ can be set. This can be handy when multiple websites from you hosting provider connect to Twitter to update their website with the latest tweets.  Twitter only allows 150 updates from 1 IP address or authenticated user.

Positioning of the extra navigation icons

As the default Mystique theme only supports two navigation icons (namely: RSS and Twitter) I was searching for a way to add some extra icons. Several blogposters wrote how to implement this. Mark N. Hewitt did a great job in order to create the icons. Even if you would like to have some additional icons you can always request him to create one. As Mark his code was based upon an earlier version of the Mystique theme I downloaded and installed an additional plugin which let you easily add several navigation icons.

Unfortunately there is a style sheet error in the navigation icons causing some strange behaviour in Internet Explorer 8. To fix this I added the following code to my user style sheet. At the end it was pretty simple. I compared the style sheet being used by Mark N. Hewitt and modified some of these changes back into the Mystique theme.

[css]/* Customer header navigation icons */
#header a.nav-extra{width:64px;height:36px;display:block;position:absolute!important;bottom:18px!important;}
#header a.nav-extra span{display:none;}

#header p.nav-extra {top:-10px!important;height:53px!important;}
#header a.nav-extra {height:61px;width:64px;top:-23px!important;}

#header a.nav-extra.meni-rss {right: 319px!important;}
#header a.nav-extra.meni-facebook {right: 201px!important;}
#header a.nav-extra.meni-linkedin {right: 136px!important;}
#header a.nav-extra.meni-hyves {right: 74px!important;}
#header a.nav-extra.meni-twitter {right: 10px!important;}[/css]

Note that the !important is needed due to the fact that the navigation icon plugin loads a specific style sheet which is put later in the code as the user style sheet. This way the customizations are not being overwritten.

Colourizing the post information bar

As the original PSD file for the Mystique theme was not available I needed to modify the original image for the information bar to change the color. The steps that have been done where the following:

  1. Download the info-bar.png file and open it with Photo shop;
  2. Change the mode of the image to RGB;
  3. Modify the blending options of the layer and add a color overlay.

You can see the final result of the image I made here.

Extra widgets and plugins

As mentioned above one specific plugin has been added for the navigation icons. Furthermore I added the WP-Cumulus plugin to the website as I already was using this on my own website and on some other sites. For better integration of the website with Twitter the WordTwit plugin has been added.

If you have questions regarding some of the customizations or would like to know more do not hesitate to leave a reply down below.

Customizing WordPress theme Mystique
Getagd op:                     

6 gedachten over “Customizing WordPress theme Mystique

  • Pingback:Tweets die vermelden Customizing WordPress theme Mystique « Ruben Woudsma --

  • Pingback:Uw franse wijn importeur Assie Wijn Import » Blog Archive » Ardèche wijnen 2010 uitmuntend!

  • 20 november 2010 om 14:06

    Could you please explain how to make the sidebar tab ( which displays categories, recents and so on ) work? I have added it to the sidebar but it displays any information.
    I also have problems in the bottom of the articles: there are two cool features: print and share but they did not display anything !

    Thanks in advance


  • 24 december 2011 om 07:22

    Hey Thanks, i was looking for this
    can you explain how to make my widget title background from green to blue.


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *