Gallery CSS Problem

时间:2011-07-14 作者:Lucas

现在,我在函数中使用一个代码来覆盖默认的WordPress gallery CSS。但出于某种原因,WP似乎只想让我在一个图库中每行放3张图片,尽管我有CSS。有人知道怎么解决这个问题吗?我的问题可以在这里找到->http://themeforward.com/demo2/features/gallery-2/ 下面是我的CSS。

/*//////////////////////////////////////////////////////////////////// 
//  Gallery
////////////////////////////////////////////////////////////////////*/
.gallery {
margin:30px 0 auto!important;
text-align:center;
width:680px;
overflow:hidden;
background:#1a1a1a
}
.gallery-item {
float:left;
text-align:center;

background:#000
}
.gallery img {
display:inline
}
.gallery img:active {
}
.gallery-caption {
display:none;
font-size:.8em;
margin-left:0
}
.gal_img {
margin:20px auto 0!important;
text-align:center
}
.gal_caption p {
font-size:1.3em!important;
font-weight:640;
text-align:center;
font-family:Arial, Helvetica, sans-serif!important
}
.gal_description p {
font-size:1.1em!important;
text-align:center
}
编辑:

//////////////////////////////////////// Gallery
add_filter(\'gallery_style\',
    create_function(
        \'$css\',
        \'return preg_replace("#<style type=\\\'text/css\\\'>(.*?)</style>#s", "", $css);\'
        )
    );

//////////////////////////////////////// Remove default gallery styling
add_filter( \'use_default_gallery_style\', \'__return_false\' );

1 个回复
最合适的回答,由SO网友:Chip Bennett 整理而成

您必须根据传递给短代码的列数考虑所有适当的CSS类。以下是我的CSS(大量借用了Michael Fields),用于处理1到10列:

.gallery {
    margin: 0px auto;
    text-align: center;
    width: 100%;
    min-width: 100%;
}
.gallery .gallery-item {
    float: left;
    margin: 0px auto;
    text-align: center;
}
.gallery img {
    border: 1px solid #cfcfcf;
}
.gallery .gallery-caption {
    display: none;
}
.gallery-columns-1 .gallery-item {
    max-width: 638px;
    width: 638px;
}
.gallery-columns-1 .gallery-item img { 
    max-width: 600px;
    height: auto;
    max-height: 600px;
}
.gallery-columns-2 .gallery-item {
    max-width: 300px;
    width: 300px;
}
.gallery-columns-2 .gallery-item img { 
    max-width: 300px;
    height: auto;
    max-height: 300px;
}
.gallery-columns-3 .gallery-item {
    max-width: 200px;
    width: 200px;
}
.gallery-columns-3 .gallery-item img { 
    max-width: 200px;
    height: auto;
    max-height: 200px;
}
.gallery-columns-4 .gallery-item {
    max-width: 151px;
    width: 151px;
}
.gallery-columns-4 .gallery-item img { 
    max-width: 150px;
    height: auto;
    max-height: 150px;
}
.gallery-columns-5 .gallery-item {
    max-width: 120px;
    width: 120px;
}
.gallery-columns-5 .gallery-item img { 
    max-width: 120px;
    height: auto;
    max-height: 120px;
}
.gallery-columns-6 .gallery-item {
    max-width: 100px;
    width: 100px;
}
.gallery-columns-6 .gallery-item img { 
    max-width: 100px;
    height: auto;
    max-height: 100px;
}
.gallery-columns-7 .gallery-item {
    max-width: 85px;
    width: 85px;
}
.gallery-columns-7 .gallery-item img { 
    max-width: 85px;
    height: auto;
    max-height: 85px;
}
.gallery-columns-8 .gallery-item {
    max-width: 75px;
    width: 75px;
}
.gallery-columns-8 .gallery-item img { 
    max-width: 75px;
    height: auto;
    max-height: 75px;
}
.gallery-columns-9 .gallery-item {
    max-width: 67px;
    width: 67px;
}
.gallery-columns-9 .gallery-item img { 
    max-width: 67px;
    height: auto;
    max-height: 67px;
}
.gallery-columns-10 .gallery-item {
    max-width: 60px;
    width: 60px;
}
.gallery-columns-10 .gallery-item img { 
    max-width: 60px;
    height: auto;
    max-height: 60px;
}

EDIT

Here you can see an example of the markup and styles being applied, 在帖子内容中调用以下内容:

[gallery columns="1"]
[gallery columns="2"]
[gallery columns="3"]
[gallery columns="4"]
[gallery columns="5"]
[gallery columns="6"]
[gallery columns="7"]
[gallery columns="8"]
[gallery columns="9"]
[gallery columns="10"]

结束

相关推荐

使用筛选器挂钩NAV_MENU_css_CLASS将自定义类添加到wp_NAV_MENU

我在wordpress主题中有一个自定义的帖子类型。我想为在该自定义帖子类型中创建的页面向nav菜单添加一个自定义类。我读到您可以使用过滤器挂钩:“nav\\u menu\\u css\\u class”,但我的php排骨非常有限。如何设置过滤器挂钩,使其仅应用于导航菜单中的自定义帖子类型页面,并为其提供自定义类?