Limiting the scope of unknown/dynamic CSS to a specific
-
This issue is really about CSS, but I have this issue because of a complex interaction of WordPress components, so I’ll post here first.
The example page is here.
Locating the code I want to affect
Find the area<h1>Email message</h1>. On some pages, I use custom fields created with the awesome plugin, Advanced Custom Fields. (I’m also using the add-on, Advanced Custom Fields: Date and Time Picker, but that doesn’t affect my issue.) For pages that use these custom fields, the “Email message” is an email from someone and it might be formatted using HTML.I want to:
- preserve the HTML of the original email, and
- not change the HTML of the rest of the page, and
- not use iframe or embed or anything that requires me to create an extra file or is not search-engine friendly
For now, I have enclosed the original email message in a <div> container. You can see the container is
<div id="email_post_is_an_email">.The CSS for the Email message is in <head>
Using Advanced Custom Fields, I created a Text Area field named email_internal_style_sheet. The field has a conditional check: it only appears if the Advanced Custom Fields’s field email_html_formatted is checked.In header.php, I put the following code after wp_head(). (I did it on purpose. I would prefer to hook into wp_head, but I have limited time. One issue at a time, OK?)
<?php if( get_field( 'email_html_formatted' ) ) { echo '<style>' . get_field( 'email_internal_style_sheet' ) . '</style>'; } ?>If you look at the example page, you will see in <head>
<!– For email_posts, special styling, move to a hook for wp_head –>
<style> P {
font-family : Arial, Helvetica, sans-serif;
font-size : 12pt;
text-align : justify;
}
TR {
font-family : Arial, Helvetica, sans-serif;
font-size : 11pt;
text-align : left;
}</style>The problem: it overrides my stylesheets
This is the heart of the problem. The Email message uses <P>, and it overrides all of my other <P> definitions. If this were the only post like this, then I could easily fix it using dozens of methods. I could, for example create a style calledp.email_post_is_an_emailand modify things.I have thousands of emails, however, that I will bulk import, and I do not want to modify every email’s stylesheet. (If you care, I have been using WP Ultimate CSV Importer. I haven’t looked at other options.)
The solution? An easy method to limit the style of Email message to only the Email message
The first solution I thought of was CSS selectors. Using the current page as an example, it would be great if I could somehow define
#email_post_is_an_email P {[style definition]}
because that would limit the style to <P> elements that were inside <div id=”email_post_is_an_email”>.But the content of $email_internal_style_sheet is dynamic. It might have two elements or it might have hundreds of elements. I don’t know of a CSS selector that does what I want to do. I knew it wasn’t valid, but I still tried:
<style>
#email_post_is_an_email {
P {
font-family : Arial, Helvetica, sans-serif;
font-size : 12pt;
text-align : justify;
}
TR {
font-family : Arial, Helvetica, sans-serif;
font-size : 11pt;
text-align : left;
}}
</style>http://jigsaw.w3.org/css-validator gave a parse error, of course.
Ideas?
I’m not strong at scripting. I started hand coding HTML and then CSS in 1996, but I switched careers in 2005. I’ve regained my HTML and CSS skills, but this is my first experience with WordPress or PHP, so my learning curve has been steep.I’ve learned enough to expanded my website from ~750 pages by adding ~3800 posts and ~4500 attachments, but I still have 7,000-15,000 more posts to add. I’ve had to learn many new skills and technologies, and I am trying to limit the number of new languages I learn, you know?
I want to get this crap published and move on with my life.
Suggestions? Other information that would help you to help me?
- The topic ‘Limiting the scope of unknown/dynamic CSS to a specific’ is closed to new replies.