Bullets not showing in latest post block
-
Bullets not showing in latest post block. How to show bullets.
WP.com: Unknown
Jetpack: Yes
Correct account: UnknownThe blog I need help with is: (visible only to moderators and staff)
-
-
https://www.helloscholar.in/upsc-civil-services-main-examination-2022-time-table/
Please check at last – Related Posts heading
-
Hello hello!
Firstly, I apologize for the inconvenience but the WordPress.com forums are primarily equipped for supporting websites hosted on WordPress.com.
For websites like yours that use the open-source WordPress software, you’ll generally have more success seeking assistance through the WordPress.org forums.
You can also contact your hosting provider’s support, depending on your plan’s perks.That said, this sounds easy enough for me to quickly chime in!
Can you see if the following works?:(The instruction may seem long, but the process should only take a few minutes tops)
For editing this specific block on this specific page:
(If you want the block’s styling to remain everywhere you use it in the site, or if this is a widget, skip to Step 7)1. With the site editor, open the page containing the latest post block you wish to edit
2. Select the block
3. On the right side panel, click “Custom CSS”. (If you can’t see a panel, click the cog/gear icon at the top right to open it)
4. Copy and paste the following CSS:selector li {
list-style: disc;
}To change the color, you can include:
selector li::marker {
color: blue;
}If you want a different color, you can use Google’s color picker (https://g.co/kgs/3uxZct), customize the selection, and then copy what’s under “HEX” (e.g. “#4d3bed”).
From there, replace the color with the HEX value. It should look like this:selector li::marker {
color: #4d3bed;
}5. If you did step 4 correctly, your CSS should look something like this:
selector li {
list-style: disc;
}selector li::marker {
color: #4d3bed;
}Update the page, and see if that worked.
6. If the above didn’t work, try this CSS:
selector li {
list-style: disc !important;
}selector li::marker {
color: #4d3bed !important;
}Update the page and check. If it’s still not working, consider the CSS in the next steps.
7. For editing the block so that the styling remains everywhere you use it:
(Instead of customizing this block directly like in Step 1, I recommend doing this in your Dashboard > Appearance > Additional CSS)
Add the following CSS:
.wp-block-latest-posts__list.wp-block-latest-posts li {
list-style: disc;
}.wp-block-latest-posts__list.wp-block-latest-posts li::marker {
color: #4d3bed;
}Once again, update and check.
(Just in case you missed it, Step 4 above goes over custom color selection; but feel free to just type “color: red;” or “color: black;” etc.)
8. If that doesn’t work, then a last resort I can suggest is:
.wp-block-latest-posts__list.wp-block-latest-posts li {
list-style: disc !important;
}
.wp-block-latest-posts__list.wp-block-latest-posts li::marker {
color: #4d3bed !important;
}This will most likely work, but it’s generally bad practice to resort to “!important”, and I recommend you consider seeking further support at the WordPress.org forums (https://wordpress.org/support/forums/) if it comes to that.
If you have any further questions on the matter, once again, the WordPress.org forums is more relevant for you! The users there are more familiar with topics relating to the self-hosted WordPress software variant (which your website is using).
Additionally, if this is plugin/widget related, I suggest you consider making a post in the plugin’s support forums. A quick way to access the plugin’s support is by googling “WordPress plugin name here support”; more often than not, you’ll find a link directly to the plugin’s support.
All that said, I really hope this helps. Sincerely, good luck!
-
Thanks a lot, It worked..!!
One more question – Is it possible to show post as per tags instead of categories? -
Bullets are not showing properly. It appears sticked to the corner of screen and not as normal bullets appear. There is no margin left between bullets and left side of mobile screen.
-
Hey hi hello! My apologies for the late response!
Is it possible to show post as per tags instead of categories
I’m not sure I understand what you mean, but is this documentation relevant?:
https://wordpress.com/support/posts/tags/If the above isn’t relevant to your case. If so, I’d like to once again mention that as your website is not a WordPress.com site but is rather a website using the open-source WordPress.org software, you may find more success seeking assistance in the WordPress.org forums.
As for the bullet points, I see what you mean! In fact, while checking, I spotted another thing you might want fixed.
Regarding bullet margin
1. Go to where you added the CSS for the bullet points yesterday
2. Insert the following CSS (read step 3 first):.wp-block-latest-posts__list.wp-block-latest-posts li {
margin-left: 21px;
}3. Specifically, insert “margin-left: 20px” where you added “list-style: disc”
4. The CSS should now look something like this:
.wp-block-latest-posts__list.wp-block-latest-posts li {
list-style: disc;
margin-left: 21px;
}I’m not sure which of the steps we discussed work for you, so it’s possible that instead of “.wp-block-latest-posts__list.wp-block-latest-posts”, you see “selector” — in which case, the same instruction applies.
5. Adjust the margin-left value according to your preference. I chose 21px to be consistent, given that the list above (heading: “Important Links”) uses 21px for its margin-left.
Regarding bullet centering
I noticed the bullet points are aligned to the bottom of the text; this is most noticeable in mobile view. If you’d like to adjust that, then the CSS you may want to try out is as follows:
.wp-block-latest-posts__list.wp-block-latest-posts a {
vertical-align: middle;
}Simply insert that in the same place as the rest of the CSS we’ve been doing.
Also, you can replace “middle” with either “top” or “bottom”, depending on your preference.To summarize our entire discussion, I believe the CSS we’ve added includes the following:
.wp-block-latest-posts__list.wp-block-latest-posts a {
vertical-align: middle;
}.wp-block-latest-posts__list.wp-block-latest-posts li {
list-style: disc;
margin-left: 21px;
}.wp-block-latest-posts__list.wp-block-latest-posts li::marker {
color: #FA350B;
}Let me know if that helps or if I’ve made a mistake somewhere!
Otherwise, if you have any further inquiry outside of this particular matter, I suggest seek guidance at the WordPress.org forums!
- The topic ‘Bullets not showing in latest post block’ is closed to new replies.
WordPress.com Forums 