Cómo agregar código CSS personalizado en el Tema LingHang

Aunque el Tema LingHang facilita a los usuarios principiantes la creación rápida de un sitio web corporativo profesional, algunos diseños pueden no satisfacer las necesidades reales de tu propia empresa. Si tienes cierto conocimiento para modificar código CSS, puedes anularlos mediante código CSS personalizado.

Hay dos formas de agregar código CSS personalizado al Tema LingHang:

1. CSS personalizado del Theme

Pasos: WordPress Admin Dashboard → Apariencia → Personalizar → CSS adicional

Simplemente pega tu código CSS modificado allí.

2. Instalar un Child Theme

Descarga del Child Theme:linghang-child.zip (El método de instalación es el mismo: subir, activar).

Primero instala el Child Theme LingHang, luego en el Admin Dashboard de WordPress, ve a Apariencia → Editor de archivos del Theme, agrega tu propio código CSS en el archivo style.css y actualiza.

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 Theme, puedes intentar agregar el siguiente código:

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

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

Esta función ya está integrada en la versión 1.20 del Theme, se configura directamente en la página de ajustes de la Page.

/* 博客文章页标题背景区域 */
.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 del slider

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

Nota: Si la superposición se ajusta demasiado transparente, el texto blanco puede superponerse con el fondo y ser difícil de leer.

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

Si deseas que un diseño utilice una imagen completa para cubrir la pantalla del navegador, después de agregar la imagen, añade la clase CSS adicional „full-image“ a la imagen y luego agrega el siguiente código CSS personalizado.

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