-
Posts
-
Kriesi:
On a prior need, you helped me with a code snippet for my specific scenario. It worked perfectly until I found another, better (less manual control) way to automate this. See my page at: woodyboater.com
On this page, I have used three blog post Advanced Page Builder elements—each set to do different things. The top post element was set to pull in ONLY the single post that was tagged as -featured post. After I got this working as it should, I wanted to style the headline on JUST this top blog post element, increasing the h2 post title size. This is the code snippet you gave me to do that:
/* CSS – increase heading size on featured blog post on home page. */
#top.home #wrap_all .main_color .post-entry.tag-featured-post h2.post-title {
font-size:32px;Now…forward to today. I have found a different way to bring these post into this top element. Rather that using the tag method, ie: -featured post, I have simply filtered the blog post element as follows:
Filter entries by time period
Unit before: 1 Period before: DaysMy goal is to quite using the featured post tag—at least for this specific use case. But, when I do, I lose my styling of the increased heading size. Is there a new piece of code that you can provide that will do the same thing without the use of the featured post tag?
Also, I should note, that I would like the solution to be specific to this one blog element. I have two other blog post elements on the page that I DONOT want affected.
Thank you!
Hey William,
Thank you for the inquiry.
Since the featured post category or tag has been removed, the class name tag-featured-post is no longer applied. You have to adjust the css a bit.
#top.home #wrap_all .main_color .post-entry h2.post-title { font-size:32px; }You may need to apply a custom css class name to the Blog Post element and adjust the css.
Best regards,
IsmaelIsmael, this worked for the top (formerly tagged as Featured) post. This blog element is set to pul in just today’s post. If you refer to my site URL: https://www.woodyboater.com
You will see that in the next blog element down, there is a grid of six posts—same Blog element, different settings, then below that a list view of posts—again, same blog element, different settings.
You code adjustment worked…it made the h2 bigger (32px) for the top story. This is desired. But it also changed the size of the H2s on all of the lower stories as well. Not desired.
Is there any way to limit this edit to just the top blog element? Thank you.
Hi,
Is there any way to limit this edit to just the top blog element? Thank you.
As suggested above, you can apply a custom css class name (av-custom-featured-blog for example) to the top blog element (Advanced > Developer Settings > Custom CSS Class) and use it in the css rule above to specifically target the blog element.
#top.home #wrap_all .main_color .av-custom-featured-blog .post-entry h2.post-title { font-size:32px; }In the edited css above, we added the selector “.av-custom-featured-blog” to target the element with the class name “av-custom-featured-blog”.
Best regards,
IsmaelI know I am being a bit slow here. I have read, one rat years, about custom classes and other tricks that can be added through developer settings. That part I do understand, but I do not see Developer Settings, as a selection within the Advanced tab of my featured blog post element. I have tried to enable the Custom Elements option (Theme Options > Custom Elements) but this does not give me the option to add css under the Advanced tab in the blog element. I know I have seen the css field elsewhere as I was adding content. I just cannot seem to find the right combination to enable it here. I have done quite a bit through quick css, but I need to find where to assign a class name to this blog element. Thank you.
- You must be logged in to reply to this topic.