Позиционирование кнопок соц.сетей
-
в общем накопилось много вопросов я их изложу а вы кто что знает помогите 🙂
для начала сайт Arttime.org.ua
тема yoko.1.0.51)Есть заголовок в теме он идет как большая картинка вот под нее хотелось бы поместить кнопки от различных соц сетей но не об этом. Код от них я вставил, но упорядочить не получается — кнопки разбросаны как попало. Хотелось бы чтоб они были по порядку в один ряд. а еще луче было бы если они будут налаживаться на само изображение в левом нижнем углу.
// Новый вопрос - новая тема.
АпельсиноваОгромное спасибо всем кто попытается помочь ..)
Просмотр 9 ответов — с 1 по 9 (всего 9)
-
В двух словах не объяснить. Все эти кнопки ставятся по-разному и выровнять их по одной линии или в один стиль может стать непростой задачей.
Если в общих чертах, то хорошо если они все обернуты каким-либо элементом, списком или блоком, у Вас они в блоке (
<div>), это хорошо. У него нет идентификатора, это плохо, надо добавить, т.е. получиться должно так<div id="socials">. Затем, обращаясь в файле стилей style.css к этому блоку и его дочерним элементам, нужно настраивать их свойства, такие как:float, paddind/margin, width/heightи пр. Как и какие свойства придется править можно узнать тут htmlbook.ru/samcss.Удачи!
получается
я сделал вот так<div id="socials"> <!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script> <script type="text/javascript"> VK.init({apiId: 2855081, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Like block will be --> <div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", height: 20}); </script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="http://arttime.org.ua" data-send="false" data-layout="button_count" data-width="400" data-show-faces="true" data-font="arial"></div> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://arttime.org.ua" data-lang="ru">Твитнуть</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div id="socials">а уже в style.css нужно занести такую строку:
}
div id=»socials» {
тут параметр
}все правильно?)
Есть ошибки:
- Закрывающий
</div>не должен содержать идентификатор, т.е. вот так</div id="socials">не верно! - Селектор в стилях пишется так
#socials {}, Сначала устанавливаются его свойства, а затем свойства дочерних блоков:#vk_like, #fb-root, .twitter-share-button
не получилось, когда применяю свойства ничего не меняется.
в общем соц кнопки помещаю в заголовок header.phpвыглядит так
<?php ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title><?php global $page, $paged; wp_title( '|', true, 'right' ); bloginfo( 'name' ); $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'yoko' ), max( $paged, $page ) ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="clearfix"> <header id="branding"> <nav id="mainnav" class="clearfix"> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- end mainnav --> <?php global $yoko_options; $yoko_settings = get_option( 'yoko_options', $yoko_options ); ?> <hgroup id="site-title"> <?php if( $yoko_settings['custom_logo'] ) : ?> <a href="<?php echo home_url( '/' ); ?>" class="logo"><img src="<?php echo $yoko_settings['custom_logo']; ?>" alt="<?php bloginfo('name'); ?>" /></a> <?php else : ?> <h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> <?php endif; ?> </hgroup><!-- end site-title --> <?php // The header image // Check if this is a post or page, if it has a thumbnail, and if it's a big one if ( is_singular() && current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID , array(1102,350), array('class' => 'headerimage')); elseif ( get_header_image() ) : ?> <img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /><!-- end headerimage --> <?php endif; ?> <div class="clear"></div> <div id="socials"> <vk_like><!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script> <script type="text/javascript"> VK.init({apiId: 2855081, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Like block will be --> <div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", height: 20}); </script></vk_like> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="http://arttime.org.ua" data-send="false" data-layout="button_count" data-width="400" data-show-faces="true" data-font="arial"></div> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://arttime.org.ua" data-lang="ru">Твитнуть</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </header><!-- end header -->а в стайл.цсс вписываю
}
#socials {
..тут параметры
}
#vk_like {
}
}Я еще раз посмотрел Ваш сайт и Ваши комментарии, очевидно, что Вам стоит ознакомиться с информацией по ссылке, что я привел выше.
да да читаю… давно искал подобную информацию.)
в общем стиль к кнопкам применяю не в стайл.цсс а сразу в header.php
получается так что кнопка от контакта с легкостью принимает любое положение на сайте а вот остальные как я не пробывал не реагируют совсем(
сделал так:
<?php ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title><?php global $page, $paged; wp_title( '|', true, 'right' ); bloginfo( 'name' ); $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'yoko' ), max( $paged, $page ) ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="clearfix"> <header id="branding"> <nav id="mainnav" class="clearfix"> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- end mainnav --> <?php global $yoko_options; $yoko_settings = get_option( 'yoko_options', $yoko_options ); ?> <hgroup id="site-title"> <?php if( $yoko_settings['custom_logo'] ) : ?> <a href="<?php echo home_url( '/' ); ?>" class="logo"><img src="<?php echo $yoko_settings['custom_logo']; ?>" alt="<?php bloginfo('name'); ?>" /></a> <?php else : ?> <h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> <?php endif; ?> </hgroup><!-- end site-title --> <?php // The header image // Check if this is a post or page, if it has a thumbnail, and if it's a big one if ( is_singular() && current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID , array(1102,350), array('class' => 'headerimage')); elseif ( get_header_image() ) : ?> <img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /><!-- end headerimage --> <?php endif; ?> <div class="clear"></div> <head> <style type="text/css"> #socials { width: 600px; bottom: 202px; left: 40px; } #fb-root { left: 30px; bottom: 40px; } #vk_like { left: 0px; bottom: 22px; } #twitter-share-button { left: 70px; bottom: 42px; } </style> </head> <div id="socials"> <div id="socials"> <!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script> <script type="text/javascript"> VK.init({apiId: 2855081, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Like block will be --> <div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", height: 20}); </script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="http://arttime.org.ua" data-send="false" data-layout="button_count" data-width="400" data-show-faces="true" data-font="arial"></div> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://arttime.org.ua" data-lang="ru">Твитнуть</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </header><!-- end header -->Тег <head> должен быть один на весь документ. И он должен быть до тега <body>.
спасибо вам) слегка вник в тему но потом удалил эти гнилые кнопки которые вынуждали меня залипать перед монитором
и поставил вот такой простой код
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>color</title> <style type="text/css"> .letter { color: red; /* Цвет символа */ font-size: 200%; /* Размер шрифта */ } P6 { color: RGB(87, 23, 23); font-size: 104%; margin-left: 5%; } </style> </head> <p6>Спасибо Вам если добавите эту статью в:</p6> <div align="center"> <noindex><a onclick="window.open('http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>', 'vkontakte', 'width=626, height=436'); return false;" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/vkontakte.gif" width="88" height="21" title="Поделиться с друзьями ВКонтакте"></a></noindex> <noindex><a onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'facebook', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/facebook.gif" width="76" height="21" title="Поделиться с друзьями в Facebook"></a></noindex> <noindex><a onclick="window.open('http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>', 'mmir', 'width=626, height=436'); return false;" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/mailmir.gif" width="100" height="21" title="Поделиться с друзьями Моего Мира на Mail.ru"></a></noindex> <noindex><a onclick="window.open('http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>', 'yaru', 'width=626, height=436'); return false;" rel="nofollow" href="http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/yaru.gif" width="100" height="21" title="Поделиться с друзьями на Я.ру"></a></noindex> <noindex><a onclick="window.open('http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>', 'lj', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" title="Опубликовать в своем блоге livejournal.com"><img src="<?php bloginfo('template_url'); ?>/images/livejournal.gif" alt="Опубликовать в своем блоге livejournal.com" width="100" height="21"></a></noindex> <noindex><a onclick="window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>', 'odkl', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/odkl.gif" width="69" height="21" title="Поделиться с друзьями в Одноклассниках"></a></noindex> </div>но все еще не могу манипулировать блоком с этими кнопками с текстом все отлично а вот кнопки не поддаются(
- Закрывающий
Просмотр 9 ответов — с 1 по 9 (всего 9)
- Тема «Позиционирование кнопок соц.сетей» закрыта для новых ответов.