Slider oldalbetöltés

20legendd · 2018. Dec. 2. (V), 17.45

Sziasztok, van egy blog.hu-s blogunk, ahonnan az egyik alap template-et próbálom egy kicsit cifrázni. Ami gondot okoz, az egy JQuery slider beépítése... vagyis hát van egy dolog, amit nem értek, mert alapesetben tök jól működik a slider, csak oldalbetöltésnél olyan, mintha egyszerre a slider összes elemét megmutatná és végig kell kattintani a 4 elemes slidert, hogy rendben beálljon a sorrend. Képekkel illusztrálva:

Oldalbetöltéskor (a hosszabb cím látszik a rövidebb mögött)
https://i.stack.imgur.com/d79SY.png

Alapesetben (végigkattintás után)
https://i.stack.imgur.com/O3b7m.png

Eddig csak CSS-ben és HTML-ben motoszkáltam.

Tudja esetleg valaki, hogy mi okozza a hibát és a megoldás rá?

■

HTML, CSS, JavaScript, Ajax

csirip

Rosszul használod a slidert,

inf · 2018. Dec. 2. (V), 18.16

Rosszul használod a slidert, de kód nélkül nehéz többet mondani.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

<blh:head_required

20legendd · 2018. Dec. 2. (V), 20.59

<blh:head_required />
<blh:body_required />
    <div id="page-wrapper" class="container {blh:post_inside hyphen="1"}">

      <!-- HEADER -->
      
      <header class="coffee_row">
        <div class="coffee_header">
          <div class="coffee_header_headline">
            <center><a href="https://smokingbarrels.blog.hu/"><img src="http://m.blog.hu/sm/smokingbarrels/skins/sb2019/img/sb_title.png" /></center></a>
            <h3><blh:blog_tagline /></h3>
          </div>
        </div>
       <div class="nav_mobile_menu_icon">
          <span id="mobile_nav_btn">
            
         </span>
        </div>
        <div class="coffee_header_line"></div>
        <div class="coffee_header_nav">
          <blh:menu />
          <hr>
          <p></p>
          <blhc:if key="pageType" value="blogcimlap" operator="eq">
                <blh:starred width="980" height="450" limit="4" bjqs_showcontrols="true" 	           bjqs_showmarkers="false" bjqs_centermarkers="false" article-subtitle="true" />
            <center>&#11044; &#11044; &#11044;</center>
            </blhc:if>
          <p></p>
        </div>
      </header>
      <!-- /HEADER -->
    
          
      <!-- CONTENT SIDE -->
        <section id="content-side">
            <div class="coffee_content_side coffee_row">

                <blhc:postloop>

                    <article id="{blh:post_slug}" class="post post_{blh:post_ogg cols="1"} {blh:post_visibility} {blh:post_dtype} {blh:post_increment} coffee_article
                       {blhc:if key="pageType" value="post" operator="ne"}coverpage{/blhc:if}
                       {blhc:if key="pageType" value="post" operator="eq"}postpage {/blhc:if} " lang="{blh:post_lang}">

                    <div class="coffee_post_content">

                            <blhc:if key="pageType" value="post" operator="ne">
                                <div class="coffee_post_img">
                                    <a href="{blh:post_permalink}">
                                        <blh:post_first_img width="310" height="auto" resize="0" />
                                    </a>
                                </div>
                            </blhc:if>

                            <div class="coffee_post_container">
                                <div class="coffee_post_title">
                                    <a href="{blh:post_permalink}">
                                        <blh:post_title/>
                                    </a>
                                </div>

                                <blhc:if key="pageType" value="blogcimlap" operator="ne">
                                    <div class="coffee_post_subtitle">
                                        <blh:post_subtitle/>
                                    </div>
                                </blhc:if>

                              <div class="coffee_post_meta">
                                    By:
                                    <span class="author"><blh:post_author /></span>
                                    <span class="date"><blh:post_date format="Y. M d."/></span>
                                    <span class="edit"><blh:post_edit/></span>
                                </div>

                                <div class="coffee_post_entry">
                                    <blh:post_content length="500" cutoff="..." />
                                </div>
            
                                <div class="share">
                                    <blh:share />
                                </div>

                                <blhc:if key="pageType" value="post" operator="eq">
                                    <blh:post_trbrdf/>
                                    
                                    <blh:post_feedback/>
                                </blhc:if>

                            </div>

                        </div>
                    </article>

                </blhc:postloop>
        
               <!-- pager -->
                <div class="coffee_pager_wrap">
                  <div class="coffee_pager">
                      <blh:pager prelabel="előző oldal" nxtlabel="következő oldal" />
                  </div>
                </div>
                
        <div class="coffee_widget_wrap">
                <div id="<blhc:if key="pageType" value="post" operator="ne">coffee_widgets</blhc:if>"
                    class="coffee_widgets <blhc:if key="pageType" value="post"                 operator="ne">coverpage</blhc:if>
                    <blhc:if key="pageType" value="post" operator="eq">postpage</blhc:if> ">
                    <blh:social />
                    <blh:rightboxes />
                </div>
                </div>

                 

            </div>
        </section>
        <!-- /CONTENT SIDE -->

    </div>
    <!-- /PAGE WRAPPER -->

    <!-- FOOTER -->
    <footer></footer>
    <!-- /FOOTER -->
    <script src="https://m.blog.hu/skins/coffee/js/jquery_dotdotdot_min.js?v=20180914"></script>
    <script src="https://m.blog.hu/skins/coffee/js/coffee_handler.js?v=20180914"></script>
<blh:end />

@import url("https://fonts.googleapis.com/css?family=Suez+One&subset=latin-ext");
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,500,700&subset=latin-ext");
@import url(https://fonts.googleapis.com/css?family=Advent+Pro:400,200,300,500,600,700|Dosis:400,300,500,600,700|Noto+Sans:400,400italic,700,700italic|Playfair+Display:400,400italic,700,700italic|Sorts+Mill+Goudy:400,400italic|Lora:400,400italic,700,700italic|Poiret+One|Arimo:400,700italic,700,400italic|Racing+Sans+One|Grand+Hotel|Just+Me+Again+Down+Here|Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic|Roboto:400,300,300italic,500,400italic,700,500italic,700italic|Oswald:400,700,300|Roboto+Slab:400,300,700|Francois+One|Play:400,700|Merriweather+Sans:400,300,300italic,400italic,700,700italic|Audiowide|Shadows+Into+Light+Two|Righteous|Comfortaa:400,300,700|Playfair+Display+SC:400,400italic,700,700italic|Abril+Fatface|Sacramento&subset=latin,latin-ext);


@-ms-viewport {
    width: device-width;
}

*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
}

body {
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    font-weight: normal;
    color: #1a1a3d;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0) url("http://m.blog.hu/sm/smokingbarrels/skins/sb2019/bg-minipattern2.png") fixed repeat;
}

#slider ul.bjqs-controls li a {
    font: 0/0 monospace;
    color: transparent;

}

.content-wrapper {
    background-color: white;
    width: 985px;
    padding: 70px 15px;
    margin: 0 auto;
}

a, a:hover, a:active {
    color: inherit !important;
    text-decoration: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto
    background-color: white;
}

h1 {
    font-size: 2.5rem;
    font-size: 2em;
    margin: 0.67em 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    margin-top: 0;
    margin-bottom: .5rem;
}

.container, #page-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    padding-left: 15px;
    background-color: white;
}

@media (min-width: 576px) { .container, #page-wrapper { padding-right: 15px; padding-left: 15px; }}
@media (min-width: 768px) { .container, #page-wrapper { padding-right: 15px; padding-left: 15px; }}
@media (min-width: 992px) { .container, #page-wrapper { padding-right: 15px; padding-left: 15px; }}
@media (min-width: 1200px) { .container, #page-wrapper { padding-right: 15px; padding-left: 15px; }}
@media (min-width: 576px) { .container, #page-wrapper { max-width: 100%; }}
@media (min-width: 768px) { .container, #page-wrapper { max-width: 100%; }}
@media (min-width: 992px) { .container, #page-wrapper { max-width: 100%; }}
@media (min-width: 1200px) { .container, #page-wrapper { width: 1140px; max-width: 100%; }}

.container-fluid, footer {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) { .container-fluid, footer { padding-right: 15px; padding-left: 15px; }}
@media (min-width: 768px) { .container-fluid, footer { padding-right: 15px; padding-left: 15px; }}
@media (min-width: 992px) { .container-fluid, footer { padding-right: 15px; padding-left: 15px; }}
@media (min-width: 1200px) { .container-fluid, footer { padding-right: 15px; padding-left: 15px; }}

.row, .coffee_row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
}

header.coffee_row {
    margin-right: 15px;
    margin-left: 15px;
}


.post-inside #content-side{
    margin-left:15px;
    margin-right:15px;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters > .col, .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.col-12, .coffee_header, .coffee_header_nav, .coffee_header_line, .coffee_article.coverpage .coffee_post_img,
.coffee_article.coverpage .coffee_post_container, .tagcloud, .coffee_article.postpage .coffee_post_container,
.coffee_article.postpage .post-bottom, .coffee_widgets.coverpage, .coffee_widgets .box, .coffee_pager, #pager,
.col-sm-6, .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
#coffee_widgets_row #coffee_widgets_column_3, .col-sm-12, .coffee_article.postpage, .coffee_widgets.postpage, .col-lg-4,
.coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
#coffee_widgets_row #coffee_widgets_column_3, .coffee_widgets.postpage, .col-lg-8, .coffee_article.postpage {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 200px) {
    .col-12, .coffee_header, .coffee_header_nav, .coffee_header_line, .coffee_article.coverpage .coffee_post_img,
    .coffee_article.coverpage .coffee_post_container, .tagcloud, .coffee_article.postpage .coffee_post_container,
    .coffee_article.postpage .post-bottom, .coffee_widgets.coverpage, .coffee_widgets .box, .coffee_pager, #pager,
    .col-sm-6, .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
    #coffee_widgets_row #coffee_widgets_column_3, .col-sm-12, .coffee_article.postpage, .coffee_widgets.postpage,
    .col-lg-4, .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
    #coffee_widgets_row #coffee_widgets_column_3, .coffee_widgets.postpage, .col-lg-8, .coffee_article.postpage {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 768px) {
    .col-12, .coffee_header, .coffee_header_nav, .coffee_header_line, .coffee_article.coverpage .coffee_post_img,
    .coffee_article.coverpage .coffee_post_container, .tagcloud, .coffee_article.postpage .coffee_post_container,
    .coffee_article.postpage .post-bottom, .coffee_widgets.coverpage, .coffee_widgets .box, .coffee_pager, #pager,
    .col-sm-6, .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
    #coffee_widgets_row #coffee_widgets_column_3, .col-sm-12, .coffee_article.postpage, .coffee_widgets.postpage,
    .col-lg-4, .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
    #coffee_widgets_row #coffee_widgets_column_3, .coffee_widgets.postpage, .col-lg-8, .coffee_article.postpage {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 992px) {
    .col-12, .coffee_header, .coffee_header_nav, .coffee_header_line, .coffee_article.coverpage .coffee_post_img,
    .coffee_article.coverpage .coffee_post_container, .tagcloud, .coffee_article.postpage .coffee_post_container,
    .coffee_article.postpage .post-bottom, .coffee_widgets.coverpage, .coffee_widgets .box, .coffee_pager, #pager,
    .col-sm-6, .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
    #coffee_widgets_row #coffee_widgets_column_3, .col-sm-12, .coffee_article.postpage, .coffee_widgets.postpage, .col-lg-4,
    .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
    #coffee_widgets_row #coffee_widgets_column_3, .coffee_widgets.postpage, .col-lg-8, .coffee_article.postpage {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 1200px) {
    .col-12, .coffee_header, .coffee_header_nav, .coffee_header_line, .coffee_article.coverpage .coffee_post_img,
    .coffee_article.coverpage .coffee_post_container, .tagcloud, .coffee_article.postpage .coffee_post_container,
    .coffee_article.postpage .post-bottom, .coffee_widgets.coverpage, .coffee_widgets .box, .coffee_pager, #pager,
    .col-sm-6, .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
    #coffee_widgets_row #coffee_widgets_column_3, .col-sm-12, .coffee_article.postpage, .coffee_widgets.postpage, .col-lg-4,
    .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2,
    #coffee_widgets_row #coffee_widgets_column_3, .coffee_widgets.postpage, .col-lg-8, .coffee_article.postpage {
        padding-right: 15px;
        padding-left: 15px;
    }
}

.col-12, .coffee_header, .coffee_header_nav, .coffee_header_line, .coffee_article.coverpage .coffee_post_img,
.coffee_article.coverpage .coffee_post_container, .tagcloud, .coffee_article.postpage .coffee_post_container,
.coffee_article.postpage .post-bottom, .coffee_widgets.coverpage, .coffee_widgets .box, .coffee_pager, #pager {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 576px) {
  .col-sm-6, .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1, #coffee_widgets_row #coffee_widgets_column_2, #coffee_widgets_row #coffee_widgets_column_3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

  .col-sm-12, .coffee_article.postpage, .coffee_widgets.postpage {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .col-lg-4, .coffee_article.coverpage, #coffee_widgets_row #coffee_widgets_column_1,
    #coffee_widgets_row #coffee_widgets_column_2, #coffee_widgets_row #coffee_widgets_column_3,
    .post-list .coffee_widgets.postpage {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.33%;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    .col-lg-8, .coffee_article.postpage {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

@media( min-width:992px ) {
    .post-inside .col-lg-4, .post-inside .coffee_article.coverpage, .post-inside #coffee_widgets_row #coffee_widgets_column_1,
    .post-inside #coffee_widgets_row #coffee_widgets_column_2, .post-inside #coffee_widgets_row #coffee_widgets_column_3,
    .post-inside .coffee_widgets.postpage {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

      .post-inside .col-lg-8, .post-inside .coffee_article.postpage {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        }
    }

.btn, .coffee_widgets .box select {
    display: inline-block;
    font-weight: normal;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.btn:focus, .coffee_widgets .box select:focus, .btn:hover, .coffee_widgets .box select:hover {
    text-decoration: none;
}

.btn:focus, .coffee_widgets .box select:focus, .btn.focus, .coffee_widgets .box select.focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);
    box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);
}

.btn.disabled, .coffee_widgets .box select.disabled, .btn:disabled, .coffee_widgets .box select:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.btn:active, .coffee_widgets .box select:active, .btn.active, .coffee_widgets .box select.active {
    background-image: none;
}

.btn-secondary, .coffee_post_container .commentsBg .comment-option-fields input[type="submit"], .coffee_widgets .box input[type="submit"], .coffee_widgets .box select {
    color: #292b2c;
    background-color: #fff;
    border-color: #ccc;
}

.btn-secondary:hover, .coffee_post_container .commentsBg .comment-option-fields input[type="submit"]:hover, .coffee_widgets .box input[type="submit"]:hover, .coffee_widgets .box select:hover {
    color: #292b2c;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-secondary:focus, .coffee_post_container .commentsBg .comment-option-fields input[type="submit"]:focus,
.coffee_widgets .box input[type="submit"]:focus, .coffee_widgets .box select:focus, .btn-secondary.focus,
.coffee_post_container .commentsBg .comment-option-fields input.focus[type="submit"], .coffee_widgets .box input.focus[type="submit"],
.coffee_widgets .box select.focus {
    -webkit-box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
    box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
}

.btn-secondary.disabled, .coffee_post_container .commentsBg .comment-option-fields input.disabled[type="submit"],
.coffee_widgets .box input.disabled[type="submit"], .coffee_widgets .box select.disabled, .btn-secondary:disabled,
.coffee_post_container .commentsBg .comment-option-fields input[type="submit"]:disabled, .coffee_widgets .box input[type="submit"]:disabled,
.coffee_widgets .box select:disabled {
    background-color: #fff;
    border-color: #ccc;
}

.btn-secondary:active, .coffee_post_container .commentsBg .comment-option-fields input[type="submit"]:active,
.coffee_widgets .box input[type="submit"]:active, .coffee_widgets .box select:active, .btn-secondary.active,
.coffee_post_container .commentsBg .comment-option-fields input.active[type="submit"], .coffee_widgets .box input.active[type="submit"],
.coffee_widgets .box select.active, .btn-secondary .show > .btn-secondary.dropdown-toggle,
.coffee_post_container .commentsBg .comment-option-fields input[type="submit"] .show > .btn-secondary.dropdown-toggle,
.coffee_widgets .box input[type="submit"] .show > .btn-secondary.dropdown-toggle,
.coffee_widgets .box select .show > .btn-secondary.dropdown-toggle,
.btn-secondary .coffee_post_container .commentsBg .comment-option-fields .show > input.dropdown-toggle[type="submit"],
.coffee_post_container .commentsBg .comment-option-fields .btn-secondary .show > input.dropdown-toggle[type="submit"],
.coffee_post_container .commentsBg .comment-option-fields input[type="submit"] .show > input.dropdown-toggle[type="submit"],
.coffee_widgets .box input[type="submit"] .coffee_post_container .commentsBg .comment-option-fields .show > input.dropdown-toggle[type="submit"],
.coffee_widgets .box select .coffee_post_container .commentsBg .comment-option-fields .show > input.dropdown-toggle[type="submit"],
.btn-secondary .coffee_widgets .box .show > input.dropdown-toggle[type="submit"],
.coffee_widgets .box .btn-secondary .show > input.dropdown-toggle[type="submit"],
.coffee_post_container .commentsBg .comment-option-fields input[type="submit"] .coffee_widgets .box .show > input.dropdown-toggle[type="submit"],
.coffee_widgets .box input[type="submit"] .show > input.dropdown-toggle[type="submit"],
.coffee_widgets .box select .show > input.dropdown-toggle[type="submit"],
.btn-secondary .coffee_widgets .box .show > select.dropdown-toggle,
.coffee_widgets .box .btn-secondary .show > select.dropdown-toggle,
.coffee_post_container .commentsBg .comment-option-fields input[type="submit"] .coffee_widgets .box .show > select.dropdown-toggle,
.coffee_widgets .box input[type="submit"] .show > select.dropdown-toggle,
.coffee_widgets .box select .show > select.dropdown-toggle {
    color: #292b2c;
    background-color: #e6e6e6;
    background-image: none;
    border-color: #adadad;
}

.form-control, .coffee_widgets .box input[type="text"] {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

.form-control:focus, .coffee_widgets .box input[type="text"]:focus,
.form-control:active, .coffee_widgets .box input[type="text"]:active,
.form-control:hover, .coffee_widgets .box input[type="text"]:hover {
    z-index: 3;
}

.input-group-addon,
.input-group-btn,
.form-control,
.coffee_widgets .box input[type="text"] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}



/* Theme */
/* Theme header */
.coffee_header {
    height: 400px;
    width: 1200px;
    background-color: gray;
    background: url(http://m.blog.hu/sm/smokingbarrels/skins/sb2019/bg-final.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (min-width: 576px) { .coffee_header { height: 200px; }}
@media (min-width: 768px) { .coffee_header { height: 230px; }}
@media (min-width: 992px) { .coffee_header { height: 260px; }}


.coffee_header_headline {
    text-align: center;
    max-width: 1100px;
}

.coffee_header_headline h1 {
    font-family: 'Suez One', serif;
    color: rgb(255,255,255);
    font-size: 36pt;
}

@media (max-width: 576px) { .coffee_header_headline h1 { font-size: 20pt; }}

.coffee_header_headline h3 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-style: italic;
    color: rgb(255,255,255);
}

/* Theme navbar (menu) */
.coffee_header_nav {
    color: #0f0f22;
    background-color: white;
}

.coffee_header_nav ul {
    text-align: center;
    padding: 0px;
}
.coffee_header_nav ul li {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #0f0f22;
    background-color: white;
    margin-right: -3px;
    margin-left: -3px;
    padding: 0px 15px;
    list-style-type: none;
    display: inline-block;
    font-size: 1.250rem;
    line-height: 1.375em;
}

@media (max-width: 576px) { .coffee_header_nav ul li { display: block; padding: 10px 15px; }}

.coffee_header_nav ul li a, .coffee_header_nav ul li a:hover, .coffee_header_nav ul li a:active {
    color: red;
}

.coffee_header_line {
    padding: 0px;
    height: 1px;
    background-color: white;
    position: relative;
    top: 28px;
    z-index: -10;
}

@media (max-width: 576px) { .coffee_header_line { top: -28px; }}

.nav_mobile_menu_icon {
    width: 39px;
    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}

.nav_mobile_menu_icon span:before {
    content: url(//m.blog.hu/skins/coffee/img/coffee_menu.svg);
    font-weight: 700;
    font-size: 27px;
    background-color: white;
    position: relative;
    top: 3px;
    cursor: pointer;
}


@media (min-width: 576px) { .nav_mobile_menu_icon { display: none !important; } }
@media (max-width: 576px) { .nav_mobile_menu_icon { margin-top: 6px; } }
@media (min-width: 576px) { #menu { display: block !important; } }

/* SLIDER */

#slider {
    background: #b00538;
    width: 1050px;
    height: 400px;
    margin: 0 0 20px;
    padding: 0px;
    border-radius: 0px;
}

    #slider:hover .article-data {
        height: auto;
        overflow: visible;
    }

    #slider:hover img {
      color: white;
        opacity: 0.7;
    }

#slider .article-infos,
#slider .lead {
    display: none;
}

#slider .bjqs {
    display: inline-block;
    position: relative;
    width: 1050px;
    height: 400px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

    #slider .bjqs li {
        display: block;
        position: absolute;
      background-color: #b00538;
        top: 0;
        left: 0;
        width: 770px;
        height: 410px;
    }

#slider .article-image {
    display: block;
    background: #0f0f22;
    position: relative;
    width: 1023px;
    height: 450px;
}

#slider img {
    position: absolute;
    bottom: 0;
    height: auto;
    left: 0;
    margin: auto;
    right: 0;
    top: 0;
    width: auto
            transition: all 0.2s ease-in 0s;
    -webkit-transition: all 0.2s ease-in 0s;

}


#slider .article-data {
    background: transparent;
    position: relative;
    bottom: 135px;
    left: 0px;
    font-size: 30px;
    padding: 0;
    width: auto;
    overflow: hidden;
    height: auto;
}

    #slider .article-data h1 {
        padding: 1px 15px 15px;
      background: #b00538;
      color: white;
        font-size: 15px;
        line-height: 30px;
        text-align: left;
      font-weight: bold;
        overflow: visible:
        word-break: break-all;
        word-break: break-word;
      width: max-content;
        height: 30px;
    }

    #slider .article-data h1 a {
        display: inline-block;
        color: auto;
    }

    #slider .article-data h2 {
      position: relative;
      top: -8px;
      left: 0px;
        padding: 0px 15px 15px;
      background: white;
      color: #1a1a3d;
        font-size: 32px;
        line-height: 50px;
        text-align: left;
      font-weight: bold;
        overflow: visible:
        word-break: break-all;
        word-break: break-word;
        width: max-content;
        height: 50px;
    }

    #slider .article-data h2 a {
        display: block;
        color: auto;
    }

#slider .bjqs-markers {
    display: block;
    position: absolute;
    top: 35px;
    right: -345px;
    width: 345px;
    z-index: 5;
}

    #slider .bjqs-markers li { 
        background: #cfcfcf;
        font-family: Playfair Display;
        font-size: 20px;
        line-height: 24px;
        margin: 0 0 2px;
    }

    #slider .bjqs-markers li + li + li + li + li {
        display: none;
    }

        #slider .bjqs-markers li.active-marker {
            background: #353535;
        }

    #slider .bjqs-markers a {
        background: rgba(0, 0, 0, 0.12);
        position: relative;
        display: block;
        padding: 15px;
        z-index: 2;
    }

        #slider .bjqs-markers a:hover {
            background: #b7b5b5;
            color: #000;
        }

        #slider .bjqs-markers .active-marker a {
            background: #353535;
            color: #fff;
        }

    #slider .bjqs-markers .active-marker {
        position: relative;
    }

    #slider .bjqs-markers .active-marker:after {
        position: absolute;
        content: "";
        right: 100%;
        top: 50%;
        border: solid transparent;
        height: 0;
        width: 0;
        pointer-events: none;
        border-color: transparent;
        border-right-color: #353535;
        border-width: 28px;
        margin-top: -28px;
    }

#slider ul.bjqs-controls {
    display: block;
    position: relative;
    top: -350px;
    width: 100%;
    font-family: Arimo;
    z-index: 10;
}

    #slider ul.bjqs-controls li {
        position: absolute;
        font-size: 65px
        color: white;
    }

        #slider ul.bjqs-controls li a {
            background: #b00538;
          position: relative;
          padding: 0px 0px 58px;
            display: block;
            color: white;
            font-size: 55px;
            line-height: 50px;
          font-weight: bold;
            opacity: 0.9;
            font-family: "Open Sans", sans-serif;
        }

            .bjqs-prev a:after,
            .bjqs-next a:after {
                content: none;
            }

    #slider ul.bjqs-controls .bjqs-next {
      background: #b00538;
      color: white;
        right: 10px;
    }

    #slider ul.bjqs-controls .bjqs-prev {
      background:  #b00538;
      color: white;
        left: 10px;
    }

/* Theme coverpage */
.coffee_article.coverpage {
    padding-top: 0.25rem;
    padding-right: 1rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem
    background-color: white;
}

.coffee_article.coverpage p {
    margin-top: 0px;
}

.coffee_article.coverpage h1, .coffee_article.coverpage h2, .coffee_article.coverpage h3,
.coffee_article.coverpage h4, .coffee_article.coverpage h5, .coffee_article.coverpage h6 {
    font-family: 'Ubuntu', sans-serif;
    color: #1a1a3d;
    font-size: 12pt;
    font-weight: 400;
}

.coffee_article.coverpage:hover .coffee_post_img .thumbnail {
    -ms-transform: scale(1.13, 1.13);
    -webkit-transform: scale(1.13, 1.13);
    transform: scale(1.13, 1.13);
    transition: 1.5s;
}

.coffee_article.coverpage:hover .coffee_post_title {
    margin-left: 10px;
    transition: 1.5s;
}

.coffee_article.coverpage .coffee_post_img {
    padding: 0;
    height: 200px;
    position: relative;
    overflow: hidden;
    background-color: #f8f8f8;
}

.coffee_article.coverpage .coffee_post_img .thumbnail {
    width: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.coffee_article.coverpage .coffee_post_img .thumbnail:hover {
    -ms-transform: scale(1.13, 1.13);
    -webkit-transform: scale(1.13, 1.13);
    transform: scale(1.13, 1.13);
    transition: 1.5s;
}

.coffee_article.coverpage .coffee_post_container {
    padding: 1rem;
    background-color: rgb(250,250,250);
    height: 185px;
    overflow: hidden;
}

.coffee_article.coverpage .coffee_post_container .coffee_post_entry img,
.coffee_article.coverpage .coffee_post_container .coffee_post_entry .blh-gallery,
.coffee_article.coverpage .coffee_post_container .coffee_post_entry iframe {
    display: none !important;
}



.coffee_article.coverpage .coffee_post_title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1a3d;
    font-size: 1.125rem;
    line-height: 1.313rem;
}




.coffee_article.coverpage .coffee_post_meta {
    margin-top: 5px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    color: #b53c5c;
    font-size: 0.75rem;
}



.coffee_article.coverpage .coffee_post_meta img {
    display: none;
}

.coffee_article.coverpage .coffee_post_entry p:empty {
    display: none;
}

/* Theme tag page */
.tagcloud {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #393939;
}

.tagcloud .tagcloud-label {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #393939;
}

.tagcloud span {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    text-transform: none;
    color: #292b2c;
}

/* Theme archive list page */
.archive-list {
    margin-bottom: 40px !important;
}

/* Theme postpage */
.coffee_article.postpage {
    padding-top: 1.5rem;
    padding-right: 0;
    padding-bottom: 1.5rem;
    padding-left: 0;
    background-color: white;
}

.coffee_article.postpage ul li {
    list-style-type: disc;
}

.coffee_article.postpage .coffee_post_container {
    padding: 0;
    background-color: white;
}

@media (max-width: 576px) { .coffee_article.postpage .coffee_post_container { padding: 0px; } }

.coffee_article.postpage .coffee_post_container .coffee_post_entry img,
.coffee_article.postpage .coffee_post_container .coffee_post_entry .blh-gallery {
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
}

.coffee_article.postpage .coffee_post_container .coffee_post_entry .blh-gallery a:hover:after { width: 253px; }
.coffee_article.postpage .coffee_post_container .coffee_post_entry .blh-gallery a:after { height: 30px; }

.coffee_article.postpage .coffee_post_title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1a3d;
    font-size: 1.250rem;
    line-height: 2.625rem;
    margin-bottom: 10px;
    margin-top: 7px;
}

.coffee_article.postpage .coffee_post_subtitle {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    color: #b3244c;
    font-size: 2.500rem;
    line-height: 1.375rem;
}

.coffee_article.postpage .coffee_post_meta {
    margin-top: 15px;
    margin-bottom: 25px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    color: #c6c6c6;
    font-size: 1rem;
    line-height: 1.188rem;
    font-style: italic;
}

.coffee_article.postpage .coffee_post_entry {
    font-family: 'Ubuntu', sans-serif;
    font-weight: normal;
    color: #1a1a3d;
    font-size: 1.063rem;
    line-height: 1.563rem;
}

.coffee_article.postpage .coffee_post_entry address {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 100;
    color: #1a1a3d;
    font-size: 1rem;
    line-height: 1.125rem;
}

.coffee_article.postpage .coffee_post_entry h1 {
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1a3d;
    font-size: 1.875rem;
    line-height: 2rem;
}

.coffee_article.postpage .coffee_post_entry h2 {
    font-weight: bold;
    text-transform: uppercase;
    color: #1a1a3d;
    font-size: 1.563rem;
    line-height: 1.688rem;
}

.coffee_article.postpage .coffee_post_entry h3 {
    font-weight: bold;
    text-transform: uppercase;
    color: #1a1a3d;
    font-size: 1.250rem;
    line-height: 1.375rem;
}

.coffee_article.postpage .coffee_post_entry h4 {
    font-weight: bold;
    text-transform: uppercase;
    color: #1a1a3d;
    font-size: 1rem;
    line-height: 1.125rem;
}

.coffee_article.postpage .coffee_post_entry h5 {
    font-weight: bold;
    text-transform: uppercase;
    color: #1a1a3d;
    font-size: 0.750rem;
    line-height: 0.875rem;
}

.coffee_article.postpage .coffee_post_entry h6 {
    font-weight: normal;
    text-transform: uppercase;
    color: #1a1a3d;
    font-size: 0.625rem;
    line-height: 0.750rem;
}



.coffee_article.postpage .coffee_post_entry .frame {
    background: #A0A0A0;
    border: 0px;
    margin: 25px 0;
    padding: 10px 30px 10px 30px;
    color: white;
    font-style: italic;
}

.coffee_article.postpage .coffee_post_entry blockquote {
    position: relative;
    margin: 40px 10px;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
    padding: 25px 10px 25px 10px;
    font-style: italic;
    font-weight: bold;
}

.coffee_article.postpage .coffee_post_entry blockquote p {
    padding-left: 40px;
}

.coffee_article.postpage .coffee_post_entry blockquote:before {
        color: #777777;
    content: "\201D";
    font-size: 5rem;
    background-color: white;
    position: relative;
    float: right;
    top: -27px;
    right: -10px;
    padding-left: 10px;
    padding-right: 0px;
    line-height: 40px;
}

.coffee_article.postpage .coffee_post_entry blockquote:after {
    color: red;
    background-color: white;
    content: "\201D";
    font-size: 5rem;
    position: relative;
    padding-left: 0px;
    padding-right: 25px;
    left: -12px;
    bottom: -45px;
    line-height: 50px;
    float: left;
    margin-top: -25px;
}

.coffee_article.postpage .post-bottom {
    margin-top: 30px;
    padding-top: 1rem;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}

.coffee_article.postpage .post-bottom .comments {
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    top: -15px;
}

.coffee_article.postpage .post-bottom .blh_share_cont {
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #E1E1E1;
}

.coffee_article.postpage .tags {
    margin-top: 30px;
    padding-top: 1rem;
    padding-left: 0;
    padding-right: 0;
    color: #c6c6c6;
    font-style: italic;
}

.coffee_article.postpage .tags a {
    margin-right: 5px;
}

/* Theme content */
.post .entry img, .post img {
    max-height: none;
    max-width: none
    background-color: white;
}

div.post img.imgnotext, article.post img.imgnotext, .post div.imgnotext {
    max-width: 100%;
}

.coffee_post_entry {
    margin-top: 6px;
    font-family: 'Ubuntu', sans-serif;
    color: rgb(57,57,57);
    font-size: 0.938rem;
    line-height: 1.125rem;
    font-weight: 100;
}


/* theme single post under content*/
.coffee_post_container .related h3 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #525252;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.250rem;

}

.coffee_post_container .related .title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    color: #525252;
    text-align: center;
    font-size: 0.938rem;
    line-height: 1.063rem;

}

.coffee_post_container .related ul {
    margin: auto;
    display: table;
    padding: 30px;
}

@media (max-width: 576px) { .coffee_post_container .related ul { display: grid; } }

.coffee_post_container .related ul li {
    list-style-type: none !important;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    color: #393939;
    width: inherit;
    margin: 0 50px 0 0;
    max-width: 200px;
}

@media (max-width: 576px) { .coffee_post_container .related ul li { margin: auto; margin-top: 15px; } }

.coffee_post_container .related ul li img {
    border-radius: 0px;
    height: initial;
    width: 100px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}

.coffee_post_container .comment-tracback-url, .coffee_post_container .comment.comment-tracback-url, .coffee_post_container h3.comment {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #393939;
    text-align: center;
}

.coffee_post_container .user-info-fields {
    background-color: #f2f2f2;
    padding: 0px;
}

@media (max-width: 576px) { .coffee_post_container .user-info-fields { background-color: transparent; } }

.coffee_post_container .user-info-fields .title-user {
    display: none;
}

.coffee_post_container .user-info-fields .info .avatar-outer-border-small, .coffee_post_container .user-info-fields .info .avatar-inner-border-small {
    width: auto;
    height: auto;
    background: transparent;
}

@media (max-width: 576px) { .coffee_post_container .user-info-fields .info .avatar-outer-border-small { float: none; }}

.coffee_post_container .user-info-fields .info .avatar-mask-small {
    padding: 0;
}

.coffee_post_container .user-info-fields .info .avatar-mask-small a {
    position: relative;
}

.coffee_post_container .user-info-fields .info .avatar-mask-small a img {
    width: 50px;
    height: initial;
    border-radius: 25px;
    position: absolute;
    top: -11px;
    left: -8px;
}

@media (max-width: 576px) { .coffee_post_container .user-info-fields .info .avatar-mask-small a img { position: inherit; margin-top: 20px; }}

.coffee_post_container .user-info-fields .info .info-inner select {
    margin-top: 4px;
    margin-bottom: 8px;
    border-radius: 4px;
    background-color: #373737;
    color: white;
    padding: 2px;
    font-size: 0.75rem;
}

@media (max-width: 576px) {
    .coffee_post_container .user-info-fields .info .info-inner select {
        display: inherit;
        margin: auto;
        margin-top: -9px;
        margin-bottom: 4px;
    }
}

@media (min-width: 576px) {
    .coffee_post_container .user-info-fields .info .info-inner select {
        float: left;
        padding: 0;
        margin-left: 30px;
    }
}

.coffee_post_container .user-info-fields .info .info-inner a {
font-family: 'Ubuntu', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: 0.82rem;
margin-top: 3px;
margin-left: 6px;
}

@media (min-width: 576px) { .coffee_post_container .user-info-fields .info .info-inner a { float: right; }}

.coffee_post_container .user-info-fields .info .info-inner:nth-child(2) {
    margin-right: 16px;
}

@media (max-width: 576px) { .coffee_post_container .user-info-fields .info .info-inner:nth-child(2) { margin-bottom: 14px; margin-right: 48px; }}

.coffee_post_container .commentsBg.comments-container {
    text-align: left !important;
}

.coffee_post_container .commentsBg.comments-container h1 {
    font-size: .95rem;
    background-color: #f2f2f2;
    padding: 9px;
}

.coffee_post_container .commentsBg.comments-container .commentHeadURL {
    display: none;
}

@media (min-width: 576px) { .coffee_post_container .commentsBg.comments-container .commentTime { float: right !important; } }
@media (max-width: 576px) { .coffee_post_container .commentsBg.comments-container .commentTime {  float: none !important; } }
@media (min-width: 576px) { .coffee_post_container .commentsBg.comments-container .commentTime .commentTime { float: right !important; } }
@media (max-width: 576px) { .coffee_post_container .commentsBg.comments-container .commentTime .commentTime { float: none !important; } }

.coffee_post_container .commentsBg.comments-container .commentText {
    border: 2px solid #f2f2f2;
}

@media (max-width: 576px) { .coffee_post_container .commentsBg.comments-container .commentText { margin-top: 10px; } }

@media (min-width: 576px) {
    .coffee_post_container .commentsBg.comments-container .commentText {
        margin-left: 60px;
        margin-top: -10px;
        padding: 5px 10px 10px 10px;
    }
}

.coffee_post_container .commentsBg {
    margin-top: 15px;
    margin-bottom: 60px;
    text-align: center;
}

.coffee_post_container .commentsBg .comment-text-fields .label {
    display: none;
}

.coffee_post_container .commentsBg .comment-text-fields textarea {
    border-radius: 3px;
    width: 100% !important;
    border: 2px solid #f2f2f2;
    outline: none;
    padding: 10px;
    font-size: 1rem;
    font-family: 'Ubuntu', sans-serif;
}

@media (max-width: 576px) { .coffee_post_container .commentsBg .comment-text-fields textarea { margin-left: 0px !important; }}

@media (min-width: 576px) {
    .coffee_post_container .commentsBg .comment-text-fields textarea {
        margin-left: 26px;
        margin-top: -13px;
        border-right-width: 4px;
    }
}

.coffee_post_container .commentsBg .comment span {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.coffee_post_container .commentsBg .comment-option-fields {
    margin-top: -10px;
}

.coffee_post_container .commentsBg .comment-option-fields input[type="submit"] {
    padding: 5px 10px;
    font-size: 0.9rem;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    color: white;
    background-color: #373737;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.coffee_post_container .commentsBg .comment-option-fields input[type="submit"]:hover {
    background-color: #C5C5C5;
}

.coffee_post_container #followinglinks {
    text-align: center;
    margin-top: -30px;
}

.coffee_post_container .comment-disclaimer {
    font-size: 11px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 40px !important;
    max-width: 500px;
    margin: auto;
}

.coffee_post_container #comment_container {
    margin-bottom: 60px;
}

.coffee_post_container #comment_container .avatar-content .avatar-outer-border, .coffee_post_container #comment_container .avatar-content .avatar-inner-border {
    background: transparent;
}

.coffee_post_container #comment_container .avatar-mask img {
    margin-top: -15px;
    width: 56px;
    height: inherit;
    margin-left: -8px;
    border-radius: 35px;
}
@media (max-width: 576px) { .coffee_post_container #comment_container .avatar-mask img { margin-top: -16px; }}

.coffee_post_container #comment_container .commentFooter {
    margin-top: -10px;
    margin-bottom: 30px;
    font-size: 0.79rem;
}

/* Theme social icons */
.social-box {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 0;
}

/* Theme widgets */
#coffee_widgets_row {
    margin: 12px 0 0 0;
    padding: 0px;
}

.coffee_widgets.coverpage {
  background-color: #F0F0F0;
  padding-top: 0.5rem;
  padding-right: 0;
  padding-bottom: 0.5rem;
  padding-left: 0;

}

  .coffee_widgets.coverpage .widget_ad_mix {
    margin-top: -15px;
}

.coffee_widgets.postpage {
  background-color: white;
  padding-top: 0.5rem;
  padding-right: 0;
  padding-bottom: 0.5rem;
  padding-left: 0;
}

@media (min-width: 1200px) { .coffee_widgets.postpage {  padding-left: 25px; }}

.coffee_widgets {
    font-family: 'Ubuntu', sans-serif;
    color: #393939;
}

.coffee_widgets .box {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.coffee_widgets .box h3 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #393939;
}

.coffee_widgets .box p {
    font-size: 0.92rem;
}

.coffee_widgets .box input[type="submit"] {
    padding: 5px 10px;
    font-size: 0.9rem;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    color: white;
    background-color: #373737;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.coffee_widgets .box input[type="submit"]:hover {
    background-color: #C5C5C5;
}

.coffee_widgets .box input[type="text"] {
    font-size: 0.9rem;
    font-family: 'Ubuntu', sans-serif;
    background-color: #DBDBDB;
    width: 100%;
    height: 35px;
    padding-left: 10px;
    border: none;
    border-radius: 3px;
}

.coffee_widgets .box input[type="text"]:hover, .coffee_widgets .box input[type="text"]:active, .coffee_widgets .box input[type="text"]:focus {
    border-color: #373737;
    background-color: #DBDBDB;
}

.coffee_widgets .box ul {
    padding-left: 0px;
    padding-bottom: 5px;
    margin-bottom: 0px;
}

.coffee_widgets .box ul li {
    list-style-type: none;
}

.coffee_widgets .box ol {
    padding-left: 15px;
    padding-bottom: 5px;
    margin-bottom: 0px;
}

.coffee_widgets .box #promobox_container a:hover, .coffee_widgets .box #promobox_container a:focus {
    text-decoration: none;
    color: #303030 !important;
}

.coffee_widgets .box #promobox_container strong {
    font-weight: 400;
    font-size: 0.8rem;
    margin-top: 5px;
    padding: 1px 7px;
    background-color: #BDBDBD;
}

.coffee_widgets .box select {
    margin: 10px 0px 5px 0px;
    padding: 5px 10px;
    font-size: 0.9rem !important;
    font-family: 'Ubuntu', sans-serif;
    color: white;
    background-color: #373737;
    cursor: pointer;
}

.coffee_widgets .widget_cclicence .inbox p {
    margin-top: -15px;
    font-size: 0.87rem;
}

.coffee_widgets .widget_facebook {
    text-align: left;
    margin: auto;
    overflow: hidden;
}


.post-list .coffee_widget_wrap{
    width: 100%;
    padding: 0 15px;
}

.post-inside .coffee_widget_wrap{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;

}

@media (max-width: 991px) { .post-inside .coffee_widget_wrap{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; } }

@media (max-width: 991px) { .post-inside .coffee_widget{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; } }




/* Theme pager */
.post-list .coffee_pager_wrap{
    width: 100%;
    padding: 0 15px;
}

.post-inside .coffee_pager_wrap{
    display: none;
}

.coffee_pager {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    padding-left: 0;
    padding-right: 0;
    height: 85px;
    background-color: gray;
    background: url(http://m.blog.hu/sm/smokingbarrels/skins/sb2019/bg-final.png);
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    display: flex;
    align-items: center;
}

#pager {
    padding-top: 0.25rem;
    padding-right: 110px;
    padding-bottom: 0.25rem;
    padding-left: 110px;
    background-color: rgba(255, 255, 255, 0.5);
}

#pager .next { margin-left: 0.5rem; float: right; }
#pager .prev { margin-right: 0.5rem; float: left; }

@media (max-width: 576px) { #pager { padding-right: 30px; padding-left: 30px; }}
@media (max-width: 350px) { #pager { font-size: 0.7rem; }}

/* Theme footer */
footer {
    min-height: 10px;
    background-color: black;
}

/* ADVERTIKUM */
.blh-billboard-ad {
  text-align: center;
  margin: auto;
  overflow: hidden;
  min-height: 400px;
}

@media (min-width: 992px) { .blh-billboard-ad { margin-top: 4; }}
@media (max-width: 992px) { .blh-billboard-ad { margin-bottom: 46px !important; }}
@media (max-width: 729px) { .blh-billboard-ad { display: none; }}

.widget_ad_mix {
    min-height: 300px !important;
    padding: 20px !important;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.post-list .popup_icon_container{
    display: none;
}


.post-tags .tagcloud{
    margin-bottom: 20px;
}


.post-tags .coffee_widget_wrap{
    width: 100%;
    padding: 0 15px;
}

.post-tags .coffee_pager_wrap{
    width: 100%;
    padding: 0 15px;
}


.btn_blhlike.btn_blhlike, .count_blhlike.btn_blhlike{
     color: #fff !important;
     font-weight: normal;
}

[class$="-list"] .popup_icon {
display: none;
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

A js részét is jó lenne

inf · 2018. Dec. 3. (H), 05.03

A js részét is jó lenne látni. Magának a slider-nek semmi köze a jquery-hez, mármint nincs benne a jquery alap libben ilyesmi, sem a jquery ui-ban. Gondolom valami külsős image slider-el próbálkozol ezek szerint, ami jquery-t használ. Esetleg ez lehet az? https://wordpress.org/plugins/coffee-cup-widget/ Ha igen, akkor egyszerűbb feltenni helyette egy működő változatot, mint egy alapból nem működőt tákolni. Dunát lehetne rekeszteni velük, annyi féle image slider van...

A fenti jelenségnél valószínűleg betöltésnél lefut a .hide() az összes olyan elemre, aminek nem kéne látszania, aztán ez törött el. Esetleg a css rossz, aminek alapból el kéne rejtenie az összes elemet. Nehéz megmondani, és túl sok kedvem nincs végignézni az egész kódot emiatt.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Szia! Nem, nem külső

20legendd · 2018. Dec. 3. (H), 10.46

Szia! Nem, nem külső sliderrel próbálkozok, hanem egyik blog.hu-s sablonból másoltam át egyet egy olyan template-be, ahol eredetileg nem volt slider, aztán az elképzeléseim szerint formáztam/tologattam el a slider különböző elemeit úgy, hogy az a kompozíció valósuljon meg, ami a képen van. Így nem kell kézileg átírni a kódokat, ha a sliderben szereplő cikkeket változatni akarjuk, csak a blog.hu rendszerében becsillagozzuk a nekünk tetszik bejegyzéseket.

Btw, a BJQS nem a Basic JQuery Sliderből jön ki?

A sliderre vonatkozó részeket kiemelem a HTML-ben és CSS-ben is:

<blhc:if key="pageType" value="blogcimlap" operator="eq">  
                <blh:starred width="980" height="450" limit="4" bjqs_showcontrols="true"                bjqs_showmarkers="false" bjqs_centermarkers="false" article-subtitle="true" />

CSS:

/* SLIDER */  
  
#slider {  
    background: #b00538;  
    width: 1050px;  
    height: 400px;  
    margin: 0 0 20px;  
    padding: 0px;  
    border-radius: 0px;  
}  
  
    #slider:hover .article-data {  
        height: auto;  
        overflow: visible;  
    }  
  
    #slider:hover img {  
      color: white;  
        opacity: 0.7;  
    }  
  
#slider .article-infos,  
#slider .lead {  
    display: none;  
}  
  
#slider .bjqs {  
    display: inline-block;  
    position: relative;  
    width: 1050px;  
    height: 400px;  
    overflow: hidden;  
    margin: 0;  
    padding: 0;  
}  
  
    #slider .bjqs li {  
        display: block;  
        position: absolute;  
      background-color: #b00538;  
        top: 0;  
        left: 0;  
        width: 770px;  
        height: 410px;  
    }  
  
#slider .article-image {  
    display: block;  
    background: #0f0f22;  
    position: relative;  
    width: 1023px;  
    height: 450px;  
}  
  
#slider img {  
    position: absolute;  
    bottom: 0;  
    height: auto;  
    left: 0;  
    margin: auto;  
    right: 0;  
    top: 0;  
    width: auto  
            transition: all 0.2s ease-in 0s;  
    -webkit-transition: all 0.2s ease-in 0s;  
  
}  
  
  
#slider .article-data {  
    background: transparent;  
    position: relative;  
    bottom: 135px;  
    left: 0px;  
    font-size: 30px;  
    padding: 0;  
    width: auto;  
    overflow: hidden;  
    height: auto;  
}  
  
    #slider .article-data h1 {  
        padding: 1px 15px 15px;  
      background: #b00538;  
      color: white;  
        font-size: 15px;  
        line-height: 30px;  
        text-align: left;  
      font-weight: bold;  
        overflow: visible:  
        word-break: break-all;  
        word-break: break-word;  
      width: max-content;  
        height: 30px;  
    }  
  
    #slider .article-data h1 a {  
        display: inline-block;  
        color: auto;  
    }  
  
    #slider .article-data h2 {  
      position: relative;  
      top: -8px;  
      left: 0px;  
        padding: 0px 15px 15px;  
      background: white;  
      color: #1a1a3d;  
        font-size: 32px;  
        line-height: 50px;  
        text-align: left;  
      font-weight: bold;  
        overflow: visible:  
        word-break: break-all;  
        word-break: break-word;  
        width: max-content;  
        height: 50px;  
    }  
  
    #slider .article-data h2 a {  
        display: block;  
        color: auto;  
    }  
  
#slider .bjqs-markers {  
    display: block;  
    position: absolute;  
    top: 35px;  
    right: -345px;  
    width: 345px;  
    z-index: 5;  
}  
  
    #slider .bjqs-markers li {   
        background: #cfcfcf;  
        font-family: Playfair Display;  
        font-size: 20px;  
        line-height: 24px;  
        margin: 0 0 2px;  
    }  
  
    #slider .bjqs-markers li + li + li + li + li {  
        display: none;  
    }  
  
        #slider .bjqs-markers li.active-marker {  
            background: #353535;  
        }  
  
    #slider .bjqs-markers a {  
        background: rgba(0, 0, 0, 0.12);  
        position: relative;  
        display: block;  
        padding: 15px;  
        z-index: 2;  
    }  
  
        #slider .bjqs-markers a:hover {  
            background: #b7b5b5;  
            color: #000;  
        }  
  
        #slider .bjqs-markers .active-marker a {  
            background: #353535;  
            color: #fff;  
        }  
  
    #slider .bjqs-markers .active-marker {  
        position: relative;  
    }  
  
    #slider .bjqs-markers .active-marker:after {  
        position: absolute;  
        content: "";  
        right: 100%;  
        top: 50%;  
        border: solid transparent;  
        height: 0;  
        width: 0;  
        pointer-events: none;  
        border-color: transparent;  
        border-right-color: #353535;  
        border-width: 28px;  
        margin-top: -28px;  
    }  
  
#slider ul.bjqs-controls {  
    display: block;  
    position: relative;  
    top: -350px;  
    width: 100%;  
    font-family: Arimo;  
    z-index: 10;  
}  
  
    #slider ul.bjqs-controls li {  
        position: absolute;  
        font-size: 65px  
        color: white;  
    }  
  
        #slider ul.bjqs-controls li a {  
            background: #b00538;  
          position: relative;  
          padding: 0px 0px 58px;  
            display: block;  
            color: white;  
            font-size: 55px;  
            line-height: 50px;  
          font-weight: bold;  
            opacity: 0.9;  
            font-family: "Open Sans", sans-serif;  
        }  
  
            .bjqs-prev a:after,  
            .bjqs-next a:after {  
                content: none;  
            }  
  
    #slider ul.bjqs-controls .bjqs-next {  
      background: #b00538;  
      color: white;  
        right: 10px;  
    }  
  
    #slider ul.bjqs-controls .bjqs-prev {  
      background:  #b00538;  
      color: white;  
        left: 10px;  
    }

A sablon által használt JS fájlok a következőek:
- https://m.blog.hu/skins/coffee/js/coffee_handler.js?v=20180914
- https://m.blog.hu/skins/coffee/js/jquery_dotdotdot_min.js?v=20180914

Ezeken én nem változtattam semmit, de lehet, hogy ezekben lesz a gond...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ha segítséget szeretnél

Pepita · 2018. Dec. 3. (H), 12.10

Szia!

Ha segítséget szeretnél, kérlek szánj rá kicsivel több időt, hogy aki akar segíteni, az hamar(abb) megtehesse!

- Használd a formázási lehetőségeket.
Ez nem link: https://i.stack.imgur.com/d79SY.png
Ez viszont link
Amikor írsz, neked plusz 3 másodperc, aki segíteni akar neked, annak jóval több.

- Csak a releváns kódot mutasd meg, ami közvetlenül a problémához / feladathoz kapcsolódik. Senki nem fogja a többezer sornyi css-edből kiválogatni a releváns 30 sort. Mutasd meg csak azt a 30-at.

- Írtad, hogy ez egy blog-hu-s oldal. Ha publikusan elérhető és látszik rajta a hiba, akkor azt is érdemes linkelni.

Megoldási javaslat:
A.: ne másolj kódot a másik oldalról, másik template-ből, hanem először értsd meg annak a részleteit, tudd pontosan, hogy mi miért és miért pont úgy szerepel "amott". Ennek a tudásnak a birtokában meg tudod írni a sajátodat, felesleges és hibákat okozó sallangok nélkül.
B.: kezd nulláról. Dobd ki, amit eddig másoltál és nem jó, menjünk vissza a kályhához. Utána definiáld pontosan, hogy mit szeretnél (hol, hogyan szerepelnek a képek, amikhez slidert szeretnél, mit kell tudnia a slidernek, stb), mutasd meg, hogy mi van belőle eddig, és ennek a célnak a megvalósításához kérj segítséget.

Mindkét esetben más az út a megoldáshoz, viszont egyik sem az, hogy copy / paste valahonnan valami, aztán majd valaki hibát fog keresni benne.
Inkább csináld meg jól, abban szívesen segítünk. :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Szia, köszi a visszajelzést.

20legendd · 2018. Dec. 3. (H), 13.56

Szia, köszi a visszajelzést. A linkelésre figyelni fogok, de hogy reagáljak is:

- azért másolok be mindent, mert 2 hete keresem, de én már nem tudom hol van a hiba (CSS? HTML? Háttér .JS fájl?)
- Én többé-kevésbé értem a dolgot. Nem csak találomra átmásoltam, a cuccot, csak egyszerűbb valamit átírni, mint a nulláról felépíteni. Pláne úgy, hogy egy mivel a blog.hu egy speciális felület, ezért nem fog menni benne külső slider - más választásom nem volt.
- Többször kezdtem már el, de mindannyiszor hasonló lett a gond, vagy egyszerűen nem tudott kezelni olyan adatokat, amik nekem kellettek.
- Meg nekem az a fura, hogy amúgy a slider működik rendesen, csak a betöltődésnél esik szét (majd ugye kb. fél perc múlva helyreáll), ezért nem vagyok abban sem biztos, hogy ez HTML vagy CSS kérdés és ezért kérdem itt, hogy betöltődési dolgokat hol kell keresni.
- Sajnos linkelni nem tudom, mert eddig csak előnézetből használjuk a dolgot. Ahhoz, hogy linkelni tudjam, publikálni kéne az oldalt, de amíg a hiba fennt áll, addig ezt ugye nem szeretnénk.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Figyeld meg, hogy milyen

Endyl · 2018. Dec. 3. (H), 14.07

Figyeld meg, hogy milyen osztályok/stílusok szerepelnek a slider egyes elemein betöltődés után közvetlenül illetve egy végigkattintás után. Ha eltérnek, akkor vagy a szkript rosszul inicializálja az elemeket, vagy eleve más html-t kéne kiküldeni alapból, mert a szkript ilyen jellegű inicializálással nem foglalkozik. Ez kideríthető, ha megnézed azt a kódrészletet, ami a slider html struktúrájával foglalkozik.

A minifikált kódot szerintem senki nem fogja helyetted átnézni, a másikban meg első átfutásra nem láttam releváns részt (de ettől persze még lehet, hogy abban van).

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ez a js

inf · 2018. Dec. 3. (H), 20.10

Ez a js része:
https://github.com/FrDH/jQuery.dotdotdot
https://m.blog.hu/skins/coffee/js/coffee_handler.js?v=20180914

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés