50最高通緝主題Mystique修改,黑客 - 版本2.4.3

在這裡,在這篇文章中,我們已經共享50種不同的方法來修改奧秘WordPress主題。 使用本指南定義的奧秘的主題。

A+ A-

更新:

本教程的奧秘WordPress主題寫入到2.4.3,自3.0版主題代碼已經改變很多,這些教程不再起作用。 對於新的修改,黑客閱讀這篇文章, 如何修改奧秘3.0+ WordPress主題

神秘感是一個免費的WordPress主題 ,試圖在設計和功能方面,以頂級的商業模板。 在我們前面的文章中,我們表現出對用戶的一種方式社會圖標添加到奧秘導航欄 。 在本文中,我們將與您分享的方式,通過它可以修改主題Mystique各個領域。 自定義使用本指南的奧秘WordPress主題的每個部分。

如果你不喜歡編輯代碼,然後下載改進的奧秘主題- MystiqueRevised

用戶CSS代碼:

注意:添加以下代碼,在外觀- >奧秘設置- > 用戶CSS。

1.調整網站標題/網站標誌的位置

/*** LOGO/Site_Title and Navbar***/
#site-title {padding:35px 0 10px 0;}

凡35px是上述網站標題的空間和10px的下方是網站的標題或網站標識的空間。

2.調整頁面寬度

對於要更改默認960(網格系統)頁面寬度定義寬度某種原因,然後執行以下步驟:首先在外觀- >奧秘設置- >設計- >選擇流體(100%)/自定義選項,然後添加以下代碼用戶CSS。

/* Page Width */
body.fluid .page-content{
 max-width: 1060px;
}

>使用柱尺寸的選擇 - 因此,如果你想改變側邊欄大小,然後設計變更1060價值。

3.設置自定義精選後的寬度和高度

如果調整超過960(網格系統)等頁面寬度,那麼你必須調整功能的後寬度。 您也可以使用下面的代碼片段調整後精選高度。 174,因此1060的變化值。

/* Custom featured page width and height*/
#featured-content .slide-container, #featured-content ul.slides li.slide{ height:174px;
width:1060px;
}

4.從首頁隱藏標語

如果你想隱藏的主頁的標語,但它應該是在瀏覽器頁面顯示等。

/* Hide tag line from homepage */
#header .headline{ display: none; !important}

5.更改網站標題顏色

/* Change Site title color */
#site-title #logo a{
color:#FFFFFF;
}

默認顏色為白色。 如果你想要其他顏色更改FFFFFF值。

6.更改網站標記線顏色

/* Change Site tag line color */
#site-title p.headline{
color:#C2DC15;
}

默認顏色為綠色。 如果你想要其他顏色更改C2DC15的價值。

Change Site Title Tag Line Color

7.更改博客標題的懸停顏色

/* The hover colour of blog title */
#site-title #logo a:hover{color:#ed1e24;}

默認的顏色是紅色。 如果你想要其他顏色更改ed1e24的價值。

8.加入導航欄與主要內容

Join Navigation Bar with Main Content

/* Join navigation with main content */
.header-wrapper .shadow-right{padding-bottom:0;}

9.黑色導航樣式

/* 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(/ges/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.減少網站標題文字大小

為了減少下面的代碼網站的標題文字使用的大小。 相應地調整為300值。

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

相應地調整為180值。

12.將小部件標題以小寫

在主題Mystique所有部件的標題都是大寫的。 為了改變這種使用下面的代碼。

/* turn widget titles to lower case */
.block h3.title{text-transform:none;}

13.邊境每個職位

Border for each post

/*border for each post */
.post{
    border:2px solid;
    margin:0 0 40px;
    padding:15px;
    text-align:justify;
}

14.更改文本的默認字體大小裡面郵政

/* Custom font size inside post */
div.post-content{ font-size: 120%; }

15.更改黑色背景:

主題Mystique ,默認背景是黑色的,你可以把它改成其他的。 在這裡,我們給了藍色作為一個例子。

/* Change black background */
body{background-color:blue;}

16.更改背景顏色採用上下顏色:

/* 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 */
#pageControls a{ display: block !important; }

Permanent Page Controls

18.移除頁面控件永久

/* Remove page controls */
#pageControls{
    height:100px;
    position:absolute;
    right:0;
    top:0;
    width:0;
    z-index:4;

19.備選標題圖片

使用下面的標題圖片下面添加圖像定的代碼。

Alternate Header Image

/* Alternate header image */
#page{background-image:url(/uploads/other-domain/wp-content/themes/mystique/images/_alt/header2.jpg);}

您的網站網址localhost替換。

20.向上移動RSS訂閱和Twitter按鈕

默認情況下,我們發現Twitter和RSS按鈕由導航欄隱藏,難以看到,而且不容易接觸到的讀者,讓他們動起來的用戶友好性。

/* Move up Twitter and RSS buttons */
#header a.nav-extra{
   height:64px;
}

#header p.nav-extra{
   top:-60px;
}

Move Up the RSS Feed and Twitter Buttons

在導航欄21隱藏RSS按鈕

/* Hide RSS button */
#header a.rss{display:none;}

22.隱藏Twitter的按鈕在導航欄

/* Hide Twitter button */
#header a.twitter{display:none;}

23.隱藏郵政信息欄

在您的主頁,如果你想隱藏後的信息,如日期,發布者,類別,評論然後用下面的代碼。

/* Hide post information bar */
.post-date, .post-info{display:none;}

24.總是顯示“回复| 報價| 編輯“中的註釋

默認情況下“回复| 報價| EDIT“當鼠標懸停在他們將被顯示。 為了展示他們永久使用下面的代碼。

/* Always show “REPLY | QUOTE | EDIT” in comments */
#comments .controls{
   opacity : 1 !important;
   position: absolute;
   display: block !important;
   top: -3px !important;
}

Always show REPLY | QUOTE | EDIT in comments

25.更改頁腳的背景顏色為淺灰色

Change Footer Background Color to Light Gray

/* Change footer background color to light gray */
#footer{background:#ddd;}
#footer-blocks .leftFade,#footer-blocks .rightFade{background-image:none;}

如果你想要其它顏色然後改變#ddd的價值,我們正在使用#eeeeee值。

26.更改頁腳的背景顏色為深灰色

/* Dark background footer */
#footer{background:#666;color:#ddd;}
#footer a{color:#fff;}
#footer-blocks .leftFade,#footer-blocks .rightFade{background-image:none;}

Change Footer Background Color to Dark Gray

27.讓你的上傳背景重複

如果您上傳自定義背景圖片,你想重複一遍,然後使用下面的代碼。

body{background-repeat: repeat;}

(或重複-X,重複-Y)

28.調整線和段落之間的空間

/* Adjust space between line and paragraphs */
.post-content p{
   margin: 0 0 1.2em 0;
   line-height: 150%;
}

第一個屬性:段落之間的間距(頂部/右/下/左)。
第二個屬性:線之間的間隔。 相應地調整值。

29.減少小​​部件之間差距

有些人不喜歡的小部件之間的巨大差距。 因此,這裡的碼來調整間隙。

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

相應地調整為1.2的值。

Decrease the Gap between Widgets

30.隱藏或刪除頁面標題

如果要隱藏或單後的網頁上刪除的文章標題,然後添加以下代碼。

h1.title{font-size:0%;}

Hide or Remove the Page Title

像ATOM主題/標籤框架31.修改外觀

Modify Appearance of Tags

/* Modify appearance of tags */
.post-tags a{
 -moz-border-radius: 10px 10px 10px 10px;
 border: 1px solid #EEEEEE;
 color: #AAAAAA;
 margin-bottom: 2px;
 padding: 1px 5px 2px;
 text-decoration : none;
}

.post-tags a:hover{
 background : #666666;
 border: 1px solid #666666;
 padding: 1px 5px 2px;
 color : #ffffff;
 -moz-border-radius: 10px 10px 10px 10px;
 text-decoration : none;
}

32.打開導航標題以小寫

主題Mystique所有的導航標題是大寫。 為了改變這種使用下面的代碼。

ul.navigation li  a{text-transform:none !important; font-size:115%;}

您還可以調整導航標題字體大小。 因此115%的變化值。

Navigation Titles in Lowercase

一個和上鏈接的33修改外觀

您可以修改下一個和以前的鏈接的外觀所以這將是很容易看到和吸引力。

Modify Appearance of Next and Previous Links

/* Change Previous and Next Links */
.single-navigation a{
   border: 1px solid #EEEEEE;
   color: #d96109;
   margin-bottom: 2px;
   padding: 1px 5px 2px;
   text-decoration : none;
}

.single-navigation a:hover{
   background : #666666;
   border: 1px solid #666666;
   padding: 1px 5px 2px;
   color : #ffffff;
   text-decoration : none;
}

34.取下標籤

使用下面的代碼隱藏標籤。

/* Hide Tags */
div .post-tags{
  display:none;
}

35.隱藏郵政信息欄

添加如下代碼隱藏崗位信息欄。

/* Hide post information bar */
.post-date, .post-info{display:none;}

對郵政和頁面內容36.文本對齊

如果你想證明文字和頁面內容添加以下代碼:

/* Text-Justify post and page content */
.post-content{text-align:justify;}

37.修正了自定義背景圖片

要解決下面的代碼自定義背景圖片地址:

/* Fixed custom background image */
body{background-attachment:fixed;}

38.增加字體大小內頁

您可以增加使用如下代碼頁字體大小:

body p{
 font-size:15px;
}

其他有用的代碼段為主題Mystique

1.將描述正下方的博客標題

在外觀- >看看你的style.css中找到

#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;}

刪除: - border-left:1px solid #999;
地址: - clear:left;
變化: - margin:0 0 0 0em;
變化: - line-height:44px;
變化: - padding:.2em 0 .2em .1em;

調整的數字,只要你喜歡。

2.添加網站圖標到您的博客/網站:

對於那些誰不知道什麼是網站圖標,“ 網站圖標是一個小圖標(圖像)顯示在瀏覽器的地址欄中的開始。 它也被稱為收藏圖標,網頁圖標和鏈接圖標。“大多數人都使用16 * 16像素的圖標(你也可以用32 * 32像素的圖標)以”.ICO“的格式。 但是,你也可以使用GIF,PNG(圖像格式)以及。

創建和使用圖標的主要優點是,它可以很容易地找到您的博客或網站,當有人收藏夾或書籤等幾個站點之間你的網站/博客。

在外觀- >看在你的header.php,找到

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

並把它變成

<link rel="shortcut icon" href="Your Favicon File URL HERE" />

不要忘了更換,.ICO和.gif文件的URL。 訪問www.iconj.com免費18000+動畫網站圖示,圖標在線生成器,圖標託管等等。

Favicon in Mystique Theme

3.獲取在後圖像燈箱打開,就像這樣:

Lightbox Effect in Mystique Theme

燈箱是提供默認功能奧秘的主題 。 燈箱將打開,在為.jpg,.png或.gif結尾的鏈接(它會asume這是一個圖片)。 所以,單從崗位鏈接使圖像畫面。 例如。 鏈接到全尺寸的圖像縮略圖。

4.要放在頂部導航欄中的鏈接,添加以下代碼,在外觀- >奧秘設置- >高級> 用戶功能

<?php 
  function mymenu() {  
     echo '<li><a href="Link to Your Menu" rel="nofollow">Menu Title</a></li>'; 
  }
  add_action('mystique_navigation', 'mymenu'); 
?>

當你想擺在導航欄中的外部鏈接是非常有用的。 通過更改您的標題你的鏈接“鏈接到你的菜單”和“菜單標題”。

5.背景透明

在外觀- >看在你的style.css,找到

/*** MAIN LAYOUT ***/
.shadow-left{background:url(/ges/shadow.png) no-repeat left bottom;}
.shadow-right{background:url(/ges/shadow.png) no-repeat right bottom;padding-bottom:0px;position:relative;}
#main{background:#fff url(/ges/main-right.jpg) no-repeat right top;}
#main-inside{background:transparent url(/ges/main-left.jpg) no-repeat left top;min-height:380px;}

並把它變成

/*** MAIN LAYOUT ***/
.shadow-left{background:url(/ges/shadow.png) no-repeat left bottom;}
.shadow-right{background:url(/ges/shadow.png) no-repeat right bottom;padding-bottom:0px;position:relative;}
#main{background:transparent;}
#main-inside{background:transparent;min-height:380px;}

6.卸下頂部導航欄和實際內容之間的空間

有頂部導航欄和實際內容之間的一些空間。 如果你想刪除這個空間,或者你可以加入的內容和導航欄在一起。 在外觀- >看在你的style.css,找到

/*** MAIN LAYOUT ***/
.shadow-left{background:url(/ges/shadow.png) no-repeat left bottom;}
.shadow-right{background:url(/ges/shadow.png) no-repeat right bottom;padding-bottom:10px;position:relative;}

更改10px的為0px,如果你想加入的內容和導航欄一起或相應地改變它。

Remove the Space between the Top Navigation Bar and the Actual Content

7.另一種方式減少的帖子標題的字體大小

在外觀- >看看你的single.php中,找到

<h1 class="title"><?php the_title(); ?></h1><?php endif; ?>

更改H1至H2,H3根據您的選擇。

8.另一種調整網站標題的位置/網站徽標

在外觀- >編輯- >打開樣式表(style.css文件 ),發現:

/*** LOGO/Site_Title and Navbar***/
#site-title{padding:4em 0 3.7em 0;}

通過調整4EM價值和3.7em可以調整頭的標誌位置。 4 EM是上述網站的標題和3.7em空間,網站標題和導航欄之間的間距。

9.另一個礙事字裡行間更多的空間

在外觀- >編輯- >打開樣式表(style.css文件 ),發現:

p{margin:.6em 0 .3em;line-height:150%;}

通過缺省值是150%。 因為你需要,你可以將其更改為更高的價值。

10.在包含特性內容欄的詳細文本

如果您有增加功能的內容欄的寬度,那麼你想在功能的內容欄更多的文本。 要做到這一點,你需要的FTP客戶端,然後在的wp-content - >主題- >神秘感- >擴展- >功能-職位- > 功能-posts.php,發現:

echo '<div class="summary">'.mystique_strip_string(420, strip_tags(strip_shortcodes($featured_post['post_content']))).'</div>';

改變你希望在你的特色崗420然而,許多字符。

11.如何添加“返回頂部”按鈕

有兩種方法來增加這個功能:修改header.php文件,並通過使用插件

修改頁眉(header.php文件)

在WordPress的儀表板 - >外觀 - >編輯 - >的header.php,尋找

< ?php wp_head(); ?>

下面這行添加以下代碼:

&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;
a.go-top{display: none;position:fixed;right:10px;bottom:10px;cursor: pointer;z-index: 99;padding: 5px 10px;background: #eee;text-decoration: none;}a.go-top:hover{background: #333;color: #fff;}
&amp;lt;/style&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; &amp;gt;
jQuery().ready(function(){
     jQuery( window ).bind(&amp;quot;scroll&amp;quot;,function(){
       if(jQuery(window).scrollTop() &amp;gt; 170){
            jQuery(&amp;quot;.go-top&amp;quot;).show();
	}
       else
           jQuery(&amp;quot;.go-top&amp;quot;).hide();
     });
  });
  &amp;lt;/script&amp;gt;

再經過兩片完全相同後,即行

添加如下代碼:

&amp;lt;a href=&amp;quot;#page&amp;quot; id=&amp;quot;goTop&amp;quot; class=&amp;quot;go-top&amp;quot;&amp;gt;Go to Top&amp;lt;/a&amp;gt;

現在,在你的網站,你會看到“回到頂部”出現在屏幕的右下角,可以讓用戶順利向上滾動按鈕。

Screenshot of Go to Top Button

點擊預覽全圖

只要卷動一點點,你會看到一個“回到頂部”按鈕,出現在你的頁面的底部。

使用插件

如果你想添加“返回頂部”按鈕,而無需修改您的模板文件,然後嘗試以下插件中的任何一個。

1)滾動到頂部插件

滾動到頂部插件會添加一個按鈕,在你的屏幕,使用戶可以順暢地向上滾動頁面的右下角徘徊。 下載並安裝滾動到頂部插件。

2)WP頂部

這個插件將增加一個“返回頁首”自動鏈接到您的博客。 下載並安裝WP頂部。

3)回最上方

添加“轉到首頁”鏈接到您的文章。 這是基於jQuery,jQuery的寬鬆和滾動到頁首v3的一個WordPress插件, 下載並安裝返回頁首插件。

12.如何谷歌+1按鈕添加到奧秘導航欄

+1 Google Button in Mystique Navbar 其中谷歌的最新燦爛的創新理念之一是谷歌網站管理員的+1按鈕,這就是讓你的訪客或朋友推薦你的文章在搜索引擎更好的能見度。 近日谷歌已經改變了他們的算法,並強調什麼人喜歡和大家分享。

我們強烈建議每一個博客/網站的所有者添加在其網站上的谷歌的+1按鈕。 在這裡,我們分享添加谷歌+1按鈕的方式神秘的導航欄。

  1. 代碼的片段,請訪問: - http://www.google.com/webmasters/+1/button/
  2. 在WordPress的儀表板 - >外觀 - >編輯器。 在模板列尋找“footer.php”文件。 在footer.php文件搜索</body>標籤,並添加下列標記之前的代碼:
    &amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://apis.google.com/js/plusone.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;

    然後

  3. 在WordPress的儀表板 - >外觀 - >奧秘設置 - >高級。 向下滾動到用戶功能然後添加以下代碼:
                    &amp;lt;?php  
                      add_action('mystique_navigation', 'googleplus');
                      function googleplus(){
                        echo '&amp;amp;nbsp &amp;amp;nbsp &amp;amp;nbsp &amp;amp;nbsp &amp;lt;g:plusone&amp;gt;&amp;lt;/g:plusone&amp;gt;';
                      }
                    ?&amp;gt;
                

這就是所有你需要做的和谷歌+1按鈕將出現在您的網站/博客。

我們希望你喜歡這個漫長而足智多謀的文章。 如果你喜歡它,請轉推,並與Facebook,Twitter,谷歌你的朋友分享。

Ads

分享

最近

注意你的業務:2017年我們首要的本地搜索欄

當地SEO從業者在數字營銷組合中發揮越來越重要的作用,與本地意圖的搜索繼續以快速的步伐增長 - 尤其是在移動設備上。 ...

使用AdWords API出口到第三方廣告網絡會保持OK作為谷歌仍保留在FTC和解方面採取

雖然谷歌的反壟斷和解與聯邦貿易委員會說讓他們允許部分通過其API的AdWords數據的出口將於明天到期,馬修Suche...

SearchCap:聖誕老人追踪器,谷歌API條款和SEO指標

下面是今天的搜索發生的事情,對搜索引擎土地和在網絡上其他地方的報導。 從搜索引擎土地: 使用AdWords API...

瑪琳·黛德麗谷歌塗鴉榮譽傳奇女星的事業

瑪琳·黛德麗,標誌性的德國出生的女演員,今天正在榮幸在她誕辰116週年的谷歌主頁上。 她是那個時代最高薪的女演員之一,...

谷歌圖片搜索結果中測試新的相關搜索框

谷歌在谷歌圖片搜索結果頁面的移動版本測試一種新的“相關搜索”框。 羅賓Rozhon發現了變化,在Twitter上發布的...

註釋