How to Add Custom CSS Code in LingHang Theme

quhenet Theme Help

While the LingHang Theme facilitates novice users in quickly building professional official websites, some designs may not meet the actual needs of your own enterprise. If you have some CSS code modification skills, you can override them using custom CSS code.

There are two ways to add custom CSS code in the LingHang Theme:

1. Theme Custom CSS

Steps: WordPress Admin Dashboard → Appearance → Customize → Additional CSS

Simply paste your modified CSS code there.

Image
Image

II. Installing a Child Theme

Child Theme Download:linghang-child.zip (The installation method is the same: upload and activate.)

First, install the LingHang child theme. Then, in the WordPress Admin Dashboard, go to Appearance → Theme File Editor, add your own CSS code to the style.css file, and update it.

Image

III. Custom Code Examples

1. Adjust Submenu Width

修改子菜单宽度

For example, if you want to modify the width of the theme's navigation menu submenus, you can try adding the following code:

.primary-menu .sub-menu {
    min-width: 420px !important;
}

2. Add Background Image to Title Area

This feature has been integrated into Theme version 1.20. You can operate directly on the page settings.

为标题区域添加背景图片
/* 博客文章页标题背景区域 */
.single-post-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://linghang.quhenet.com/wp-content/uploads/2025/11/slide-3.jpg'); /* 背景图片网址 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3; /* 图片透明度 */
    z-index: 0;
}
 /* 隐藏右侧圆形元素，不需要隐藏则不复制下面代码 */
.single-post-header:before {
     background: none;
}

/* 页面标题背景 */
.page-header-wrapper {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), /* 黑色半透明蒙版 */
        url('https://linghang.quhenet.com/wp-content/uploads/2025/11/slide-3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 删除左右圆形元素 */
.page-header-wrapper::before,
.page-header-wrapper::after {
    display: none;
}

3. Adjust the Clarity of the Slide Background Overlay

/* 调整hero遮罩透明度，修改0.3的值，越小越透明 */
.hero-overlay {
    background: rgba(19, 30, 74, 0.3) !important;
}

Note: If the overlay adjustment is too transparent, white text may overlap with the background, making it difficult to read.

4. Set Images to Display Full Width

Image

If you intend to use a full-screen image for some designs, you can add an extra CSS class to the image after adding it. Enter „full-image“, then add the custom CSS code below.

.full-image {
    max-width: 100%;
}
.full-image img {
    margin: 0 auto;
    width: 100%; /* 图片拉伸到全宽，不添加这一行就是原图最大宽度居中显示 */
}