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

Home Forums Support Feature suggestion: auto class with added elements/hooks

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1018393
    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.
    Wow!

    #1018439
    David
    Staff
    Customer Support

    Hi there,

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

    #1018444
    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.

    #1018494
    David
    Staff
    Customer Support

    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.

    #1018499
    Pete

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

    Then maybe the element post title?

    #1018531
    David
    Staff
    Customer Support

    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.

    #1018533
    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.

    #1018851
    David
    Staff
    Customer Support

    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>
    #1051065
    Pete

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

    #1051463
    Tom
    Lead Developer
    Lead Developer

    Thanks for the suggestion, Pete! Appreciate it 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.