WordPress - Styling WP native gallery

Stagger Lee
1774 Posts
Stagger Lee posted this 16 April 2015

Let us see, how people vote for this.

WP native gallery is very powerfull piece of WP. I know some things are hardcoded but would not mind Themler using "!important" in CSS to style gallery as I need.

Did you inside Themler developer core maybe discussed WP gallery ?

I noticed as it is now, gallery needs manual CSS coding. Left margin and right margin is different. Default border is in place, etc...some other not so good things.

**Let us see, how people vote for this.** WP native gallery is very powerfull piece of WP. I know some things are hardcoded but would not mind Themler using "!important" in CSS to style gallery as I need. Did you inside Themler developer core maybe discussed WP gallery ? I noticed as it is now, gallery needs manual CSS coding. Left margin and right margin is different. Default border is in place, etc...some other not so good things.
Vote to pay developers attention to this features or issue.
9 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 17 April 2015

Hello Stager Lee,
thank you for your suggestion.

In the meantime you may change the style settings of the images in WP native gallery. For example if gallery is added to the post you may select Post Content control and open Typography styles

PostContentOptions.png

There select Image and open its options to apply custom style settings

ImageOptions.png

Regards,
Aileen

Hello Stager Lee, thank you for your suggestion. In the meantime you may change the style settings of the images in WP native gallery. For example if gallery is added to the post you may select Post Content control and open Typography styles !PostContentOptions.png! There select Image and open its options to apply custom style settings !ImageOptions.png! Regards, Aileen
Stagger Lee
1774 Posts
Stagger Lee posted this 17 April 2015

Thank you. This is overriden by inline styling of WP core. Needs !important in Themler output. Or filter in functions.php to disable core gallery styling.

For instance this line prevents my own image borders:

#gallery-1 img {
  border: 2px solid #cfcfcf;
}

But OK, I can make tricks with CSS shadows and make it as classic CSS borders. Not a big deal, easy done.
This is not overriden. Problem is just all images inserted with TinyMce editor will have same styling.

Thank you. This is overriden by inline styling of WP core. Needs !important in Themler output. Or filter in functions.php to disable core gallery styling. For instance this line prevents my own image borders: #gallery-1 img { border: 2px solid #cfcfcf; } But OK, I can make tricks with CSS shadows and make it as classic CSS borders. Not a big deal, easy done. This is not overriden. Problem is just all images inserted with TinyMce editor will have same styling.
Stagger Lee
1774 Posts
Stagger Lee posted this 17 April 2015

But please dont mind about it right now, when you get time. Now there are more important priorities.

We have "wp-post-image" and "attachment-thumbnail" for manual styling. We dont need to be lazy using Themler.

Take it as it is more important. For instance working Post Pagination right now.

Or for instance, image hover styling is more important. In my opinion anyway.

But please dont mind about it right now, when you get time. Now there are more important priorities. We have "wp-post-image" and "attachment-thumbnail" for manual styling. We dont need to be lazy using Themler. Take it as it is more important. For instance working Post Pagination right now. Or for instance, image hover styling is more important. In my opinion anyway.

Last edited 17 April 2015 by Stagger Lee

Support Team
Support Team posted this 17 April 2015

Hi,
we appreciate all your comments and your ideas regarding Themler improvements.
I'm leaving this topic opened for voting.

regards,
Aileen

Hi, we appreciate all your comments and your ideas regarding Themler improvements. I'm leaving this topic opened for voting. regards, Aileen
Stagger Lee
1774 Posts
Stagger Lee posted this 17 April 2015

Yes, I see now. You dont need to do much new in Themler output.

  • For own CSS border styling just add !important declaration inside:

    .gallery img {
    border: 10px solid #f1f1f1 !important;
    }

As it is now not possible to center whole gallery. Visible differences, left-right.

  • For centering in Themler output just add !important declaration and additional 333 to 33%, 33.333%. Those .333 are very important because difference is visible with naked eye.

    .gallery .gallery-item {
    float: left;
    margin-top: 0;
    text-align: center;
    width: 33.333% !important;
    }

it could be tweaked with margin/padding, but it makes neverending circle of tweaking for smaller devices and responsive.

Yes, I see now. You dont need to do much new in Themler output. - For own CSS border styling just add **!important** declaration inside: .gallery img { border: 10px solid #f1f1f1 **!important**; } As it is now not possible to center whole gallery. Visible differences, left-right. - For centering in Themler output just add **!important** declaration and additional **333** to 33%, **33.333%**. Those .333 are very important because difference is visible with naked eye. .gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 33.333% !important; } it could be tweaked with margin/padding, but it makes neverending circle of tweaking for smaller devices and responsive.
Stagger Lee
1774 Posts
Stagger Lee posted this 14 September 2015

Please make up your mind if you will give us options to style native WordPress gallery or not.

As it is now you add some halfhearted basic style that makes impossible for us to use

add_filter( 'use_default_gallery_style', '__return_false' );

and override gallery shortcode styles. Your code in style.css:

.gallery .gallery-item {
  float: left;
  margin-top: 0;
  text-align: center;
  width: 33%;
}

If I disable gallery shortcode inline style in functions.php all width is 33%, independent of how many columns I chose.

Please make up your mind if you will give us options to style native WordPress gallery or not. As it is now you add some halfhearted basic style that makes impossible for us to use add_filter( 'use_default_gallery_style', '__return_false' ); and override gallery shortcode styles. Your code in style.css: .gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 33%; } If I disable gallery shortcode inline style in functions.php all width is 33%, independent of how many columns I chose.

Last edited 14 September 2015 by Stagger Lee

Stagger Lee
1774 Posts
Stagger Lee posted this 15 September 2015

As a matter of fact you could make your Subscribers happy with those options and this filter above in themes functions.php.
Inline WordPress gallery styling has very few CSS lines.

  • Width per item/image
  • Border
    • Margin, Paddding
  • Float
  • Text-align

Rest is possible with Themler now anyway.

Nobody votes for it. They use unnecessary Nextgen Gallery, or ?

As a matter of fact you could make your Subscribers happy with those options and this filter above in themes functions.php. Inline WordPress gallery styling has very few CSS lines. - Width per item/image - Border - Margin, Paddding - Float - Text-align Rest is possible with Themler now anyway. Nobody votes for it. They use unnecessary Nextgen Gallery, or ?

Last edited 15 September 2015 by Stagger Lee

shaulhadar
400 Posts
shaulhadar posted this 15 September 2015

Voted by me !

Voted by me !
Stagger Lee
1774 Posts
Stagger Lee posted this 15 September 2015

All needed is support for dt, dd, dl in More options or new "figure" HMTL5 tag.
Just we could give it width per item, rest is easy ride.

All needed is support for dt, dd, dl in More options or new "figure" HMTL5 tag. Just we could give it width per item, rest is easy ride.

Last edited 15 September 2015 by Stagger Lee

You must log in or register to leave comments