Mystique 3.0 WordPress Theme modify

User CSS Code:

Under Design -> Mystique  -> CSS

1. Adjust position of Site Title Logo:

[php]
#site-title {
padding: 25px 0 2px 0;
}
[/php]

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:

[php]#logo a {
color: #E0E0E0;
}[/php]

Change value of E0E0E0 if you want another color.

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

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

#logo {
font: bold 415% Verdana,Arial,Helvetica,"Arial Black","Helvetica Black",Gadget,sans-serif;
letter-spacing: 0px;
}[/php]

3. Change the hover color of blog title:

[php]#logo a:hover {
color: #CECECE;
}[/php]

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.

[php]#logo {
font: bold 350% "Arial Black","Helvetica Black",Gadget,sans-serif;
letter-spacing: -2px;
}[/php]

5. Modify Appearance Previous and Next Links

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

6. Adjust space between Navigation bar and content:

[php].shadow-right {
padding-bottom: 18px;
}[/php]

Adjust the value of 18 according to your need.

7. Join navigation bar with main content:

[php].shadow-right {
padding-bottom: 0;
}

.social-media {
bottom: 10px;
right: 10px;
}[/php]

8. Turn widget titles to lower case:

[php].block .title h3 {
text-transform: none;
}[/php]

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

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

10. Border for each post:

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

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

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.

[php]body{background-color:blue;}[/php]

12. Alternate header image:

To use following header image add given code below image.

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

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,

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

13. Center the logo picture in the header:

[php]#logo {
width : 100%;
text-align : center !important ;
}[/php]

14. Move up the social media icons:

[php].social-media {
bottom: 30px;
position: absolute;
right: -5px;
z-index: 5;
}[/php]

Adjust 30px value to whatever you want.
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:

[php]define(‚ATOM_LOG_VIEWS‘, true);[/php]

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]<!–?php if($app—>options(‚post_category‘) && $app->post->getTerms(‚category‘)): ?>
<!–?php printf(_a(‚in %s‘), $app—>post->getTerms(‚category‘, ‚, ‚)); ?>
<!–?php endif; ?–>[/php]

then add following code below above code:

[php]| Views <!–?php echo $app—>post->getViews(); ?>[/php]

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:

[php]$app->addContextArgs(‚primary_menu‘, array(‚fallback_cb‘ => array(&$app, ‚categoryMenu‘)));[/php]

and you will get categories in the menu.

17. Change the spacing of the blog title text:

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

18. How to remove the navigation bar from 3.0

[php]#header .shadow-left{
display: none;
}[/php]

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 cutted on the left border. Here is the code to adjust these items

[php].hentry ol,ul{
padding-left:15px;
}[/php]

20. Add a banner just near the logo:

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

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,

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

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

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

[php]<!–?php <br ?–>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…‘);
}[/php]

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

[php].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;}[/php]

24. Fixed custom background image:

[php]#page
{
background-repeat:no-repeat;
background-attachment: fixed;
}[/php]

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

[php]$app->getAuthorAsLink()[/php]

with

[php]$app->getAuthorAsLink(‚dofollow‘)[/php]

26. Change appearance of “Show More” button:

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

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

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:
First, download and add icons.png (see above in gallery) image file to your Mystique Image folder (themes/mystique/images/).

[php].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;
}[/php]

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

28. Add transparent borders to tables:<

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

Update 21.10.11 :

Pictures are to long ? like this one ? http://img7.imagebanana.com/img/ro6kqjja/akuza112.hacker.toV3BlogMinecraftman.png

Insert in your child theme this code :D

[php]
img{
max-width: 100%;
height: auto;
}[/php]