40+ Most Wanted Mystique Theme Modifications, Hacks
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 – MystiqueR2.
User CSS Code:
Note: Add following code to, Under Appearance -> Mystique settings -> User CSS.1. Adjust the postion 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.
/* Custom featured page width and height*/
#featured-content .slide-container, #featured-content ul.slides li.slide{ height:174px;
width:1060px;
}Change value of 174, 1060 accordingly. 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 colour:/* Change Site title colour */
#site-title #logo a{
color:#FFFFFF;
}Default colour is White. Change value of FFFFFF if you want another colour.6. Change Site tag line colour:
/* Change Site tag line colour */
#site-title p.headline{
color:#C2DC15;
}Default colour is Green. Change value of C2DC15 if you want another colour.
/* The hover colour of blog title */
#site-title #logo a:hover{color:#ed1e24;}Default colour is Red. Change value of edle24 if you want another colour.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;}
/*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 colour with upper and lower colour:/* 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 I find Twitter and RSS buttons are hidden by the navigation bar and are hard to see and are not easily accessible to readers, so you move them up for user friendliness.
/* Move up Twitter and RSS buttons */
#header a.nav-extra{
height:64px;
}
#header p.nav-extra{
top:-60px;
}
/* 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;
}
/* 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;}
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%;}
Other Tips and Tricks:
1. Place the description directly below the blog title, like this site: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 icon to your blog/site:
For those who don’t know what Favicon is ‘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
[/html] and change it into 1Don’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.
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"><span>Menu Title</span> <span></span></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.
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.
Under Appearance -> Look in your single.php, find
</pre> <h1></h1> <pre> <!--?php endif; ?-->Change h1 to every as you want. That is you can change it h2, h3 …
8. Another way to adjust the postion of Site_Title/Site_Logo :
In Appearence-> 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 Appearence-> 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 '</pre> <div>'.mystique_strip_string(420, strip_tags(strip_shortcodes($featured_post['post_content']))).'</div> <pre> ';
We hoped that you enjoyed this long and resourceful article. If you like it please retweet and share it with your friends on Facebook. If you have some suggestion or problems about these tips and tricks, share it on our comment below.
No comments:
Post a Comment