GoldHatTrick

Getting rid of the tags/categories etc & moving the date is easy via custom css:

For the tags, etc to disappear:

.post-meta { display: none; }

If they still don’t disappear, change it to:

.post-meta { display: none!important; }

For moving the date:

.post-date, .post-title { display: inline; }

.post-date { padding: 5px; border: 1px solid #000; }

The inline is to get the date & title side by side. The padding & border is just an example of a simple box for the date.

You can use the theme’s custom css area but it’s a pain to work in it. I highly suggest making custom css changes via a child theme. If you add/modify the theme’s files directly, they will be overwritten in the next update to the theme.

Change the date format via the WP settings, not through the theme.

Moving the thumbnail can be done by modifying the loop. I think this should definitely be done via a child theme AND with a test site first AND with a really good backup system in place. If you mess with php files, you risk breaking your site completely.

If you are not familiar or comfortable with reading code, you probably shouldn’t be messing with the loop. If you want to dare anyways, try the following:

In the child theme loop.php (seriously, don’t do this in the main theme file), cut these 2 lines AND everything between them (this block of code contains the call to the thumbnail):

<?php themify_base_before_post_image(); // Hook ?>
…more lines of code…
<?php themify_base_after_post_image(); // Hook ?>

then paste it all to underneath this line (which marks the end of the title coding):

<?php themify_base_after_post_title(); // Hook ?>

but before this line (which calls the rest of the post):

<?php if ( ! is_attachment() ) : ?>

Just to clarify your “on top of that whole bunch of code” – you mean that you put the css declaration in the custom css settings page, saved it & then put the spoiler shortcode with contents in the html page/post editor, right?

Things to check:

1) Any custom css has to be the very last thing in order to overwrite the previous css. Anything that comes after will overwrite whatever went before.

Likewise, any inline css will overwrite other internal css.

So, try putting the custom change as the very last thing instead of the first thing.

2a) Being as specific in your selectors is best too. You can try adding more specificity to ensure your custom css gets applied to exactly what you want.

Using lots of very specific selectors is the best way of controlling custom css without mucking up other coding but can be the hardest to figure out.

2b) You can check what is actually getting applied to what element by looking at your page with developer tools. This can tell you what is getting applied, overwritten and by what. You can also figure out element order/relationships.

The selectors & order I used in my example was how the flow was on my page. You might need more selectors or more specific selectors if you have more elements.

3) It may be that your carriage return isn’t generating p tags. The custom css isn’t going to be applied to any other tag. The WP default is to add p tags automatically but this can be turned off.

4) Also, be sure you have cleared all caches to be able to see new changes.

5) If there was an !important put in somewhere, you can’t override those until the !important is removed. You should be able to see if this was done via the developer tools.

6) Double check that your theme or another plugin isn’t overriding your custom css. Since p tags are ubiquitous, themes have a tendency to want full control of them.

I’ve been able to do this with a custom css class:

.nolink { pointer-events: none; }

[su_button class=”nolink]BUTTON DOES NOT WORK[/su_button]

This may be inconsistent as some browsers don’t support css pointer-events.

I just remembered something:

Are you using the customizer menu through the child theme or the parent theme? I remember having a conflict when I first switched to using a child theme.

My leftover customization via the parent theme customizer menu was conflicting with changes I made via the child theme customizer menu. I fixed this by completely resetting the parent theme customizer menu back to default & only making changes through the child theme customizer menu.

I do have more detailed custom css via separately enqueued stylesheets (more than just the child stylesheet) but still use the built-in theme customizer (via the child theme) to make the general font & colour changes.

Could this be the cause of the flickering?

This is probably due to either long load times for imported fonts (e.g. Google fonts) &/or you have multiple stylesheets loading & being rendered in sequence.

I noticed in your other thread about child themes that you switched to using @import instead of enqueuing the parent stylesheet.

I’m pretty sure this takes longer to load & results in a full load & render of each stylesheet separately – which can cause flickering as each stylesheet is rendered then changed when the next stylesheet is loaded & overwrites the previous styles.

If you have any css loading in the footer, this can also cause visual changes as css loaded in the head will be rendered first then changed once the css in the foot is called & loads.

Update to suggestion: Try disabling the visual editor.

The single quotes will automatically get changed to double quotes if done in the visual editor or the visual editor is switched to at any time.

The single quotes are actually preserved in my rendered pages but only if the coding with single quotes is done & saved via the HTML editor only.

If you use the visual editor at any time, the single quotes will be automatically changed.

Just testing using escape characters to display the coding without needing the _

[su_tooltip title="<a href='http://example.com'>TITLE</a> content="<a href='http://example.com'>CONTENT</a> behavior="click" close="on"]

sigh…just realised the [code] button in the editor