Skip to content

Instantly share code, notes, and snippets.

@PhongGCS
Last active September 26, 2022 07:56
Show Gist options
  • Save PhongGCS/09e89ca193bfcb6c024ca02c501bd54e to your computer and use it in GitHub Desktop.
Save PhongGCS/09e89ca193bfcb6c024ca02c501bd54e to your computer and use it in GitHub Desktop.
### 1. Add style.css assets/main.js child theme
### 2. Add % giảm giá của sản phẩm
### 3. Thêm fontawesome
### 4. Thêm Theme Option ACF
### 5. Tạo Taxonomy
### 6. Lấy danh sách taxonomy theo post id (product id)
### 7. Add font face
### 8. Style accordion minus plus icon
### 9. Change Icon slider flatsome
### 10. Conver dot flatsome slider to number
### 11. List item in 3 column
@PhongGCS
Copy link
Author

Change icon slider flatsome

.slider-v1 .flickity-button {
    content: "";
    width: 74px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: unset;
    bottom: -60px;
}
.slider-v1 .flickity-prev-next-button:disabled, .slider-v1 button.flickity-prev-next-button[disabled]  {
    opacity: 1 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.slider-v1 .flickity-button.previous {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/previous-arrow.png");
}

.slider-v1 .flickity-button.previous:disabled {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/left-arrow-disable.png") !important;
}



.slider-v1 .flickity-button.next {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/new-arrow.png");
}

.slider-v1 .flickity-button.next:disabled {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/right-arrow-disable.png") !important;
}

.slider-v1 svg {
    display: none;
}

@PhongGCS
Copy link
Author

10. Conver dot flatsome slider to number

.slider-v2 ol.flickity-page-dots li.dot {
    counter-increment: css-counter 1;
    width: 20px;
    height: 20px;
    text-align: right;
    border: none !important;
    background: none !important;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    left: 0;
    opacity: 1;
}

@PhongGCS
Copy link
Author

PhongGCS commented Sep 17, 2022

11. List item in 3 column

ul {
    -webkit-columns: 3 auto;
    -moz-columns: 3 auto;
    column-count: 3;
}

ul {
    display: inline-block;
    width: 100%;
    list-style: none;
    vertical-align: top;
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
    grid-gap: 0 2.5rem;
    -webkit-columns: 1 auto;
    -moz-columns: 1 auto;
    column-count: 1;
}

ul li {
    display: inline-block;
    width: 100%;
    margin-top: 5px;
    list-style: none;
    border-bottom: 1px dashed #cecece;
    padding-bottom: 10px;
    line-height: 1;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment