LONDNR Posted August 30, 2023 Share Posted August 30, 2023 Hi, I would like it so when people read my blogs the category in the top left is bold, just to differentiate from the rest of the info there (see image – I want 'Society' to be bold) . Link to comment
Lesum Posted August 30, 2023 Share Posted August 30, 2023 @LONDNR It can be done with custom CSS. Would it be possible to share your site URL so we can take a look? Thanks! If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
LONDNR Posted August 30, 2023 Author Share Posted August 30, 2023 Great thank you! It would also be great if you also knew how to make the just the categories in my blogs highlighted inside a pill shape box (see image) but no worries if not! URL: silver-indigo-58zg.squarespace.com Password: londnrmagazine Link to comment
Lesum Posted August 30, 2023 Share Posted August 30, 2023 @Here's code snippet you can try. Let me know how it goes. Thanks! .blog-item-category { font-weight: 900 !important; border: 2px solid black; border-radius: 30px; padding-left: 0.3rem; padding-right: 0.3rem; padding-top: 0.1rem; padding-bottom: 0.1rem; } .blog-item-category-wrapper { margin-bottom: 10px !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
LONDNR Posted August 30, 2023 Author Share Posted August 30, 2023 Hi! It works thank you but the spacing to the information below is too close (see image). Also is it possible to have the category written in all caps? Thanks for your help! Link to comment
Solution Lesum Posted August 30, 2023 Solution Share Posted August 30, 2023 @LONDNR Sure, here's the updated code: .blog-item-category { font-weight: 900 !important; text-transform: uppercase !important; border: 2px solid black; border-radius: 30px; padding-left: 0.3rem; padding-right: 0.3rem; padding-top: 0.15rem; padding-bottom: 0.1rem; } .blog-item-wrapper .blog-meta-item span { margin-bottom: 15px !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
LONDNR Posted August 30, 2023 Author Share Posted August 30, 2023 Hi, the spacing is still an issue here –– Link to comment
Lesum Posted August 30, 2023 Share Posted August 30, 2023 @LONDNR Sorry, I missed a block of code. Add this code snippet as well: .tweak-blog-item-show-categories .blog-item-wrapper .blog-meta-item--categories { margin-bottom: 15px !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
LONDNR Posted August 30, 2023 Author Share Posted August 30, 2023 Great! That worked thank you so much Lesum 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment