How to customize a Feature Discovery block in Materialize


[Music…] … So we have successfully implemented this feature discovery content into our project and we have initialized them and we have completed this whole part into our project; it is satisfactorily working so far; we can see that on clicking this open button right over here, it is practically working there it goes. It is working, there is no problem. If we just switch on to this mobile responsive view, there goes the class, which is opening from this extreme right. There it goes; the title and a bunch of text. Now. the next… thing that we need to do over here is to customize this thing in an accordance. In the first place all we want that from this extreme down bottom, we need to lift them up into a little bit of uppish; for say we are wanting to place them into this extreme left position, fixed into left position. In that particular case all we need to get back to our index.html and here in the very first case all we are going to do, we are going to use a particular class of ‘fixer’. Now this class is not created in our materialize css; …it is not practically been created into our materialize css; so that is why we need to create it ourselves; we need to create it manually. That is why we are copying this classname from here. Get back to ‘stylesheet.css’ and here, first of all, we are putting it over here; declaring the class name and we are saying that the position will be fixed.. up to a certain distance of for say, bottom; for say, 20rem; Press ctrl s get back to your project and reload and now we can see that these particular buttons, those are practically staying in the extreme left position, into a fixed position. Now next comes the controversy, if you do not like it to be placed over here; and this is definite in the lower width devices here these two buttons are practically occupied this extreme left position and, some part of the content, it may lie beneath of this two particular button, so it is a matter of dispute, it is a matter of your own customization, your own specification; whether you want them to placed right into this particular segment or you want to place them into a separate place where you wish to make this appear; that’s up to you; so in case if you do not wish to keep it here, or if you wish to place it on the top of this page; there goes another possible solution; you can see that from top it is not practically leaving a total margin of 20rem. There it goes; this is the 20rem margin from the bottom right now; in this particular case I would be preferring this bottom 20rem; for the time being.. There it goes; press F12 and open up this code inspector panel. In the next case if we click on this particular ‘open’ here, we can see that this is featured content display that you were expecting over here; so, now click on it and there goes the class that is responsible for its appearance right over here; this is the div class tap-target,and now if we click over it; we can see that each and everything is been placed over here in the extreme right panel of this code inspector panel; you can see that these are the width or height or all these sort of things; like this height is 600px provided over here; the position is absolute; so in the first place if you want to off this border-radius then you can see that on unchecking this particular border-radius segment you are able to make it square again. So if you do not wish it to be round here, then all you need to be you need to turn this border-radius off. In that case you need to copy this ‘tap-target’ from here this is class that you will be needing in this purpose You will be getting back to our project and here we will be placing this ‘.tap-target’ class and in this segment, in the first case, all we are going to do, we are going to put this border-radius as 0. Press ctrl s, get back to your project and reload; and now if we just click here we can see that the border radius is now turned off. In the next case, if we wish to change the background color of this particular segment; then all we need to do, we need to get back to index.html and here, this is the div class ‘.tap-target’ which is responsible for everything; first of all get back to the materialize official website and here, into this css part, we will be observing that color pallet right over here; and here for say we are wishing to use this ‘pink-darken’ class; so all we need to do, we need to copy this thing; copy. Get back to your project and reload. There it goes. Paste it over here. Now press ctrl s, get back to your project, and reload; ‘open’ and you can see that the class is now changed and the background color is now changed into that particular color. It is now changed into that particular color which is been defined for this ‘pink-darken1’ class into their color pallet of materialize official website. In the next case if you wish to change the color of this text; in that particular case all we need to do, we need to use this ‘white-text’; reload. There it goes; the color of this text is now changed; it is now changed into this white color right over here. So this is how you can make customization into it. So this is the end of this materialize css template…

Add a Comment

Your email address will not be published. Required fields are marked *