Php to set CSS for all posts tagged 'timeline'

[Peter_Fae]

hey all. I have a question. I’ve been using a CSS metabox that adds CSS on a per-page, per-post level, which is awesome. However, I got the intuition that if I bundle the CSS that I wish to use on certain pages, some .php could be woven that would affect ALL the posts set in that way.

Earlier, X-Theme helped with a .php that affected all posts tagged with the ‘timeline’ tag, and i’d love to add the CSS to all posts that are similarly tagged

this is what i’d like to add -->

/* for making post transparent */
.x-full-width-active .x-container.main:not(.x-row):not(.x-grid)::before {
background: transparent;
}

.entry-wrap { background: white; padding: 40px; }

That being said, simply seeing the form of the php would help me design other options for posts tagged in a certain way as well

Help?

[lely]

Hi Peter,

Tag classes only appear on tag archive pages.
For example: http://demo.theme.co/integrity-1/tag/ponder/

On the list of post on that tag ponder, tag-ponder class can be use. CSS can be like this:

/* for making post transparent */
.tag-ponder.x-full-width-active .x-container.main:not(.x-row):not(.x-grid)::before {
background: transparent;
}

.tag-ponder .entry-wrap { background: white; padding: 40px; }

Those tag classes are not available on single post pages. On yours you can use .tag-timeline selector.
If this doesn’t help, it would be better if you can share the page URL where you want this CSS to work. Thank you.

[Peter_Fae]

Thank you Lely. I’m a little confused as to how the class applies.

The effect i’m wanting (just to reiterate for myself) is to be able to apply a bunch of CSS to all the posts which are tagged with ‘timeline’. This parallels a function (or CSS) that was given to me earlier that made every post tagged ‘timeline’ fullwidth automatically. Basically, i’m wanting an easy inclusive way to lay down a bunch of CSS for certain tagged posts.

As I understand the mechanics of it, it would imply that I could create CSS for other posts with a different tag and set up a ruling for that as well, creating sitewide changes in an easy way.

Are you saying that I could put .tag-timeline in (selecting the tag which is called timeline) before the CSS in the general CSS section of the Customizer and it would affect all posts with that tag?

UPDATE - yah that didn’t change anything.

[friech]

Hi Peter,

Sorry If I may sound contradicting what you’re trying to do, but I notice that you seem to entice on custom CSS. Please keep in mind that even though little custom CSS here and there is nice to fix/change small things, it is not the absolute solution. When you accumulate a lot of custom CSS chances are you get a bigger issue like breaking layout, conflicting styling with theme update or plugin, or conflicting custom CSS with one another and that would be a nightmare to maintain. What I want to say is sometimes custom CSS do more harm than good.

But if you really want to utilize and learn CSS that’s fine, just make sure you understand what that CSS does on your page/content.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Ok back to your issue, I’m actually confused with your request because first PHP and CSS are completely different languages you cant combine these two.

Another thing, you said metabox that adds CSS on a per-page, per-post if that metabox only add the Custom CSS per-page/per-post then that CSS will only affect that page/post regardless of the selector you use on that CSS.

That custom CSS you show above is not for a tag page, that is for page with full-width template (.x-full-width-active) in its container with a main class, but no (.x-row) class nor (.x-grid) class.

Instead of requesting a custom CSS, please clarify what you’re trying to do, we might able to suggest a solution better than custom CSS.

Thank you for understanding,