Crafty template: the blog looks different

Support
#1

Hi there,
i try to use the template “Crafty”, but I am not able to install the Blog. Teaser on main mage, blog archive and single view look very different and it looks like they depends on the stack, not on the templates. Are there any other template I could use or did I install the template wrong?

#2

pls follow this links to see the difference between crafty and my installation:
mine: https://www.dropbox.com/s/ffxqsugz15o69j5/Bildschirmfoto%202023-09-02%20um%2009.45.24.png?dl=0
yours: https://www.dropbox.com/s/6fn931os9tsdrjp/Bildschirmfoto%202023-09-02%20um%2009.45.12.png?dl=0

#3

Hello @jbreits,

Thanks for writing to us.

It seems that the Crefty demo-specific style was not imported properly I would suggest you go to the Theme Options —>Custom code —>Global CSS.

/* ===========================
// TABLE OF CONTENTS
// ---------------------------
//   01. Reboot
//   02. Shared Content
//   03. WooCommerce
//   04. Blog
//   05. Recent Posts
//   06. Pagination
//   07. Footer
//   08. Hidden Elements
//   09. Responsive Styles
// ======================== */

/* Reboot
// ------------------------ */

.x-navbar {
  border: 0;
  box-shadow: none;
}

.x-btn-navbar.collapsed,
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: none;
}

.entry-wrap {
  border-radius: 0;
  box-shadow: none;
}

.x-btn,
.button,
[type="submit"],
.x-btn:hover,
.button:hover,
[type="submit"]:hover {
  border-width: 1px;
  border-radius: 0px;
  padding: 0.8em 1.25em;
  letter-spacing: 0px;
  text-transform: none;
}

.x-nav-tabs > .active > a,
.x-nav-tabs > .active > a:hover {
  box-shadow: none;
}

.x-nav-tabs,
.x-tab-content {
  border-color: white;
  box-shadow: none;
}

.x-alert-block {
  border: 0;
  border-radius: 2px;
  padding: 1.2em 1.15em;
  box-shadow: none;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  height: 3.1em;
  border-color: rgb(217, 217, 217);
  border-radius: 0;
  font-size: 16px;
  box-shadow: none;
  transition-duration: 0s;
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  box-shadow: none;
}

.x-container.offset {
  margin-top: 45px;
  margin-bottom: 90px;
}



/* Shared Content: Blog,
// WooCommerce, and Recent
// Posts
// ------------------------ */

.entry-product,
.has-post-thumbnail .entry-featured,
.blog .x-main.full > article,
body .x-recent-posts a {
  border: 0 !important;
  box-shadow: none;
}

.entry-product,
.blog .x-main.full > article,
body .x-recent-posts a {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  transition-timing-function: ease-in-out;
}

.entry-product:hover,
.blog .x-main.full > article:not(:first-child):hover,
body .x-recent-posts a:hover {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
              0 6.7px 5.3px rgba(0, 0, 0, 0.028),
              0 12.5px 10px rgba(0, 0, 0, 0.035),
              0 22.3px 17.9px rgba(0, 0, 0, 0.042),
              0 41.8px 33.4px rgba(0, 0, 0, 0.05),
              0 100px 80px rgba(0, 0, 0, 0.07);
}

.woocommerce li.product .entry-header,
.blog .x-main.full > article:not(:first-child) .entry-wrap,
div.x-recent-posts .x-recent-posts-content {
  padding: 1.5625em 1.95em;
}

.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-title,
div.x-recent-posts .x-recent-posts-content .h-recent-posts {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 1.75;
  white-space: normal;
  color: #000000;
}

.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-title a,
div.x-recent-posts .x-recent-posts-content .h-recent-posts {
  color: #000000;
}


/* WooCommerce
// ------------------------ */

.woocommerce li.product {
  box-shadow: none;
  overflow: visible;
}

.woocommerce li.product .onsale {
  top: 6px;
  left: 6px;
  width: 4em;
  height: 2.5em;
  border-radius: 0px;
  line-height: 2.5em;
  text-shadow: none;
  box-shadow: none;
  transform: rotate(0deg);
  pointer-events: none;
}

.woocommerce .entry-wrap {
  padding: 45px 0 0;
}

.woocommerce li.product .entry-wrap {
  padding: 0;
  box-shadow: none;
}

.woocommerce li.product .entry-header h3 {
  font-size: 1.25rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
}

.woocommerce .price {
  font-size: 1.25rem;
  letter-spacing: 0.005em;
}

.woocommerce li.product .entry-header .price > .amount,
.woocommerce li.product .entry-header .price > ins > .amount {
  font-size: 1em;
  line-height: 1;
  color: currentColor;
}

.quantity input[type="number"] {
  border-color: black;
}

.woocommerce-tabs .x-tab-content .x-tab-pane {
	padding-left: 0;
  padding-top: 0;
}

.woocommerce .quantity input[type="number"] {
  font-size: 16px;
}

.single_add_to_cart_button,
.checkout-button,
.apply_coupon,
.update_cart {
  padding: 0.7em 1.125em;
}

.woocommerce .cart .actions > input,
.woocommerce .cart .actions > button {
  padding: 0.7em 1.125em;
}

.woocommerce-cart-form,
.woocommerce-cart-form a,
.woocommerce label,
.woocommerce table th,
.woocommerce table td,
.woocommerce .cart_totals,
.woocommerce-order-overview li {
  color: rgba(0, 0, 0, 0.8);
}

.woocommerce-cart-form table th {
  padding: 3em 0.652em 3em 0;
}

.cart_totals table td,
.cart_totals table th {
  padding: 1em 1em 1em 0;
}

#order_review table td,
#order_review table th {
  padding: 1em 1em 1em 0;
}

.woocommerce-order-details {
  padding: 3em 0em
}

.woocommerce-order-details table td,
.woocommerce-order-details table th {
  padding: 1em 1em 1em 0;
}

.woocommerce-cart-form td {
  padding: 1em 0em;
}

.woocommerce thead {
  text-transform: uppercase;
}

.widget_shopping_cart_content .x-interactive {
  background: none !important;
  border-color: #ebebe7 !important;
  box-shadow: none !important;
}

.woocommerce-checkout form .payment_methods label {
  padding: 0;
}

.woocommerce th {
  font-weight: normal;
}

.woocommerce table td,
.woocommerce table tr {
  border-color: #ebebe7;
}

.woocommerce-result-count,
.woocommerce-ordering {
  opacity: 0;
}

.woocommerce li.product {
  margin-bottom: 8.5%;
}

li.woocommerce-MyAccount-navigation-link a {
  padding: 0.9em 1em;
  font-size: 14px;
}

input#rememberme {
  margin-right: 0.5em;
}

.woocommerce-form-login__rememberme {
  padding: 0 0 1em 0;
}

.woocommerce .upsells ul.products li.product,
.woocommerce .related ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
  box-shadow: none;
  border-radius: 0;
  border: none;
}

.e85-6.x-anchor-toggle .x-graphic-icon[class*="active"] {
  color: #272727;
}

.e85-6.x-anchor-toggle {
  border-radius: 0;
}

.x-masthead .crafty-cart .x-anchor-text {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.1rem;
  top: -0.1rem;
  font-weight: normal;
  font-size: 13px;
  background-color: #777;
  color: #fff;
  border-radius: 50%;
  min-width: 1.2em;
  height: 1.2em;
}

.x-masthead .crafty-cart .x-anchor-text span {
  font-size: 10px;
  color: #FFF !important;
}

.woocommerce .cart .actions .coupon {
  padding-top: 4em;
}



/* Blog
// ------------------------ */

/*
// Main Layout
*/

.blog .x-main.full {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.blog .x-main.full > article {
  width: 30.333%;
  margin-top: 4em;
  margin-left: 1.5%;
  margin-right: 1.5%;
}


a.entry-thumb:hover img {
  opacity: 1;
}

.entry-thumb {
  background-color: transparent;
}


/*
// First Blog Entry
*/

.blog .x-main.full > article:first-child {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.blog .x-main.full > article:first-child .entry-featured,
.blog .x-main.full > article:first-child .entry-featured .entry-thumb,
.blog .x-main.full > article:first-child .entry-featured .entry-thumb img {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.blog .x-main.full > article:first-child .entry-featured {
  flex: 0 1 31.22%;
}

.blog .x-main.full > article:first-child .entry-featured .entry-thumb,
.blog .x-main.full > article:first-child .entry-featured .entry-thumb img {
  flex: 1 0 0%; 
}

.blog .x-main.full > article:first-child .entry-featured .entry-thumb img {
  object-fit: cover;
}

.blog .x-main.full > article:first-child .entry-wrap {
  flex: 1 0 0%;
  padding: 45px;
}

.blog .x-main.full > article:first-child .entry-wrap .entry-title {
  font-size: 2.45em;
  line-height: 1.3;
}

.blog .x-main.full > article:first-child .entry-wrap .entry-content.excerpt {
  margin: 40px 0 0;
  font-size: 1.25rem;
}

.blog .x-main.full > article:first-child .entry-wrap .entry-content.excerpt .more-link {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.085em;
  line-height: 1;
  text-decoration: underline;
  text-transform: uppercase;
  color: #272727;
}


/*
// Single Post
*/

.single-post .x-main {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.25rem;
  line-height: 1.9;
}

.single-post .entry-featured {
  position: relative;
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.single-post .entry-featured:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 70%, #ffffff);
}

.single-post .entry-featured img {
  height: 400px;
  object-fit: cover;
}

.single-post .x-main .entry-content {
  font-size: 1em;  
}

.single-post .entry-wrap {
  padding: 0;
}

.single-post .entry-wrap .entry-title,
#reply-title {
  position: relative;
  z-index: 2;
  font-size: 3.05rem;
  line-height: 1.3;
}

.single-post .entry-wrap .entry-title {
  margin-top: -0.64em;
  text-align: center;
}

.single-post .entry-wrap .entry-title:after {
  content: "";
  display: block;
  width: 100%;
  max-width: 3em;
  height: 1px;
  margin: 1em auto;
  background-color: currentColor;
  opacity: 0.33;
}

#reply-title {
  margin-top: 3.05em;
}

.logged-in-as {
  font-size: 1em;
  line-height: 1.4;
}

.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-rating label,
.comment-form-comment label {
  font-size: 1em;
  color: currentColor;
}

.comment-form-comment textarea {
  min-height: 200px
}

.form-submit {
  margin-top: 1em;
}



/* Recent Posts
// ------------------------ */

div.x-recent-posts a {
  border-radius: 0;
  padding: 0;
}

div.x-recent-posts .x-recent-posts-img {
  border-radius: 0;
  padding-bottom: 120%;
}



/* Pagination
// ------------------------ */

body .x-pagination {
  overflow: hidden;
  width: 100%;
  height: auto;
  margin: 100px 0 100px 0;
}

body .x-pagination a,
body .x-pagination span {
  width: 50px;
  height: 50px;
  border: 1px solid #272727;
  border-radius: 0;
  padding: 0;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  text-shadow: none;
  vertical-align: middle;
  color: #272727;
  box-shadow: none;
}

body .x-pagination a:hover {
  color: #c8493f;
  border-color: #c8493f;
}

body .x-pagination span.current {
  text-shadow: none;
  color: white;
  background-color: #272727;
  box-shadow: none;
}



/* Footer
// ------ */

.x-colophon.top {
  border: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
}

.x-colophon.top .widget {
  text-shadow: none;
}

.x-colophon.top > .x-container {
  width: 100%;
  max-width: none;
}



/* Hidden Elements
// ------------------------ */

.description_tab,
a.entry-thumb:hover:before,
.woocommerce .product-remove,
.x-recent-posts .x-recent-posts-date,
.woocommerce li.product .entry-header .button,
.woocommerce li.product:hover .entry-header .button,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:before,
.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-content.excerpt {
  display: none !important;
}


/* Responsive Styles
// ------------------------ */

@media (max-width: 1050px) {
  .footer-form input[type="text"] {
    width: calc(100% - 102px);
  }  
}

@media (max-width: 767px) {
  .blog .x-main.full > article,
  .blog .x-main.full > article:first-child .entry-featured,
  .blog .x-main.full > article:first-child .entry-wrap {
    width: 100%;
    flex: 1 1 auto;
  }
  
  .blog .x-main.full > article .entry-featured .entry-thumb img {
    max-height: 320px;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .single-post .has-post-thumbnail .entry-featured {
    float: none;
    width: auto;
    margin-right: 0;  
  }  
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

#4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.