Tagged: CSS, Layout elements, Modal
-
AuthorPosts
-
July 13, 2019 at 1:31 am #1118237
Heya… As I’m creating new layout elements, there are some instances where I would like to customize the layout of the editor modal. Specifically the “modal_class”. Is there a good, update-proof method of doing this that I can include with custom elements?
July 14, 2019 at 9:45 pm #1118572Hey Kahil,
I have asked Gunter to take a look!
Best regards,
BasilisJuly 14, 2019 at 10:18 pm #1118591I figured it out I think. I’ll just call in the CSS file I was already for the front-end too. Seems to work. There are a lot of alignment issues with the modal editor window, especially with the av_half part. So I have figured out how to do this.
What I CAN’T seem to figure out is how to hook into the preview window for the modal. I’ve called the CSS file in the element file, but it doesn’t apply to the preview window. I’ve asked about this before and no one has come up with a solution. The only way to get it to work is to manually edit the file that handles the preview window and call out the CSS file there…..but I have to do so every time there’s an update to the theme. Would be great to have some kind of hook that I can include in the element file that would do that. I’m trying to come up with more complex looking elements and a preview is pretty much needed….but without that hook, it’s hard to wanna do so. I know how users are….they want the devs to do everything and make it easy for them. Hahahahaha
July 16, 2019 at 9:25 pm #1119296Hi,
Gunter still can look into the topic, I have asked him once again! He is busy with a big new update, but I hope he can drop an input :)
Best regards,
BasilisJuly 17, 2019 at 1:04 pm #1119567Hi,
Did you check filter avf_preview_window_css_files in config-templatebuilder\avia-template-builder\php\template-builder.class.php ( around line 732 ).
There you can add CSS files to be loaded for preview.Best regards,
GünterJuly 17, 2019 at 11:49 pm #1119738I’ve been having to manually edit that file each time there’s an update. I haven’t been able to get a hook or filter to work in the element file itself to work so that it works. Do you have a working example of that? I’ve tried several times and it never seems to work. The only thing that does is editing the template-builder.class.php file. I’ve had to resort to putting instructions on how to do that in the elements where that is needed, which also have to be updated to change the line number since that tends to change with the updates as well. Just trying to make it easy for novice users.
July 18, 2019 at 9:20 am #1119851Hey!
What have yiou been editing in the template-builder.class.php file (function and a short code example).
Not clear what you really want to do
Regards,
GünterJuly 18, 2019 at 9:25 am #1119852To add in a call to the css file my custom layout elements use so they will display correctly in the preview pane. I call it in the element file like normal so it will display correctly on the front end, but to get it to do so in the preview pane I have to manually edit that file and provide instructions for others to do the same.
I’m trying to find a way to get the more complex elements to load correctly in the preview pane without that extra edit of a core file, which has to be done after each Enfold update.
July 18, 2019 at 12:55 pm #1119899Hi,
If you look a few lines above filter avf_preview_window_css_files you find a foreach where the default shortcode css file urls are added to $css as key and 1 as value.
You can add this filter to your elements in the constructor and then add:
$css['your URL to css file'] = 1;
Best regards,
GünterJuly 23, 2019 at 11:51 pm #1121331Heya,
I have tried several times to get this to work and I just can’t figure it out. I’m not an expert at this. But I just can’t get it to work for me.function load_preview_css( $css = "" ) {$css[get_stylesheet_directory_uri() . '/shortcodes/css/spiderfly.css'] = 1;}
July 28, 2019 at 8:03 am #1122481Hi,
Sorry for the delay, I asked Gunter again on our chat to look over :)
Best regards,
BasilisJuly 29, 2019 at 12:54 pm #1122736Hi,
I thought you are familiar with WP filters and basic php – sorry for not being clear enough.
Inside the class declaration of your element add:
public function __construct( $builder ) { add_filter( 'avf_preview_window_css_files', array( $this, 'handler_avf_preview_window_css_files'), 10, 1 ); parent::__construct( $builder ); } public function handler_avf_preview_window_css_files( $css = array() ) { $css_url = 'url to your CSS file'; $css[ $css_url ] = 1; return $css; }
Best regards,
GünterJuly 29, 2019 at 9:34 pm #1122953Heya,
I am only somewhat familiar with it all. Self-taught in my spare time. That worked! Thank you!
July 30, 2019 at 1:26 am #1122996Follow-up question…slightly related as it’s part of the same element… I know how to make it so that I can update the element name to reflect things like specific products, but it only does so after the page is saved/updated and the editor page refreshes. Is there a way you know of to make it update the title in the “editor_element” when you hit the save button in the editor modal?
As an example…the element “Modern Product”. I put it where I want, edit it to select a specific product, hit save in the modal and it closes. At this point, the title in the layout editor will still say “Modern Product”. Once I update the page or save the draft, the title will have changed to the name of the product.
I have tried taking a queue from the Special Heading element and including “data-update_with=” in there, but it didn’t work. So I’m assuming that I am missing something in the setup. I just can’t figure out what that is.
Sorry for all the questions. Just trying to better myself on this so I can make these custom elements better….especially the woocommerce ones. When it comes to products, some people might have a lot of products and having the title update when the edit modal is saved can really help with organizing so one can know what the element represents without having to hit “save draft” or “update” a lot.
Here is what I currently have.
function editor_element($params) { $params['args'] = shortcode_atts(array('link' => '', 'new_title' => '', 'tagline' => '', 'newbadge' => '', 'sale' => '', 'sale_bg' => '', 'newprod' => '', 'newprod_font' => '', 'newprod_bg' => '#588737', 'extratag' => '', 'extra_bg' => '', 'img_size' => 'shop_catalog','heading_size' => '30', 'prefix' => '', 'suffix' => '', 'overlay' => '0.6', 'overlay_start' => '10', 'overlay_end' => '50' ), $params['args'], $this->config['shortcode']); $templateNAME = $this->update_template("name", "{{name}}"); global $product; $link = isset( $params['args']['link'] ) ? $params['args']['link'] : ''; $product = wc_get_product( $link ); $prod_title = $product->post->post_title; $params['innerHtml'] = "<img src='".$this->config['icon']."' title='".$this->config['name']."' />"; if ($link) {$params['innerHtml'].= "<div class='avia-element-label'>".$prod_title."</div>";} else {$params['innerHtml'].= "<div class='avia-element-label'>".$this->config['name']."</div>";} return $params; }
- This reply was modified 5 years, 3 months ago by Kahil.
July 31, 2019 at 7:20 pm #1123633Hi!
Allow some time for the follow up :)
Regards,
Basilis -
AuthorPosts
- You must be logged in to reply to this topic.