TownHub - Listing & Directory WP Theme

  1. Home
  2. Docs
  3. TownHub – Listing & Directory WP Theme
  4. FAQs
  5. CSS Customizations

CSS Customizations

Right Justify header main menu

.nav-holder {
   float: right;
}

Remove right header background color

https://prnt.sc/r89hy0

.townhub-has-addons .main-header:before {
   display: none;
}

Remove Location card overlay

.d-gr-sec:after {
       background: linear-gradient(to bottom, rgba(6, 27, 65, 0) 0%, rgba(6, 27, 65, 0.95) 100%);
}

Change 0.95 value to 0 to remove the overlay.

Change listing card overlay color

https://support.cththemes.com/?topic=change-blue-gradient

.geodir-category-img-wrap:before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(6, 27, 65, 0)), to(rgba(6, 27, 65, 0.95)));
    background: -webkit-linear-gradient(top, rgba(6, 27, 65, 0) 0%, rgba(6, 27, 65, 0.95) 100%);
    background: -o-linear-gradient(top, rgba(6, 27, 65, 0) 0%, rgba(6, 27, 65, 0.95) 100%);
    background: linear-gradient(to bottom, rgba(6, 27, 65, 0) 0%, rgba(6, 27, 65, 0.95) 100%);
}

Remove Location and listing cards overlay

.d-gr-sec:after, 
.geodir-category-img-wrap:before, 
.geodir-category-img-wrap .overlay{
   display: none;
}

Remove Map popup card overlay

.map-popup .listing-img-content:before {
   display: none; 
}

Change custom field color

.lcustom_field {
      color: #7d93b2;
}

Remove login/register wave animation

.main-register .wave-bg{
   display: none;
}

Remove scroll button on page header

https://prnt.sc/rdkclg

.header-sec-link {
    display: none;
}

Remove footer background

https://prnt.sc/rdkcro

.footer-bg{
     display: none;
}
.footer-wave{
     display: none;
}

Change Add Listing button color

.add-list.color-bg{
     background: red;
}

Remove rounded corner on listing card

.geodir-category-listing,
.geodir-category-img,
.geodir-category-img-wrap,
.geodir-category-img:before,
.listing_carditem .geodir-category-img-wrap,
.grid-tax-inner {
   border-radius: 0;
}

Remove menu price

.restmenu-item-det-price{
   display: none;
}

Hide author on listing carousel card

.listing_carditem_footer .post-author{
   display: none;
}

Hide categories tab on filter form

.listsearch-input-wrap_contrl ul.tab-menus {
   display: none;
}

Change listing feature icon size

.lsingle-block-content .listing-features li i {
       font-size: 16px;
}

Remove hamberger menu from header

.nav-button-wrap {
      display: none !important;
}

Change header text color

.cart-btn,
.show-reg-form,
.header-search_btn,
.show-lang, .show-currency-tooltip,
.show-lang i.arrlan {
   color: #000;
}
.header-search-input-wrap .hero-inputs-wrap .filter-gid-item input,
.header-search-input-wrap .hero-inputs-wrap .filter-gid-item .nice-select {
    background: rgba(0, 0, 0, 0.11);
}

Change header search input background

.header-search-input-wrap .hero-inputs-wrap .filter-gid-item input,
.header-search-input-wrap .hero-inputs-wrap .filter-gid-item .nice-select {
    background: rgba(0, 0, 0, 0.11);
}

TownHub card arrow on mobile screen

.icdec:before {
       border-top-color: red;
}

Preloader Screen background

.loader-wrap {
    background: #2e3f6e;
}

To top button

.to-top{
    background: #384F95;
    color: #4DB7FE;
}
.to-top:hover {
    background: #253966;
}

Hide top left bar above listing title

.listing-hero-section .list-single-header-item h1:before{
    display: none;
}

Hide scroll nav review menu

.sclnav-lreview{
    display: none;
}

Hide View on Map button on mobile view

.mob-nav-content-btn.schm{
   display: none;
}

Hide WooCommerce cart

.show-cart{
    display: none;
}

Show header search by default

.header-search_container{
    opacity: 1;
    visibility: visible;
    bottom: -110px;
}

How to make a transparent and sticky header on homepage?

.home.page .main-header, .home.page .main-header:before{
     background: transparent;
}
.home.page #wrapper{
     padding-top: 0;
}
.home.page .admin-bar #wrapper {
    padding-top: 32px;
}

Remove overlay color on categories slider card https://prnt.sc/sdp7ar

.category-carousel-item:before{
    display: none; 
}

How to remove the search option from select box? https://imgur.com/a/738Com9

.nice-select .nice-select-search-box {
   display: none; 
}

Hide map marker number https://prnt.sc/t4t5ej

.marker-count{
   display: none; 
}

Change hero search form box-shadow color

.main-search-input-tabs .tabs-container, .hero-slider-item .hero-search, .hero-map-search-wrap .hero-search {
    background: #fff;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.2);
}

Get css color: https://www.w3schools.com/css/css_colors_rgb.asp

Remove box-shadow on Cart/Chat/ToTop buttons

.to-top,
.chat-widget-button,
.show-cart {
    box-shadow: none;
}

Blog post css

https://support.cththemes.com/?topic=blog-2#post-43897

Follow this guide to get css code by yourself: https://www.cssigniter.com/wordpress-css-customizer-using-devtools-css-customize-theme-practical-examples/

Was this article helpful to you? Yes 1 No