Както споменах в предния пост – „очаквайте още нови неща тея дни“. И ето, че се появи новия панел със бутони за споделяни
Задвижван само и изцяло от CSS3(пак за тези които не ползват браузъри, които да поддържат CSS3 – сори :)), елегантен, не-натрапващ се и в същото време лесно достъпен.
Първоначално смятах да го анимирам с jQuery(JavaScript библиотека), обаче в последствие реших да се възползвам(пък и да проверя) предимствата на CSS3. Оказа се че в общи линии анимациите стават изключително лесно което е голям плюс.
Ето кода който зарежда бутоните: [sourcecode language=“php“]
// функцията която зарежда самите бутони – във functions.php
function render_floating_social_buttons() {
$url = urlencode(curPageURL()); ?> // тук се взима и енкоудва URL-то на сегащната страница
Tweet
*:not(script):not(#fb-root) {
padding-bottom: 15px;
margin: 0 auto 15px auto !important;
text-align: center;
border-bottom: 1px solid #ccc;
width: 70px;
display: block;
}
/* за FB Share бутона трябва малко по-специфичен стил, за да се центрира */
#mw_custom_sharing .fb-share-btn .fb_share_count_wrapper { float: none; text-align: center; }
/* Това избира последните два директни наследника на #mw_custom_sharing, които не са script елемент и …
Селектирам последните два, защото знам че почти винаги последния елемент е script */
body #mw_custom_sharing > :nth-last-child(-n+2):not(script):not(#fb-root) {
padding-bottom: 0 !important;
margin: 0 auto 0 auto !important;
border-bottom: none !important;
} [/sourcecode]
Промени бяха направени по следните файлове:
- header.php
- functions.php
- style.css
Линк към ревизията: Цък
