Some custom css Wilcity

Please put the following code to Appearance -> Theme Options -> Advanced Settings -> Custom CSS:

Customize Menu Color

#wilcity-menu .menu-item a {

color: yourcolor !important;

}

Customize Menu Size

#wilcity-menu .menu-item a {
   font-size: 20px !important;
}

Customize Mobile Menu Color

.nav-mobile {

background-color: yourcolor !important;

}
.nav-mobile .menu-item a{

color: yourcolor !important;

}

Customize Register Button Color

#wil-login-register-controller #wilcity-register-btn {

background-color: yourcolor !important;

color: yourcolor !important;

}

Customize Login Button Color

#wil-login-register-controller #wilcity-login-btn {

background-color: yourcolor !important;

color: yourcolor !important;

}

Customize Login Button Size

#wil-login-register-controller a {
    padding-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
    font-size: 20px !important;
}

Customize Text on the Login page

// icon color
.log-reg-features_module__1x06b .textbox-2_icon__1xt9q i { 
color: green !important;
}
// text color
.log-reg-features_module__1x06b .textbox-2_title__301U3 { 
color: green !important;
}

Customize Add Listing Button Color

.header-addlisting .wil-btn--primary2 {

background-color: yourcolor !important;

color: yourcolor !important;

}

Customize “Claim This Listing” Button

.wilcity-sidebar-item-claim .promo-item_action__pd8hZ .wil-btn {

    color: yourcolor !important ;
background-color: yourcolor !important; }

Become an author

.wilcity-become-an-author .wil-btn--secondary {
    background-color: yourcolor !important;
    color: yourcolor;
}

.footer_module__1uDav {

background-color: red !important;

}

Hide the single listing setting in navigation

To hide this button:

please using this CSS code:

body:not(.admin-bar) .wil-single-nav-listing-settings {
    display: none !important;
}

This code will hide the setting in navigation, but not affect to the admin.

Remove Hero Search V2

#wil-search-v2 .searchbox_module__3ZYKm{
display: none;
}

Change Yellow Search Form Color on Search V2

.searchbox_wrap__37JXq .autosuggest__results,
.searchbox_searchInput__2p4ds div[class*=wrap] {
    border-color: red;
/*change border color*/
}

.searchbox_searchButton__1c9iK .wil-btn--primary {
    background-color: red;
/*change background color of the button*/
}

.searchbox_searchButton__1c9iK .wil-btn--primary:after
 {
	border-left-color: red ;
}

div.searchbox_searchButton__1c9iK a.wil-btn.wil-btn--primary.wil-btn--round.wil-btn--md {
		color: white;
/*change color of the search button*/
}

div.searchbox_searchButton__1c9iK > a:hover {
	background-color: red !important;
/*hover color on search button*/
}

Customize “Listing thumbnails” overlay color:

.listing_header__2pt4D>a:before {
    background-color: your-color;
    opacity: your-opacity;
}

Customize Button on Search V2

Changing Color of activating button

.filter_button__lo852.wil-btn–primary {
background-color: red !important;
}

Changing Font-size:

.filter_button__lo852 span {
font-size: 20px !important;
}

Customize Hero Background:

#hero-tab-listing .wil-btn--primary {
   background-color: red !important;
}

/*change active tab color*/

.wil-hero-form-wrapper li > a.active {
    color: red;
}

/*change label in hero search form color*/

.wil-hero-form-wrapper .field_style2__2Znhe .field_label__2eCP7, .wil-hero-form-wrapper .field_style3__3qkPx .field_label__2eCP7 {
  color: red;
}

Hide Items on Navigation and Dashboard Sidebar

.wilcity-dashboard-item-dashboard {
    display: none !important;
}

.wilcity-dashboard-item-profile {
    display: none !important;
}


.wilcity-dashboard-item-reviews {
    display: none !important;
}

.wilcity-dashboard-item-messages {
    display: none !important;
}

.wilcity-dashboard-item-notifications {
    display: none !important;
}

.wilcity-dashboard-item-billings {
   display: none !important;
}

.wilcity-dashboard-item-favorites {
    display: none !important;
}

.wilcity-dashboard-item-listing {
    display: none !important;
}

Customize Dashboard Color:

.wilcity-dashboard-item-dashboard .dashboard-nav_icon__2gZV4 i{
    color: #color; // Icon Color
}

.wilcity-dashboard-item-dashboard .dashboard-nav_text__x-_IZ{
    color: #color; // Text Color
}

Please refer to above setting to change icon, color of other items.

If you want to remove a post type from it, please do the following instruction:


.wilcity-dashboard-item-listing {
    display: none !important;
}

listing is post type key. You can find Post Type Key under Wiloke Tools -> Add New Directory Type

Customize Quick Search Form:

Please use the following code to change Text Color and Icon Color:

.header_search__3IFfo .la-search,
.header_search__3IFfo .header_searchText__10VVZ {
    color: red !important;
}

Please use the following code to change background-color:

.header_search__3IFfo {

background-color: green !important;

}

Hide Listing Inbox button on the Listing Sidebar

.wil-listing-inbox {
display: none !important;
}

Customizing Font-size and Color on Hero Search Form

Customizing Search Navigation:

#wilcity-hero-search-form .tab_nav__3YJph { 
    font-size: 20px;
    color: red;
}

Customizing Search Field


#wilcity-hero-search-form .field_label__2eCP7 {
   font-size: 20px;
   color: red;
}

Remove Menu Icon, Menu Title, Menu Description of Group Field, Restaurant Field on Add Listing page

.wil-group-title-icon,
.wil-group-title-desc,
.wil-group-title-wrapper {

display: none;

}

Change Review Color

.rated-small_overallRating__oFmKR {
  color: red !important;
}

Customize Header Height

To change the height of Header, please use the following code

#wilcity-header-section {
   height: 500px;
}

If you want to change the height of Sticky Header only, please read

#wilcity-header-section.js-header-sticky {
   height: 500px;
}

Customize Logo Height

To change to logo width and height, please use this code

.header_logo__2HmDH img {
    max-height: 70px;
    transform: scale(1.25);
}

Customize Add Listing Page

Changing AddListing Table of content font size:

#wilcity-addlisting .list_text__35R07 {
  font-size: 30px !important;
}

#wilcity-addlisting .list_icon__2YpTp{
  font-size: 30px !important;
}
// Customize text color
.widget-stattictis__textLg,
.widget-stattictis__textSm {
   color: #fff !important;
}

// customize icon color
.widget_statictis__item .la {
   color: #fff !important;
}

// Customize Font-size
.widget-stattictis__textLg{
   font-size: 30px !important;
}
.widget-stattictis__textSm {
  font-size: 20px !important;
}

Hide Post Meta

.post_body__TYys6 .post_metaData__3b_38 {
  display: none !important;
}

Leave A Comment?