Customizing WordPress theme Mystique

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.

/* 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;}

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.

, , , , ,

Over Ruben Woudsma

In het dagelijks leven werkzaam als testmanager. Daarnaast actief als raadslid namens CDA in de gemeente Huizen. Ook ben ik actief in de protestantse kerk te Huizen, bestuur kinderboerderij Huizen en ben ik lid van de identiteitscommissie PCBS de Parel.

8 reacties op “Customizing WordPress theme Mystique”

  1. Rudy 20 november 2010 om 14:06 # Beantwoorden

    Hello
    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

    Rudy

  2. Rajesh 28 april 2011 om 11:24 # Beantwoorden

    Nice tips, thanks!
    Check this out:\
    40+ Most Wanted Mystique Theme Modifications, Hacks

  3. Samsung mobile phone 23 juni 2011 om 08:29 # Beantwoorden

    hey.. thanx..I needed some hacks and mods for my website…which is now on Mystique theme..

  4. car covers reviews 13 augustus 2011 om 11:09 # Beantwoorden

    I just wanted to thank you yet again for that amazing web site you have created here. It truly is full of ideas for those who are seriously interested in that subject, in particular this very post. You really are all so sweet and thoughtful of others and reading your blog posts is an excellent delight if you ask me. And thats a generous treat! Dan and I will have fun making use of your guidelines in what we have to do in a few days. Our listing is a mile long so your tips will certainly be put to beneficial use.

  5. Mansi Bharat 24 december 2011 om 07:22 # Beantwoorden

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

Trackbacks/Pingbacks

  1. Tweets die vermelden Customizing WordPress theme Mystique « Ruben Woudsma -- Topsy.com - 10 augustus 2010

    [...] Dit blogartikel was vermeld op Twitter door Ruben Woudsma, Ruben Woudsma. Ruben Woudsma heeft gezegd: Vandaag geblogd: "Customizing WordPress theme Mystique". Lees verder op: http://bit.ly/dhMoRL [...]

  2. Uw franse wijn importeur Assie Wijn Import » Blog Archive » Ardèche wijnen 2010 uitmuntend! - 9 september 2010

    [...] « Customizing WordPress theme Mystique [...]

  3. Assie Wijn Import, uw franse wijn importeur en exporteur » Blog Archive » Internet publicaties - 20 oktober 2011

    [...] « Customizing WordPress theme Mystique [...]

Geef een reactie