Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 26 19:25
    amn31 opened #6618
  • Nov 25 09:49
    stefan-niedermann commented #6606
  • Nov 21 19:00
    BenBitDesign commented #6617
  • Nov 21 18:59
    BenBitDesign commented #6617
  • Nov 21 13:52
    doughballs commented #6617
  • Nov 21 06:51
    BenBitDesign opened #6617
  • Nov 20 09:30
    doughballs commented #6616
  • Nov 20 09:06
    melineWb opened #6616
  • Nov 20 09:02
    melineWb commented #3624
  • Nov 20 07:49
    ABDULAZIZ94 commented #5858
  • Nov 19 10:54
    doughballs commented #6615
  • Nov 18 09:59
    Deep-Codes commented #6615
  • Nov 18 03:42
    Smankusors commented #6615
  • Nov 18 03:08
    johnknapp commented #6615
  • Nov 16 17:28
    shameekagarwal commented #4721
  • Nov 16 17:09
    CristianMisake commented #5069
  • Nov 13 13:46
    doughballs commented #6300
  • Nov 13 13:46
    doughballs commented #6300
  • Nov 13 13:22
    les113 opened #6615
  • Nov 13 13:21
    les113 commented #6300
AlphaX2018
@AlphaX2018
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?
weirdjon
@weirdjon
not sure if this has been asked before, but is there a way to make "hidden" work on css materialize select? only "disabled" and "selected" is working for options