Wrapper around text – dashboard

Accueil Forums Main plugin support Wrapper around text – dashboard

20 sujets de 1 à 20 (sur un total de 27)
  • Auteur
    Messages
  • #527806
    ondraATH
    Participant

    Hi,
    I need advice where I can add the ‘div’ element around the article text. I need to set background and padding for this block.
    The text is colored in the image.

    Thank you for your advice,
    Ondřej

    Pièces jointes:
    #527891
    Thomas Lartaud
    Admin bbPress

    Hi,

    Don’t add contents directly around our pages shortcodes, this can lead to unattended effects.
    The proper way is to use our template system (or even some simple CSS codes if you just need design tweaks). Take a look at the template system documentation for that.

    As explained in the doc, activate the debug HTML templates when you want to know where templates are requested.

    I’ll give you the full solution for this one so you can manage others one by yourself. As you can see in the below screenshot, a template is called, exactly at the location you’re trying to add your custom code. This template is marked as NOT FOUND. This means that we added here the possibility to add some content there, but we did not create a default template that adds a default content. In other words, there is no template from the plugin into this location, but there is a location that you are free to use.

    template

    According to the docs and the screenshot, you’ll need to create a file named customer-dashboard-header.template.php and you need to put it in wp-content/customer-area/templates (warning: I did NOT say wp-content/plugins/customer-area/templates never edit plugins files !!).

    Then paste the following content to it :

    <?php /**
     * Template version: 0.0.1
     * Template zone: frontend
     *
     *  = 0.0.1 =-
     *  New custom template
     */ ?>
    <div id="hello_wrapper">
    <h2>Hello World !</h2>
    </div>
    

    Notice the 0.0.1 version. As stated in the doc, the last digit number is reserved for you. Never bump the two first ones, because it is for us. This will allow us, for instance, to create a template with version 1.0.0, and if you have a template with a lower version, like 0.0.1, WP Customer Area will tell you with an admin notification, that there is a new template available with a more recent version than yours. This allows you to keep your edited templates up-to-date.

    Hope that helps.

    Regards.

    #527975
    Thomas Lartaud
    Admin bbPress

    By the way,

    I realized that you were asking for adding a wrapper around for the whole page.

    The process would be the same, but by using another template, as shown in the screenshot below.

    template2

    Then you can apply some custom backgrounds and paddings to the .cuar-page-content-main div.

    body.customer-area-active .cuar-css-wrapper .cuar-page-content-main {
    padding: 30px;
    background: yellow;
    }
    

    Regards.

    #528407
    ondraATH
    Participant

    Hi, thank you for the good instructions. I read it 3 times and I think the most important step was to create a new file, copy the content into it and save it to wp-content/customer-area/templates

    I did this, but now when I look into the console on the web, I don’t see id=”hello_wrapper” anywhere.

    And in the image below, I send the HTML layout and styling class=”cuar-page-content-main” is unnecessary. My content is not wrapped around this element.

    Can I ask for advice on what I’m doing wrong?

    Thank you for your advice

    Pièces jointes:
    #528429
    Vincent Mimoun-Prat
    Admin bbPress

    Hi

    Have you double checked the file name?

    In the Html source code, do you see the debug information about templates? Is there anything about the template you have created?

    #528441
    ondraATH
    Participant

    Hi, file name and location I think, see screen.
    No debug information is written in the Chrome console.

    I created this template and uploaded it to FTP and did nothing about it.

    Pièces jointes:
    #528448
    Vincent Mimoun-Prat
    Admin bbPress

    Debug information is included in the HTML source code. See Thomas screenshot: https://wp-customerarea.com/app/uploads/2019/08/template2.png

    You need to enable that in the settings (see documentation about the template system)

    #528480
    ondraATH
    Participant

    Thank you. I managed to display the debug information.

    Gradually, I tried to rename the test file to customer-pages-contextual-toolbar.template.php, customer-page.template.php, and customer-dashboard-content.template.php and “Hello word” instead of each block, but my the text is still there. I don’t know how to name the file.

    Can you advise me, please?

    Pièces jointes:
    #528544
    ondraATH
    Participant

    Hi,
    I did it according to a simple tutorial and “Hello word” doesn’t appear anywhere on the bulletin board (dashboard).

    If I change the name eg. customer-pages-contextual-toolbar.template.php, “Hello word” is displayed. So I think I save the template to a good folder.

    And don’t worry, only in /ath/wp-content/customer-area/templates I change the names of the “Hello word” content file.

    Thanks,
    Ondrej

    #528680
    Vincent Mimoun-Prat
    Admin bbPress

    You can try it another way:

    
    add_action('cuar/core/page/before-header?slug=customer-dashboard', 'cuar_custom_wrapper_open', 5);
    function cuar_custom_wrapper_open() {
        echo '<div class="my-page-header">';
    }
    
    add_action('cuar/core/page/after-footer?slug=customer-dashboard', 'cuar_custom_wrapper_close', 5000);
    function cuar_custom_wrapper_close() {
        echo '</div>';
    }
    

    That code can be put in your functions.php file

    #529704
    ondraATH
    Participant

    Hi, I found functions.php file wp-content/themes/twentyseventeen/functions.php. But if I placed the functions in this file, the site crashed.

    I assume that the correct location of the ship block should be in wp-content/plugins/customer-area/skins/frontend/master/cuar-functions.php

    Please confirm that the location in this file is correct. Because I don’t have wrapping ‘div’ with class = “my-page-header” anywhere in my code.

    Thank you

    #529719
    Vincent Mimoun-Prat
    Admin bbPress

    Hi

    The location I have given is the proper one. functions.php from your theme

    If the site crashes, that means there is an error. You should find the error message and fix the code accordingly.

    #529734
    ondraATH
    Participant

    Sorry, but the problem was that I had these two functions in another file.

    Now the functions are only in /wp-content/themes/twentyseventeen/functions.php. Site is running fine.

    Unfortunately, I still can’t see class=”my-page-header” anywhere in the dashboard (even in the DOM in the browser console).

    Do you still wonder where there might be a mistake?

    Thank you

    #529744
    Thomas Lartaud
    Admin bbPress

    Hi,

    Try to add these functions into a custom WP Plugin. See our Code snippets documentation.
    Some hooks into plugins are executed before the theme runs, so it might be too late to use them in your theme functions.php

    Regards.

    #529763
    ondraATH
    Participant

    Thank you for the instructions. I created a folder in wp-content / plugins / ondra-test and created a content file

    <?php
    /**
     * Plugin Name: My First Plugin
     * Plugin URI: http://www.mywebsite.com/my-first-plugin
     * Description: The very first plugin that I have ever created.
     * Version: 1.0
     * Author: Your Name
     * Author URI: http://www.mywebsite.com
     */
    
    add_action('cuar/core/page/before-header?slug=customer-dashboard', 'cuar_custom_wrapper_open', 5);
    function cuar_custom_wrapper_open() {
        echo '<div class="my-page-header">';
    }
    
    add_action('cuar/core/page/after-footer?slug=customer-dashboard', 'cuar_custom_wrapper_close', 5000);
    function cuar_custom_wrapper_close() {
        echo '</div>';
    }
    
    echo 'Ahoooooj';
    

    I intentionally added a file to the end

    echo 'Ahoooooj';

    But nowhere (dashboard, post, article) is ‘Ahoooooj’ written to me. How do I know that the plugin is enabled? I can’t find anything about the web administration, I guess.

    #529840
    ondraATH
    Participant

    Sorry, the plugin in the administration of potential and activate. I got the message “Ahooooj” on the web. Immediately under the ‘body’ tag, ie in the header of the site.

    But ‘div’ s class=’my-page-header’ is not listed anywhere on the web.

    I already feel unable that even this simple function can not start.

    #529871
    Thomas Lartaud
    Admin bbPress

    Hi,

    Sorry that you are experiencing some issues.

    Try to download the attached plugin and activated it, this should work.

    Regards.

    Pièces jointes:
    #531212
    ondraATH
    Participant

    Hi,
    thank you for your plugin. It works, it just encapsulates a different part in the code than I need.

    I enclose an image where the left side shows ‘div’ s class=”my-page-header” and the right side of the image shows the block my block and its parent.

    I think we understand what I want to achieve, but we’re just not doing it yet.

    Could I ask you one more attempt to modify the plugin to wrap my block? And it doesn’t have to be just my block, any more, but it doesn’t have to include ‘div’ s class=”cuar-page cuar-clearfix cuar-page-customer-dashboard”.

    Thank you very much

    Pièces jointes:
    #531291
    Thomas Lartaud
    Admin bbPress

    Hi,

    Not sure I understand your question.

    Is the text properly placed? I’m not talking about the div and its background, for now, I’m talking about the text on the screenshot on the left. Is it okay?
    You wanted the text to be shown under the toolbar, right?

    #531321
    ondraATH
    Participant

    Yes, the text is in the right place. For sure I send a screen of text (block) that is meant.

    Pièces jointes:
20 sujets de 1 à 20 (sur un total de 27)
  • Vous devez être connecté pour répondre à ce sujet.