Gallery CSS Problem

2 Views

Right now I’m using a code in the functions to override the default WordPress gallery CSS. But it seems for some reason that WP only wants to let me put 3 images per line in a gallery, despite my CSS. Anybody know how to fix this? My problem can be found here -> http://themeforward.com/demo2/features/gallery-2/ and my CSS is below. 

/*//////////////////////////////////////////////////////////////////// 
//  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
}

EDIT:

//////////////////////////////////////// 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' );
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. You have to account for all appropriate CSS classes, based on the number of columns passed to the shortcode. Here’s my CSS (borrowed heavily from Michael Fields), for handling from 1 to 10 columns:

    .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, from calling the following in the Post Content:

    [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"]