Để xóa khoảng cách thừa ra như trong ảnh
1. vào file style.css của theme gốc
tìm đến đoạn có code sau:
/*- 3. HEADER MIDDLE --------------------------------------------------------------------------------------------------*/
.header-middle{
padding-top:40px; <======= sửa thông số này để được như mong mốn
padding-bottom:40px; <======= sửa thông số này để được như mong mốn
}
.header-v6 .header-middle{
padding-top:0;
padding-bottom:0;
}
.header-v3 .header-middle > .container,
.header-v5 .header-middle > .container{
max-width:100%;
width:100%;
padding:0;
}
.header-middle > .container
{
display:table;
}
.header-v5 .header-middle > .container
{
table-layout:fixed;
}
.header-middle > .container > div{
vertical-align:middle;
display:table-cell;
}
Copy phần này sang theme child và sửa thông số sau theo ý muốn
.header-middle{
padding-top:40px;
padding-bottom:40px;
}
Kết quả gọn và đẹp như này:
<------------------------ hết phần chỉnh sửa độ dày header -------------------------->
giờ muốn thu hẹp khoảng cách này:
mở file Style.css tìm đến search-wrapper
/* Search version 2 */
.header-v2 .search-wrapper,
.header-v4 .search-wrapper{
width:25.333333%; <======= sửa kích thước này xuống còn 25%
}
.header-v2 .search-wrapper form,
.header-v4 .search-wrapper form,
.header-v6 .search-wrapper form,
.header-v7 .search-wrapper.search-mobile form,
.header-v8 .search-wrapper form{
position:relative;
}
.header-v2 .search-wrapper .search-field,
.header-v2 .search-wrapper form,
.header-v4 .search-wrapper .search-field,
.header-v4 .search-wrapper form{
max-width:270px;
display:inline-block;
width:100%;
}
.header-v2.hidden-cart.show-search .search-wrapper .search-field,
.header-v2.hidden-cart.show-search .search-wrapper form,
.header-v4.hidden-cart.show-search .search-wrapper .search-field,
.header-v4.hidden-cart.show-search .search-wrapper form{
max-width:320px;
}
.header-v2 .search-wrapper input[type="text"],
.header-v4 .search-wrapper input[type="text"],
.header-v6 .header-middle .search-wrapper input[type="text"],
header.ts-header .header-v8 .header-middle .search-wrapper input[type="text"],
.header-v7 .header-middle .search-wrapper.search-mobile input[type="text"]{
padding-right:33px; /* rtl */
}
.header-v2 .search-wrapper input[type="submit"],
.header-v4 .search-wrapper input[type="submit"],
.header-v6 .header-middle .search-wrapper input[type="submit"],
header.ts-header .header-v8 .header-middle .search-wrapper input[type="submit"],
.header-v7 .header-middle .search-wrapper.search-mobile input[type="submit"]{
position:absolute;
right:8px; /* rtl */
top:7px;
content:"";
font-size:0;
background:url(images/image.png) 3px -26px no-repeat !important;
opacity:0.8;
z-index:2;
border:0 !important;
padding:0 !important;
width:30px;
height:30px;
transition:all 300ms ease 0s;
-webkit-transition:all 300ms ease 0s;
-moz-transition:all 300ms ease 0s;
}
.header-v2 .search-wrapper input[type="submit"]:hover,
.header-v4 .search-wrapper input[type="submit"]:hover,
.header-v6 .header-middle .search-wrapper input[type="submit"]:hover,
header.ts-header .header-v8 .header-middle .search-wrapper input[type="submit"]:hover,
.header-v7 .header-middle .search-wrapper.search-mobile input[type="submit"]:hover{
background-position:3px -51px !important;
opacity:1;
}
Kết quả là khoảng cách đã được thu gọn lại như này
<------------------------ hết phần chỉnh sửa khoảng cách giữa hộp search box -------------------------->
do ta thấy banner logo này hơi bé, mà trong logo mang nhiều thông tin cửa hàng, nên muốn phóng to ra, ta xem logo này thuộc class nào, rồi vào sửa file style.css trong theme tìm với từ khóa của class đó. sửa như hình
bạn mở file Style.css trong theme, tìm đến class: logo-wrapper đoạn code như phía dưới và sửa thông số đi như bên dưới rồi lưu vào
/* Version 2 */
.header-v2 .logo-wrapper,
.header-v4 .logo-wrapper{
width:33.333333%; <=== sửa cái này lên thành 70
text-align:center;
}
.header-v2.hidden-cart.show-search .header-middle > .container,
.header-v4.hidden-cart.show-search .header-middle > .container{
direction:rtl;/* rtl */
}
.header-v2.hidden-cart.show-search .header-middle > .container > div *,
.header-v4.hidden-cart.show-search .header-middle > .container > div *{
direction:ltr;/* rtl */
}
.header-v2.hidden-cart.hidden-search .logo-wrapper,
.header-v4.hidden-cart.hidden-search .logo-wrapper{
width:100% !important;
text-align:center;
}
.header-v2.hidden-search.show-cart .logo-wrapper,
.header-v4.hidden-search.show-cart .logo-wrapper,
.header-v2.hidden-cart.show-search .logo-wrapper,
.header-v4.hidden-cart.show-search .logo-wrapper{
width:50%;
text-align:left /* rtl */
}
.header-v2.hidden-cart.show-search .search-wrapper,
.header-v4.hidden-cart.show-search .search-wrapper{
width:50%;
text-align:right;/* rtl */
}
.header-v2.hidden-cart.show-search .logo-wrapper,
.header-v4.hidden-cart.show-search .logo-wrapper{
width:50%;
text-align:left; /* rtl */
}
Hoặc cách khác sửa ngay trên web thì bạn tìm như trong ảnh
- Kết quả là banner chữ này đã to ra như hình dưới
------------- end
sửa Widget logo trên phiên bản destop và Mobile.
với Phiên Bản máy tính thì
trước khi sửa sau khi sửa
vào editor và sửa
/* FIX FOR WIDGET */
.widget-container .ts-logo-slider-wrapper.show-nav .content-wrapper .logos,
.ts-row-wide .widget-container .ts-logo-slider-wrapper{
padding-left: 25px; <=== sửa thành 25px
padding-right:0;
}
đối với phiên bản mobile thì vào file: /home/vuacuago.com/public_html/wp-content/themes/gon/css/reset.css
tìm CUSTOM DEFAULT
/*- 1. CUSTOM DEFAULT ---
.owl-carousel .product-wrapper .meta-wrapper *{
backface-visibility:hidden;
-moz-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
*
{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
text-align:left;/* rtl */ <===== sửa left thành center
font-weight:normal;
font-style:normal;
vertical-align: baseline;
float:left;
width:100%;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-break:normal;
background:#fff;
letter-spacing:0;
background-size:container;
}
<------------------------ hết phần chỉnh sửa căn lề của đối tác -------------------------->
Thêm phần Sticker hiện số điện thoại.
Cực đơn giản luôn
Bước 1: vào file Style.css của theme và thêm đoạn css sau:
/* code css hiện stick */
.fone {
font-size: 22px;
color: #f00;
line-height: 40px;
font-weight: bold;
padding-left: 15px;
margin: 0 0;
}
.tel{background-color: #eee;}
.fix_tel { position:fixed; bottom:15px; right:0; z-index:999;}
.tel { background: #eee;width:175px; height:40px; position:relative; overflow:hidden;background-size:40px;border-radius:28px;border:solid 1px #ccc;}
.fix_tel{top: auto; right: auto; bottom: 15px; left: 5px; }
Bước 2: dán đoạn code sau vào file footer.php
/* code hiện số điện thoại*/
<div class="fix_tel">
<div class="tel">
<p class="fone">0848 313 686</p>
</div>
</div>
