[Resolved] Feature suggestion: auto class with added elements/hooks

[Pete]

I’ve got an awesome idea Tom… hear me out!

Have a tick box on each element/hook ‘post’ that will ,<span> the hook in it’s own class using the post ID of the element post!

e.g.

<span class="1234">
all my awesome hook stuff
</span>

You like it… don’t you Tom.

[David]

Hi there,

interesting – what would be the purpose / benefit of doing so?

[Pete]

Having the option to apply custom css to that particular area.

For example you have some H2 after the main content and want to apply css to just the hook H2. Without a class, the H2 styling could apply to the whole page.

Often we apply code via the element hook that contains specific information that may often need separate styling.

Having a quick automatic way of adding a css class that can be associated with the specific hook would be be handy to find and apply css.

Infact, even a body class of all the post element hook IDs applied to each page would be handy.

[David]

Maybe some merit in Body classes, like the post-ID-XXX, for page level styling but i generally use body classes related to the Display Rules i am using.

Auto adding a HTML wrap to the content with a rather non-descriptive CSS class i could see leading to more work and harder to maintain code. You would also need to select which HTML element to wrap the hook content in.

It is better to add your own HTML wrap and well named CSS Classes.

[Pete]

Auto adding a HTML wrap to the content with a rather non-descriptive CSS class

Then maybe the element post title?

[David]

What happens if the element title is really long or worst still if it gets edited?
Also have to consider what the HTML wrap element would be – if clicking a button to add the class automatically wraps my content in a SPAN – it could lead to invalid HTML if my content contains a block element. So that requires another option.

You also end up writing very specific CSS rules for that element alone. Which could lead to duplicate CSS rules or having to string multiple selectors for each rule e.g

.my-hook-element-101, .my-hook-element-102, .... {
/* CSS properties */
}

which makes maintenance more complicated.

As opposed to adding your own wrap and necessary classes e.g:

<div class="db-call-to-action db-large-heading">
<!-- After Header CTA -->
<!-- more HTML -->
</div>

Case for creating a CTA below the header – i can reuse the db-call-to-action class for a CTA element elsewhere but choose to omit the db-large-heading class or add others. So my CSS is now made of re-usable blocks of code.

All suggestions to help automate frequent user actions are well received and appreciated. I just think there is too many variables to be considered here and second guessing what users are expecting would be problematic.

[Pete]

If it’s added as a tick box option and the post IDs clearly shown on the post edit page (and the list of posts) then I think that’s workable.

[David]

Maybe i am missing something but i can’t see what the benefit is – when i can simply add two lines of HTML to the Hook content:

<div class="my-unique-class any-other-reusable-class">
<!-- HTML / Code etc here -->
</div>

[Pete]

I can have over 30 hooks easy, ticking adding that above is harder than having it auto inserted or ticking a box.

[Tom]

Thanks for the suggestion, Pete! Appreciate it 🙂

[Author]

Posts