Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][HTML] Jak wycentrować Slider?
Forum PHP.pl > Forum > Przedszkole
edekodkredek
Witam wszystkich forumowiczów smile.gif

Od jakiegoś czasu prowadzę stronę postawioną na wordpressie. Mam mały problem z wyśrodkowaniem slidera.

Oto strona : artfancy.pl

Gdzie szukać rozwiązania?

Oprócz tego co niżej wkleiłem, mogę jeszcze podrzucić metaslider.php
Próbowałem coś zmienić w metaslider.php, ale wyskakiwał mi błąd i strona się crashowała, przez co musiałem poprawiać pliki na serwerze i zmieniać kod do poprzedniej wersji.

Na WP w ustawieniach zaawansowanych slidera mam zaznaczone " wysrodkuj " jednak nie daje to jak widać efektów:(

Z góry dzięki!

Szablon strony głównej:

  1. <?php
  2. /**
  3. * The main template file.
  4. *
  5. * This is the most generic template file in a WordPress theme
  6. * and one of the two required files for a theme (the other being style.css).
  7. * It is used to display a page when nothing more specific matches a query.
  8. * E.g., it puts together the home page when no home.php file exists.
  9. * Learn more: [url="http://codex.wordpress.org/Template_Hierarchy"]http://codex.wordpress.org/Template_Hierarchy[/url]
  10. *
  11. * @package vantage
  12. * @since vantage 1.0
  13. * @license GPL 2.0
  14. */
  15.  
  16. get_header(); ?>
  17.  
  18. <div id="primary" class="content-area">
  19. <div id="content" class="site-content" role="main">
  20.  
  21. <?php if ( have_posts() ) : ?>
  22.  
  23. <?php /* Start the Loop */ ?>
  24. <?php while ( have_posts() ) : the_post(); ?>
  25.  
  26. <?php get_template_part( 'content', get_post_format() ); ?>
  27.  
  28. <?php endwhile; ?>
  29.  
  30. <?php vantage_content_nav( 'nav-below' ); ?>
  31.  
  32. <?php else : ?>
  33.  
  34. <?php get_template_part( 'no-results', 'index' ); ?>
  35.  
  36. <?php endif; ?>
  37.  
  38. </div><!-- #content .site-content -->
  39. </div><!-- #primary .content-area -->
  40.  
  41. <?php get_sidebar(); ?>
  42.  
  43. <?php get_footer(); ?>
kropamk
dla .coin-slider popatrz co można by zmienić wink.gif
edekodkredek
A gdzie to można znaleźć? ;p

Edit:

Znalazłem tylko coin-sliders-style.css (na serwerze oczywiscie ;p ) no i coin-slider.min.js

Jakieś pomysły?? ;p
kropamk
tak, plik to coin-slider-styles.css wink.gif i odszukaj klase .coin-slider i czy jej czegoś nie brakuje aby wyrównać do środka smile.gif
edekodkredek
Hmm.. Co panowie myślicie?

  1. /*
  2. Coin Slider jQuery plugin CSS styles
  3. <a href="http://workshop.rs/projects/coin-slider" target="_blank">http://workshop.rs/projects/coin-slider</a>
  4. */
  5. .coin-slider { zoom: 1; position: relative; }
  6. .coin-slider a{ text-decoration: none; outline: none; border: none; }
  7.  
  8. .cs-active { background-color: #B8C4CF; color: #FFFFFF; }
  9.  
  10. .cs-title {
  11. box-sizing: border-box;
  12. -moz-box-sizing: border-box;
  13. width: 100%;
  14. padding: 10px;
  15. background-color: #000000;
  16. color: #FFFFFF;
  17. }
  18.  
  19. .cs-prev,
  20. .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
  21.  
  22. .cs-buttons {
  23. font-size: 0px;
  24. padding: 10px 0;
  25. line-height: 10px;
  26. float: left;
  27. width: 100%;
  28. text-align: center;
  29. left: auto !important;
  30. margin-left: 0 !important;
  31. }
  32. .cs-buttons a {
  33. margin-left: 5px;
  34. height: 10px;
  35. width: 10px;
  36. border: 1px solid #B8C4CF;
  37. color: #B8C4CF;
  38. text-indent: -1000px;
  39. border-radius: 50%;
  40. background: #CCC;
  41. background: -webkit-linear-gradient(top, #CCCCCC, #F3F3F3);
  42. background: -moz-linear-gradient(top, #CCCCCC, #F3F3F3);
  43. background: -o-linear-gradient(top, #CCCCCC, #F3F3F3);
  44. background: -ms-linear-gradient(top, #CCCCCC, #F3F3F3);
  45. background: linear-gradient(top, #CCCCCC, #F3F3F3);
  46. display: inline-block;
  47. text-align: center;
  48. }
  49. .cs-buttons a.cs-active {
  50. background: #599BDC;
  51. background: -webkit-linear-gradient(top, #599BDC, #3072B3);
  52. background: -moz-linear-gradient(top, #599BDC, #3072B3);
  53. background: -o-linear-gradient(top, #599BDC, #3072B3);
  54. background: -ms-linear-gradient(top, #599BDC, #3072B3);
  55. background: linear-gradient(top, #599BDC, #3072B3);
  56. border-radius: 50%;
  57. box-shadow: 0 0 3px #518CC6;
  58. border: 1px solid #3072B3;
  59. }
kropamk
dobra, napiszę, po prostu dodaj do .coin-slider { zoom: 1; position: relative; } jeszcze margin: 0 auto wink.gif
edekodkredek
Wielkie dzięki! smile.gif
Wiesz.. Rozumiem co miałeś na celu. Próbowałeś wzbudzić we mnie jakąś inicjatywę. Chwała dobrym ludziom! smile.gif Doceniam to, bardzo. Gdybym tylko potrafił kodzić w PHP/HTML spróbowałbym coś sam smile.gif Jeszcze raz, dziękuję!


  1. .coin-slider { zoom: 1; position: relative; margin: 0 auto }

Czy o to chodzilo? wink.gif


Edit:

Jeśli tak.. to nie poskutkowało sad.gif

Ma ktoś jakiś pomysł jak to rozwiązać? smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.