Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 10:33
    eduardoalcantara commented #6106
  • 03:04
    dhavalveera opened #6661
  • Oct 17 08:17
    LoganTann commented #6658
  • Oct 17 08:06
    LoganTann commented #6605
  • Oct 17 08:04
    LoganTann commented #6625
  • Oct 17 08:03
    LoganTann commented #6639
  • Oct 17 07:57
    LoganTann commented #6651
  • Oct 13 17:17
    rafaelsales closed #6648
  • Oct 12 16:12
    dargmuesli closed #6142
  • Oct 02 07:00
    justAdevTV commented #6649
  • Sep 30 10:46
    DivyanshSareen commented #2582
  • Sep 30 10:46
    DivyanshSareen commented #2582
  • Sep 30 10:46
    DivyanshSareen commented #2582
  • Sep 29 12:20
    kianweelee commented #4759
  • Sep 22 05:40
    apancutt closed #5224
  • Sep 21 23:48
    m33ts4k0z commented #4056
  • Sep 21 10:08
    godalming123 commented #6532
  • Sep 18 19:32
    DanielRuf closed #6660
  • Sep 18 19:31
    DanielRuf opened #6660
  • Sep 18 18:44
    DanielRuf commented #6338
AlphaX2018
@AlphaX2018

by the way, initializing without jquery is recommended

Does this mean to use the PHP initilisation by copying it into the document ready of my theme?

I'm just seeing that its not PHP, the one initiliastion is javascript and the other jQuery. so the javascript initialisation is recommended if i undrstand correctly.
AlphaX2018
@AlphaX2018
having done further reading, i guess the implementation would look as follows: 1) in my child theme, i'll create a init.js with the initialisation javascript code. 2) in my child theme function.php i add an action to add my new function to the wp_enqueue_scripts to load my init.js. the remaining problem (apart from testing) i see is that this may no be loaded anymore before the /body tag but in the header.
AlphaX2018
@AlphaX2018
ok i found that wp_enqueue has additional variables to allow loading scripts in "footer". I can see the init.js now in the page code, but how can i test if the path and everything is ok? when I click on the js path link, the theme provides an error, i guess for protection reason
Sean Doherty
@doughballs
@AlphaX2018 I’m away at the min but I can show you my enqueues on Monday (if you can wait that long). Also I work exclusively in WP so I can help out in that area.
Sean Doherty
@doughballs
@AlphaX2018 so, just getting back to this - it's really simple:
<?php

// Load scripts (header.php)
function load_materialize_js()
{
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {

        wp_register_script('materializejs', get_template_directory_uri() . '/js/materialize.min.js', array('jquery'), '1.0.0'); // Materialize
        wp_enqueue_script('materializejs');

        wp_register_script('init', get_template_directory_uri() . '/js/init.js', array('jquery'), '1.0.0'); // Custom JS
        wp_enqueue_script('init');
    }
}


// Load styles
function load_materialize_css()
{
    wp_register_style('materialicons', 'https://fonts.googleapis.com/icon?family=Material+Icons');
    wp_enqueue_style('materialicons');

    wp_register_style('materializecss', get_template_directory_uri() . '/css/materialize.min.css', array(), '1.0.0', 'all');
    wp_enqueue_style('materializecss');

    wp_register_style('style', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
    wp_enqueue_style('style');
}



// Add Actions
add_action('init', 'load_materialize_js'); // Add Custom Scripts to wp_head
add_action('wp_enqueue_scripts', 'load_materialize_css'); // Add Theme Stylesheet
}

?>
The key is hooking into wordpress core using init here: add_action('init', 'load_materialize_js'), this takes care of positioning the scripts correctly (by the footer). And the same with wp_enqueue_scripts, these are placed in the head.
AlphaX2018
@AlphaX2018

Hi Sean, thanks a lot for your additional help! Really appreciate it! I dug further and found out that my theme uses a template script for the dropdown which is called Select2. I think it may just get too complicated to combine 'Materialize' and Select2

@AlphaX2018 so, just getting back to this - it's really simple:

<?php

// Load scripts (header.php)
function load_materialize_js()
{
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {

        wp_register_script('materializejs', get_template_directory_uri() . '/js/materialize.min.js', array('jquery'), '1.0.0'); // Materialize
        wp_enqueue_script('materializejs');

        wp_register_script('init', get_template_directory_uri() . '/js/init.js', array('jquery'), '1.0.0'); // Custom JS
        wp_enqueue_script('init');
    }
}


// Load styles
function load_materialize_css()
{
    wp_register_style('materialicons', 'https://fonts.googleapis.com/icon?family=Material+Icons');
    wp_enqueue_style('materialicons');

    wp_register_style('materializecss', get_template_directory_uri() . '/css/materialize.min.css', array(), '1.0.0', 'all');
    wp_enqueue_style('materializecss');

    wp_register_style('style', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
    wp_enqueue_style('style');
}



// Add Actions
add_action('init', 'load_materialize_js'); // Add Custom Scripts to wp_head
add_action('wp_enqueue_scripts', 'load_materialize_css'); // Add Theme Stylesheet
}

?>
I tried to find help on Stackoverflow how to make a Select2 dropdown expandable, but surprisingly it seems too challenging (I had zero replies).
Given that the theme uses Select2 by default, I dont want to navigate away from that and create even bigger problems.
Duke Yin
@yduke
Hi guys, is there a way to clear a "Chips" programmably? tried $('.chips-initial').material_chip('data'); = '' but not work
$('.chips-initial').material_chip('data') = ''
Bob James
@mobibob
in the materialize grid for columns, what does "push" and "pull" mean? I don't get it. maybe an mention of when it is useful to use.
i have a (line) space between rows. how can I get that removed? one suggestion was to put all "rows" in a single row, but I possibly want to style different rows differently (e.g., alternating colors for even/odd row).
are there pre-defined container/content "role"s? I know about "main", and I have seen others, but I don't know if they are custom or pre-defined.
Duke Yin
@yduke
Hi guys, is there a way to clear a "Chips" programmably?
Sean Doherty
@doughballs
@mobibob re space between rows - there is a margin bottom on every row, take it off.
1 reply
@mobibob re role - are you talking generally, or materialize? https://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html
Sean Doherty
@doughballs

@mobibob re push pull - "You can easily change the order of your columns with push and pull."

If you look at the example in the docs, the cols are 7-5 initially, but display 5-7 because of the push-pull. It is to reverse the order of the columns at certain screen sizes. Useful depending on content.

GRawhideMart
@GRawhideMart
Hello everyone! Does anybody have an issue with fab buttons?
Anthony House
@tuffant21
image.png
image.png
@mobibob here is an example where I use push and pull. You always want to go mobile first.
Here you can see on mobile, I have col s12 for additional details. Then col s12 for the map.
On desktop however, I have m6 push-m6 l7 push-l5 on additional details and m6 pull-m6 l5 pull-l7 on the map. This causes the map to be to the left of the additional details
@GRawhideMart I have not had any issues with it
@yduke Can you post a codepen?
computerwiz12890
@computerwiz12890
Can I make a suggestion for an icon? Is it possible to add one to the already huge list?
Anthony House
@tuffant21
I think you would have to reach out to google to add an icon :p
Materialize references google's icon here https://material.io/resources/icons/?style=baseline
computerwiz12890
@computerwiz12890
Oh, I thought the developers behind Materialize were in this chat...
It's not a huge deal, I just think the "queue" icon could look more "queuey"
image.png
More like this.
"low_priority" will work as a replacement...I just think it could be better.
Anthony House
@tuffant21
They are, but I don't think I've ever seen them active in it. There are some devs on the side who are working on a new version. But I don't think they have access to change material icons. They're all google icons
Nice icon though!
computerwiz12890
@computerwiz12890

Ahh, gotchya.

Thanks! I made it myself in Paint.net. ^_^

Sean Doherty
@doughballs
@computerwiz12890 have you got the Startup theme btw? Well worth it, only £29. Anyway, in that theme they have designed some new icons and include them as a font (simple-line-icons), so they can be used using the i tag. I haven't played around with them, but that would be a really quick and easy way to design your own icons and then use them in your project 'the materialize way'.
computerwiz12890
@computerwiz12890
Nope, never heard of the Startup theme @doughballs. I'll have to check it out! Thanks
computerwiz12890
@computerwiz12890
Cool, thanks!
Willem Goudsbloem
@wgoudsbloem
Is there an easy way to adjust the material theme colours? For example material design talks in primaryColor, primaryColorLight, PrimaryColorDark, etc..
Sean Doherty
@doughballs
@wgoudsbloem yes, with Sass:
$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;
$primary-color is referencing the color set in _color-variables. The theme uses two main colors - teal and light red - so you could quickly change the whole theme by changing these two claues and then re-compiling the css file (as easy as opening the scss file and saving it if you use VSCode with live sass compiler installed)
Willem Goudsbloem
@wgoudsbloem
I was hoping to stay away from recompiling, but I guess that's the nature of the css beast :( Thanks for the pointer!
Anthony House
@tuffant21
You can use css to set colors, but you have to set it for each individual item. Kind of a pain tbh. That's the route I took, and now I wish I took sean's approach! :p
Willem Goudsbloem
@wgoudsbloem
yeah, I get that. my issue is that I ca't use the CDN now, so I have to set that all up which is more work than I hoped for.
albertrw83
@albertrw83
For the Materialize Chips autocomplete, once one chip is selected, how could I remove that as an autocomplete option when user is adding another chip?