现在,我在函数中使用一个代码来覆盖默认的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\' );
最合适的回答,由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"]