Cómo agregar código CSS personalizado al tema LingHang

quhenet Ayuda del tema

Aunque el tema LingHang facilita a los usuarios novatos la creación rápida de un sitio web profesional, algunos diseños pueden no satisfacer las necesidades reales de tu empresa. Si sabes modificar código CSS, puedes sobrescribirlos con CSS personalizado.

Hay dos formas de agregar CSS personalizado en el tema LingHang:

1. CSS personalizado del tema

Pasos: WordPress Escritorio → Apariencia → Personalizar → CSS adicional

Pega tu código CSS modificado allí.

Image
Image

2. Instalar un tema hijo

Descarga del tema hijo:linghang-child.zipEl método de instalación es el mismo: subir y activar.

Primero instala el tema hijo de LingHang, luego ve a WordPress Escritorio, Apariencia, Editor de archivos de temas, y agrega tu código CSS en el archivo style.css. Actualiza.

Image

3. Demostración de código personalizado

1. Ajustar el ancho del submenú

修改子菜单宽度

Por ejemplo, si deseas modificar el ancho del submenú del menú de navegación del tema, puedes probar agregando el siguiente código:

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

2. Agregar imagen de fondo al área de título

Esta función ya está integrada en la versión 1.20 del tema, opera directamente en la página de configuración de la página.

为标题区域添加背景图片
/* 博客文章页标题背景区域 */
.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. Ajustar la opacidad de la superposición de fondo de la diapositiva

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

Consejo: si la superposición es demasiado transparente, el texto blanco puede superponerse con el fondo y ser ilegible.

4. Configurar la imagen para que se muestre a ancho completo

Image

Si planeas usar una imagen que ocupe toda la pantalla, puedes agregar una clase CSS adicional „full-image“ a la imagen y luego agregar el siguiente código CSS personalizado.

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