Jump to content

Search the Community

Showing results for tags 'w3.css'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 38 results

  1. W3.css modal forms issue with mobiles

    When you add a form that is modal and view on a mobile device (apple mostly) the background still scrolls with your finger. This creates a problem as the form fields (Inputs) do not line up and it almost impossible to edit or add text to input fields as you cannot select them. To reproduce just run the modal login example on your mobile phone and move your finger then try to add text to the input fields - !
  2. W3.CSS Card Heights

    Hi everyone, I borrowed part of the Marketing / Website Template (W3.CSS), specifically the <!-- Work Row --> portion. It looks fantastic, but according to the device browser, (specifically phones and tablets) when in "landscape" mode, the "w3-card" divs have different height according to the text. I've been trying for days to find a solution - flexbox, w3-cell, pseudo-elements - mostly way above my understanding, and nothing has worked so far. Wouldn't be surprising if I've found a valid solution and mucked it up because of my inexperience Anyway, here's the code from the template. Maybe delete <p>Blablabla</p> from one one of the divs inside the cards to see the issue. Actually the length of text I have inside those divs results in the cards showing the same height down to 1440px, any smaller results in the cards showing unequal height. <!-- Work Row --> <div class="w3-row-padding w3-padding-64 w3-theme-l1" id="work"> <div class="w3-quarter"> <h2>Our Work</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="w3-quarter"> <div class="w3-card w3-white"> <img src="/w3images/fjords.jpg" alt="Vernazza" style="width:100%"> <div class="w3-container"> <h3>Customer 1</h3> <h4>Trade</h4> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> </div> </div> </div> <div class="w3-quarter"> <div class="w3-card w3-white"> <img src="/w3images/lights.jpg" alt="Cinque Terre" style="width:100%"> <div class="w3-container"> <h3>Customer 2</h3> <h4>Trade</h4> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> </div> </div> </div> <div class="w3-quarter"> <div class="w3-card w3-white"> <img src="/w3images/mountains.jpg" alt="Monterosso" style="width:100%"> <div class="w3-container"> <h3>Customer 3</h3> <h4>Trade</h4> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> </div> </div> </div> </div>
  3. Accordion Javascript to change button text

    I have some W3.CSS accordions on a webpage based on this tutorial. They work fine, but I'd like to change the button text too (not just show/hide the div) When shown, I'd like the button to show "Click for details". When hidden, I'd like the button to show "Hide details". Thanks in advance for any assistance/advice you can give me.
  4. Input field text not visible

    Text in input field isnt visible. I'm trying to create a nav with an input field using w3.css. When I input text, nothing comes up. And also how do I remove the hover effect in w3.css? Thanks a lot
  5. W3 website templates?

    if i want to use a free ws.ccs website templates, do i have to keep it linked to the w3 site and the other sources i.e. cloudflare? or can i download the source files i.e. ( <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> ) and rename them to my servers? thanks
  6. Hi, I need to reference the w3.css stylesheet on a server for a competition (building a website is required and we want a good looking one, but we can't have the stylesheet reference a link it has to be on the server). When I went to download the css the link provided me with a page filled with a bunch of code that I couldn't fully understand, but it did not download any files. Anyways I simply don't know what I'm doing and would appreciate some help on this. Thanks
  7. W3.css Tabs

    Hi, I am using the w3.css tabs and have a customised cursor. However the cursor will not work over the tabs. What do I need to set to get it to work over the tabs also?
  8. 1. Glad that there is no conflict of w3.css with bootstrap. 2. But materialize.css ruins w3.css which also disturbs my mind. Lets build our own conflict free materialize css or some edits to w3.css 3. Wappalyzer doesnt recognize w3.css as a technology. Please help me work on these.
  9. hello, new user of w3.css here... I'm trying to create a navigation bar with dropdown elements. If the dropdown is the first element in the bar, it is always highlighted, as if you'd hover over it, and it keeps that state. Example (from the try-editor, just change the order of elements so that w3-dropdown-hover is the first one) <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Navigation Bar with Dropdown</h2> <p>Add a dropdown menu inside the navigation bar:</p> <div class="w3-bar w3-light-grey"> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> </div> </div> </body> </html> What am I doing wrong here? Or is it a bug? thanks for a tip, uno
  10. w3.ccs -

    hi i'n new here - i have done homepage designs on and off for the last twenty as a hobby (i'm no a programmer), mostly using serverside php and the tabels for building the side at clientside. it's now time to update the company site, and that the mobiles has come into the scene i have searched the net to find out how to set flexible sites, and i'ts my impression that i can do a lot with w3.css. but as this is all new to me i have got some problems / questions. i use a <div class="w3-row"> to display some items, and every item is in their own <div class="w3-col l4 w3-margin-bottom"> but if one of the items has more text than others, then the layout jumps around. i'm sure the is a way to avoid this, and that it's quite simple - but i just cant figure out how :-( can anyone help? thanks jorgensen
  11. The intro to w3.css says "Uses standard CSS only (No jQuery or JavaScript library)" which is technically true but a bit misleading. Javascript must be enabled in the user's browser in order to use useful features like modal popups. What's the big deal? Someone might create a website using a modal popup for users to register or purchase things, only to find that visitors using screen readers because they're visually impaired can no longer participate or buy things. So the site is no longer fully accessible, which is illegal in some countries and some class action lawsuits have already happened. I'm not saying features that use scripting aren't useful, but they should come with a big accessibility health warning to remind developers to include alternative ways to access things. It's easy to forget because most development is done with scripting enabled.
  12. I've been building my website for the first time using w3.css 4 - which I think is brilliant by the way. Makes things so much quicker. However, I've been wondering... when building a drop-down menu (like below) is there any requirement to include <ul> and <li> tags, even though the menu works and displays perfectly just using the w3 classes. I am guessing that it's most prob good practice to include the <ul> tags for search engine crawling purposes, but if anyone can shed any light on whether the these tags are actually required, I would appreciate it. Cheers. <!-- From https://www.w3schools.com/w3css/w3css_dropdowns.asp --> <div class="w3-dropdown-click"> <button onclick="myFunction()" class="w3-button w3-black">Click me</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-card-4 w3-animate-zoom"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div>
  13. I'm editing this template: https://www.w3schools.com/w3css/tryw3css_templates_clothing_store.htm All the links in the left menu point to the same page, like this: <a href="#" class="w3-bar-item w3-button">Dresses</a> However, when I try to point to a new page, like this: <a href="w3test01.html" class="w3-bar-item w3-button">Test</a> then the new page covers the menu as well. How can I make new pages appear behind the menu, like the original page? All the W3.CSS templates only use one page. Thanks for any help!
  14. Does anyone have any suggestions, or can help me with the following please: I am using w3.css for the first time, but I am struggling to line-up google icons with the text (using the w3-bar-item and w3-button classes) in my navigation bar. I have tried adding my own css (relative positioning, padding-bottom/top, and even changing the font size of both icon and text) but nothing seems to work. I have also gone through w3 references, but can't find the appropriate class that might make the icons and text line up properly. Any help would be very much appreciated. <div id="topnav1" class="w3-bar"> <a href="#" class="w3-bar-item w3-button"><i class="material-icons" style="font-size:23px;color:#272828;">phone_iphone</i>01382 339 605</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">directions_bus</i>Minibus Hire</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">build</i>Autocare</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">mail</i>Contact Us</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">navigation</i>Visit Us</a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">MENU &#9776;</a> </div> <div id="topnav2" class="w3-bar-block w3-hide w3-hide-large w3-hide-medium"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div>
  15. w3.css: w3-panel breaks CSS Grids

    FYI: The w3-panel class breaks CSS Grid Layouts if added to an element with display: block, by creating an empty, unstyled element at the beginning of the grid. Creating a wrapper element and adding w3-panel to _that_ works, but is a cludge.
  16. W3.CSS Dropdown content issues

    I'm having an odd issue with a drop-down menu using w3.css and the w3-bar, w3-dropdown-hover & w3-dropdown-content classes to create a drop-down navigation menu. When the dropdown content contains only one or two links, it works fine, but anything more causes the dropdown content width to extend far further than necessary. I'm sure I'm doing something wrong, but I followed the example given on https://www.w3schools.com/w3css/w3css_navigation.asp and I can't see where I've messed it up. I've attached a screenshot showing the oddly wide dropdown menu, and the live site can be visited at www.aridsmart.com if anyone wants to check out my CSS and HTML.
  17. Designing for mobile -- short pages

    One of the pages I've got for a mobile application is "shorter" than most phone screens. Since I've taken pains to use a color schema that does not use white backgrounds, is there any way to tell the browser what color to paint the otherwise undefined space? I'm using w3.css color tags in the body and want to match the background to the last container in the stack, so that any remaining whitespace is tinted. My first thought was to use the background-color property. I'm not sure if it plays well with w3.css tagging, and even if I color-code around that, it seems to conflict with the max-width property I'm using to force my browser to render a mobile-phone screen sized output. I realize that I can go forward on the production version without the max-width field set and that will likely be the end of the issue, but I'd like to 'see it' during testing. Any thoughts?
  18. W3.CSS: responsively crop image to square

    I've got this responsive image gallery, made with W3.CSS <div id="portraits" class="w3-row tab"> <div class="w3-half"> <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> <div class="w3-half> <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> </div> <--! more stuff here -->... These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other. I've looked for answers. Putting the image in the div etc... doesn't work... I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask. Thanks in advance! (attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though) portfolio.html
  19. I've spend a fair amount of time looking for an explanation of what "w3-closenav" does !! I see it used in examples and fiddle with it in the examples, however it would be nice if it was listed in W3.CSS references under "classes". I'm I missing where it is explained in english, or is it just not defined anywhere. Any help will be greatly appreciated. Thanks. sg.
  20. I've run into an annoying problem with spacing that I can't seem to code myself out of. I have a table with a 400x100 image at its background in a page that is set max-width=400px, intended to be full width on mobile devices. The containers honor this, but somehow the image is being resized. Note the right edge of the screen, the 400px image is not aligned with the 400px containers. So i borrowed iPhone5 and I found a different problem. the far right of the image is clipped, so I dropped the last label and radio button down to the next container for the first set. That is when I noticed the w3-radio button, while bigger that the standard radio, aligns differently on iPhones. When I load the page in FireFox it looks the way I intend. Link to page: http://scaikeqc.org/sandbox/t6a.php This is a semi-permalink, as I've set aside the current version of the module to show you. Clearly I need something more flexible, while at the same time doesn't break the careful balance between background image and text positioning and font size. I've fallen back on the old way of using HTML tables for layout because I wasn't getting the results desired with my basic understanding of CSS. Relevant code below with relevant functions below that. Reason for using a function to post the opening HTML headers is that I use a lot of self-referencing PHP which in turns uses the header('Location: '.$_SERVER['PHP_SELF']); method of processing data before kicking back or pressing forward based on validation tests or other calculations in PHP. OpenHTML($_SESSION['EName']); print "<body style=\"max-width:400px\">\n"; ShowCaution(); ShowError(); print "<form name=\"moarch\" action=\"{$_SERVER['PHP_SELF']}\" method=\"POST\">\n"; print "<div id=\"MoArch\" class=\"w3-container w3-indigo\">\n"; print "<table class=\"w3-table w3-centered\"> \n"; print "<TR><TD>Mounted Archery -- Single Shot</TD></TR>\n"; IF (is_null($_SESSION['RiderHonors'])) { printf("<TR><TD><H2>%s</H2></TD></TR>\n", $_SESSION['RiderName']); } ELSE { printf("<TR><TD><H2>%s %s</H2></TD></TR>\n", $_SESSION['RiderHonors'], $_SESSION['RiderName']); } print "</TABLE>\n"; print "</DIV>\n"; print "<div class=\"w3-display-container\">\n"; print "<img src=\"target_sm.png\" alt=\"Target\">\n"; print "<div class=\"w3-display-left w3-container\">\n"; print "<table class=\"w3-table w3-centered w3-xlarge w3-text-shadow\">\n"; print "<TR class=\"w3-left-align\">\n"; print "<TD class=\"w3-text-light-green\">$Gold<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"G\"></TD><TD></TD><TD class=\"w3-text-black\">$Red<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"R\"></TD><TD></TD><TD class=\"w3-text-white\">$Blue<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"B\"></TD><TD></TD><TD class=\"w3-text-light-gray\">$Black<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"K\"></TD><TD></TD><TD class=\"w3-text-dark-gray\">$White<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"WK\"></TD><TD></TD>\n"; print "</TR>\n"; print "</TABLE>\n"; print "</div>\n"; print "</div>\n"; print "<div id=\"MoArch\" class=\"w3-container w3-indigo\">\n"; print "<table class=\"w3-table w3-centered\"> \n"; print "<TR><TD>First Pass</TD><TD>Miss<input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"M\"></TD></TR>\n"; print "</TABLE>\n"; print "</DIV>\n"; function OpenHTML($c) { print "<!DOCTYPE html>\n"; print "<html>\n"; print "<title>$c</title>\n"; print "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"; print "<link rel=\"stylesheet\" href=\"http://www.w3schools.com/lib/w3.css\">\n"; } function ShowCaution() { IF (isset($_SESSION['Caution']) AND !is_null($_SESSION['Caution'])) { print "<article class=\"w3-panel w3-yellow\">\n"; print "<P>Take Note:<BR>\n"; print "{$_SESSION['Caution']}</P></article>\n"; $_SESSION['Caution'] = NULL; } } function ShowError() { IF (isset($_SESSION['EntryError']) AND !is_null($_SESSION['EntryError'])) { print "<article class=\"w3-panel w3-red\">\n"; print "<P>You have an error in your input, please try again.<BR>\n"; print "{$_SESSION['EntryError']}</P></article>\n"; $_SESSION['EntryError'] = NULL; } }
  21. w3-accordion-content problem

    when I add an anchor tag to text in a w3-accordion-content div, the browser treats the anchor code as an invisible text string and my text line wraps when it shouldn't. Is this a bug or is my code wrong? <div class="w3-accordion w3-container"> <a href="#" onclick="openTagline('tagline1')" class="HPE-text-green"> <h3>This is some headline</h3> </a> <div id="tagline1" class="w3-accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, consequatur<a href="somelocalhtmlpage.html" target="_self"><strong>Bonorum et Malorum</strong></a>.</p> </div> </div>
  22. Hi, I would like to ask if there is a hierarchy diagram of the W3.CSS structure with elements and relations between them e.g what is the relation between w3-row/col and w3-layout, which one can be used within the other or are "equivalent"? Thanks in advance.
  23. The first two lines of w3.css

    Apologies for asking what must be a naive question, but the effect this is having is actually quite important to me. The second line of w3.css reads html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} I get everything except the * after the first } "-box}* ". No-where can I work out what this is supposed to do. The first element styled is html, the second and third are before and after of everything *, but what is that first * doing please? Thanks in advance.
  24. After letting a project age well, I'm looking at modernizing my code. The project takes the data input all year long at several different events and builds a 'league scoreboard' of them. The code goes back as far as 2002 in the oldest parts and the last major update to the code was in '07 even if CSS was added by someone else in '14. I have not worked with CSS before, and had a helper apply it to the PHP pages I coded way back when, but they were using a HTML4 subset that I would consider 'less than easily human readable'. My helper dropped out and I found myself looking at W3.css to learn what about what had changed in the ten years or so since I worked actively on this codebase, in order to pick up what they had started and migrate to something that I could maintain alongside my code. It was also decided to try and code parts of the project specifically for mobile use first. (/backstory) After playing around with W3.css I came up with a HTML template of what I'd like to get working. http://scaikeqc.org/sandbox/tf-03.html. It needs polishing, and some refinements, but its close to what I want for the mobile experience. Please note, there are no FORM tags in that page so the selects and inputs are for show only. I tried making a proper form of it, http://scaikeqc.org/sandbox/tf-03.php and it was a right mess. Every time you click on the accordion labels to expand them, the form submits, the script reloads, hilarity ensues. This introduces trash into the resultset and before I remembered to use the action tag on the form element, I crashed the GET. Is it possible to have a whole-page form broken into accordion segments? Here is a snip of the-03.php <form class="w3-form" method="post" action="<?php echo $_SERVER[PHP_SELF]?>"> <div class="w3-accordion w3-light-grey"> <button onclick="feif('Rider')" class="w3-btn-block w3-centered"> Open Rider Selection </button> <div id="Rider" class="w3-accordion-content w3-container w3-red"> <H2>Select the Rider</H2> <SELECT class="w3-select" NAME="Pname"> <?PHP IF (isset($Pname)){ printf("<OPTION VALUE=\"%s\">RiderID: %s\n", $Pname, $Pname); } else { echo "<OPTION VALUE=\"XXX\">Select Rider<OPTION VALUE=\"XXX\">-----\n"; echo "<OPTION VALUE=\"NEW\">**NEW RIDER**\n"; } ?> <OPTION VALUE="XXX">----- <OPTION VALUE="306">Johanna <OPTION VALUE="83">Aaron MacGregor <!-- 465 additional select items omitted for brevity--> <OPTION VALUE="421">Zinaida Orshima <OPTION VALUE="114">Zuriel Nightshade <OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW RIDER** </SELECT> </div> <button onclick="feif('Horse')" class="w3-btn-block w3-centered"> Open Horse Selection </button> <div id="Horse" class="w3-accordion-content w3-container w3-red"> <H2>Select the Horse</H2> <SELECT class="w3-select" NAME="Hname"> <?PHP IF (isset($Hname)){ printf("<OPTION VALUE=\"%s\">HorseID:%s\n", $Hname, $Hname); } else { echo "<OPTION VALUE=\"XXX\">Select Horse<OPTION VALUE=\"XXX\">-----\n"; echo "<OPTION VALUE=\"NEW\">**NEW Horse**\n"; } ?> <OPTION VALUE="12">Unknown Mount <OPTION VALUE="XXX">----- <OPTION VALUE="103">Ace <!-- 380 additional select items omitted for brevity--> <OPTION VALUE="236">Zeus' Dream <OPTION VALUE="280">Zia <OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW HORSE** </SELECT> </div> The form continues through five more containers I've not copied here. <input type="submit"> </FORM> <script> function feif(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> I have a proof-of-concept form that does work(no accordions or data validation, data entered is not retained). This one checks an events database to see which of the five games are being played and only displays the data entry containers for the games that are being run. This is why I wanted to containerize the different sections of data entry. You can poke at that form here http://scaikeqc.org/sandbox/tf-05.php. If you've gotten this far in my post, please accept my thanks for seeing it through, and my apologies for less than beautified code. I'm recycling a lot of the form code from the previous version and haven't had the time to polish non-working code.
  25. I would appreciate clarification of allowed use of w3.css and w3codecolor.js. As explained on page http://www.w3schools.com/w3css/w3css_downloads.asp w3.css is "free to use. No license is necessary." Later we read "Or download w3.css and run it from your own web site" and "You can customize W3.CSS by changing ...". These quotes suggest that everybody can: - use w3.css file, - download it, - provide it from one's page (so, distribute), - customize. However, it is not clear if one can put customized w3.css on one's page. If W3Schools agrees with this, it should be stated and probably some conditions should apply. Just one example: I suppose that authors, Jan Egil and Borge Refsnes, would not be happy if somebody distributed modified file with their names without any information about changes. Even more uncertain one may feel using w3codecolor.js. On page http://www.w3schools.com/w3css/w3css_code.asp we read "You can download" it and "use". One can of course use it from the link provided by W3School. However, it is unclear if one can put this file together with one's web page (so, distribute it). Even without any changes, and without real intent of distributing it (one just puts it on other server to highlight some code, and does not want to depend on internet connection with the W3Schools server). Both files include only very short information about authors and version. It would be nice to read there more details about what users are allowed to do. I am very thankful for all the goodies W3Schools provides. These two files are very, very helpful. Probably the intent is that everyone can "free of charge, use, copy, modify, distribute this file if above copyright notice, this permission notice and a list of changes are included" (I am writing only about w3.css and w3codecolor.js). I, and probably all your fans, would be very grateful to clarify this "modification & distribution" issue.