Menu
Home
Forums
New posts
Search forums
What's new
Featured content
New posts
New media
New media comments
New resources
Latest activity
Media
New media
New comments
Search media
Resources
Latest reviews
Search resources
Misc
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Menu
Log in
Register
Install the app
Install
Home
Forums
Labrish
Nalij
Jinaral Q and A
What is the additional CSS class(es) for Jetpack top posts used for?
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
[QUOTE="Meanders, post: 88126"] If you are digging around in the WordPress block settings and spot that "Additional CSS class(es)" box under the Advanced tab for your Jetpack Top Posts block, it is basically your escape hatch from boring default layouts. Out of the box, that popular posts list just inherits whatever basic list styling your theme uses. It usually looks pretty generic. Dropping a custom class name in that box lets you isolate that specific block so you can hit it with your own CSS without accidentally breaking the styling on every other list on your site. [HEADING=2]Why do people actually use it?[/HEADING] Most folks use it because they want their top content to actually grab attention. You can use it to do things like: [LIST] [*]Kill the ugly default bullet points and maybe replace them with something cleaner. [*]Force the list out of a vertical stack and into a horizontal grid layout. [*]Tweak the typography by making the post titles bold or a completely different color from your regular body text. [*]Add some breathing room by fixing the padding between the thumbnail images and the text. [*]Throw a subtle background color or drop shadow behind the whole block so readers cannot ignore it. [/LIST] [HEADING=2]How you set it up[/HEADING] It is super straightforward. You just make up a name and type it into that field. Something like custom-popular-posts works perfectly. Just remember not to put a period in front of it inside that specific box. Once you save that, you just open up your global CSS editor and write your rules targeting .custom-popular-posts. Your browser will pick up on that custom class and apply your new design exclusively to the Jetpack Top Posts block. [/QUOTE]
Insert quotes…
Name
Post reply
Home
Forums
Labrish
Nalij
Jinaral Q and A
What is the additional CSS class(es) for Jetpack top posts used for?
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.
Accept
Learn more…
Top