插件CSS覆蓋的主題和損壞的插件佈局

我目前正在開發一個WordPress插件問題是它的佈局與不同的主題插件更改的佈局。插件CSS覆蓋的主題和損壞的插件佈局

如何使插件CSS不會改變任何主題應用？

#playbutton 
{ 
    z-index:99; 
    bottom:15%; 
    padding: 10px; 
    right:0px; 
    position:absolute; 
    font-size: 95%; 
    width:24%; 
    height:10%; 
    text-align:center; 
    color:white; 
    background-color: rgb(0, 0, 0); 
    background-color: rgba(0, 0, 0, 0.8); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900000   0, endColorstr=#99000000); 
    -ms-filter:     'progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,   endColorstr=#99000000)'; 
    border:1px solid #bfbcc5; 
}

這裏是不同的主題應用時會改變的CSS？我目前在寬度或高度上使用％。

來源

2014-04-23 Joseph Christopher Pimentel

有很多的事情要考慮，當你想使用不同的主題，當一個元素的佈局，甚至看起來是一樣的：

1）特異性

研究什麼特異是一回事，如何使用它以獲得優勢
如果您想讓您的StyleSheet更佔優勢，請將放在之後，然後將放在主要表單中。
確保你的類名不被他人使用 - 招：使用類前綴
如果一切都失敗了，重要關鍵字是你的朋友！

2）家長佈局

說出PLAYBUTTON的父元素是主題的影響，該#playbutton使用百分比，沒準按鈕將在母公司的大小，因爲它仍然是依賴。如果父母不受主題的影響，這會更容易，因此您可能需要返回到＃1。

我不知道這個項目的頁面總標記是多少，但我希望這有助於。

來源

2014-04-24 04:26:21 Jronny

無論如何，我都是你的團隊之一...... hehehe –

您需要爲您的插件創建包裝並使用命名空間。我不知道你正在開發什麼，但對於例如，如果它的視頻播放器插件，它可能是這樣的：

HTML：在地方

<div class="my-video-player"> 
    <div class="foo"> 
     <div id="playbutton"></div> 
    </div> 
    <div class="bar"> 
    </div> 
</div>

現在的HTML代碼，你也需要使用命名空間你的CSS：

.my-video-player { 
    /*wrapper styles go here (and also baseline styles: font-size for example), for example: required width and height*/ 
} 
.my-video-player .foo { 
    /*now these styles are based on 'my-video-player' styles*/ 
    /*so if you use width in percentage its based on the my-video-player width*/ 
} 
.my-video-player .bar {} 
.my-video-player #playbutton {}

這樣你的css將不會與其他樣式相沖突。此外，如果你需要的JavaScript做這樣的：

var myVideoPlayer = { 

    foo: function() { 
    }, 

    bar: function() { 
    } 
};

用法：

myVideoPlayer.foo();

注：使用Javascript命名空間可以通過外部代碼重寫，因此最好的辦法是遵循模塊化JavaScript的格局，但多數民衆贊成超出了這個問題的範圍。

來源

2014-04-23 18:17:12 Havunen

非常感謝Havunen。我會試試它。如果我能成功，我會將其標記爲答案。我仍然可以幫助我解決問題。 –

插件CSS覆蓋的主題和損壞的插件佈局

回答

相關問題