Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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' );
share|improve this question

1 Answer 1

up vote 1 down vote accepted

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"]
share|improve this answer
    
I noticed this styles it as if it were the default styling. I also noticed the number generally degrade in each gallery-columns class. What exactly are those classes doing? –  Lucas Jul 14 '11 at 19:02
    
See edited answer. Those classes are applied by WordPress when it parses the shortcode, based on the "columns" parameter. –  Chip Bennett Jul 14 '11 at 19:09
    
This just isn't working for me and I can't figure it out for the life of me. The [gallery columns="2"] shortcode, along with every other number, just won't work. :-S –  Lucas Jul 14 '11 at 19:23
    
Can you post your functions.php code that you're using to override Gallery CSS, and anything else in functions.php that hooks into Gallery handling? –  Chip Bennett Jul 14 '11 at 19:36
    
I added my relevant functions above. I even deleted my entire functions.php and it doesn't work still. I'm using WP 3.2.1. –  Lucas Jul 14 '11 at 19:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.