How to fix a STYLE.css problem (blank)

Bootstrap Studio Help
1

To optimize the website, I tried several things: 1. Move all the css into a Custom.css file and minimize it as Custom.min.css 2. Copy Style.css into a Defer.css or All.css file and try serving that from my website. 3. In the process I found that the "style.css" file in the lower right DESIGN is totally empty! Yet from the STYLES css in the center there is css code. How do I fix this problem?

Also I would like to know how to copy the Styles.css to a file outside of the BSS easily so I can minimize it. Additionally, I thought that if I EXPORT the website, it would save the STYLES.css but it does not seem to do that.

Additionally when I right click on the DESIGN heading STYLES and try to export a file there is no choice for that, only Import css, Create css, Link external css, Create folder and Include Order.

In the center CSS area where it says STYLES when I click on that there is css code. When I click in the OVERVIEW on a COMPONENT, the css changes, showing the css for that COMPONENT (I believe). I don't know where in the world that CSS is stored I thought it used to be stored in the DESIGN styles.css file but that is empty now.

When I try to right click and SAVE AS the STYLES heading in the Center CSS area, there is nothing I can do. Same for my Custom.css file when I have it up in that area and highlighted.

In the Center CSS area there is a "Create" button. With STYLES hightlight I can click "Create" and a new css statement is started. If I click on the arrow I have a choice of all the files in the DESIGN css area, or a "New Stylesheet" If I pick "New Stylesheet" an empty untitled.css is made. What happens if I pick one of the existing files? I HAVE NO IDEA!!!!! And I have not done it because I don't want to mess this up any further. ---BTW This should be clearer to the user!!! I think "Create" means "Create Css" but I could be wrong.

I would like to understand how STYLES.css works, and would like to fix my installation. I would also like an easier way to "Export" a given CSS file to some location outside the BSS file or into the Export directory, so that I can use that CSS, then minify it and then upload it to my website with Filezilla.

I need to make small changes to spacing, color etc that are mostly in the CSS, I need a way to SAVEAS a specific file, and I am getting to the point where I don't need to change the index.html as much (each time I have to doctor it a bit at the top and bottom to make it faster).

Thanks for a great program! Rick

PS Also under Publish Options > Publish Tab it takes a very long time to finish with a note to hit the "Publish" button in lower left. I hit the button and nothing seems to happen. The computer spins up. It never completes..?? We need a progress bar or something.

2

Without reading that entirely confusing text lol I've skimmed over it and the first thing I woudl tell you to do is check your other CSS files, and also check to see what you have applied "inline" which you shouldn't be doing unless it's given with external elements you've added. One of the things I found before this update was that it was not automatically sending my custom code to my custom css file, it was sending it to whichever one was at the top of the list. I've had to go into a handful of files throughout various projects and correct that in my CSS files to make sure that my custom file has something in it.

If you have a "styles.css" file and it's empty, it's most likely because you didn't put anything in it. The way you've been speeding through everything you probably didn't realize you weren't adding your custom styles to the right location. check that first and see if that's the case or if there truly is a problem. You'll know more if you open other CSS files in your list and see things at the bottom of them that you know you added to the CSS.

You can also look to the right column and it will tell you where it added it as well. Not sure which way is easiest for you so that gives you 2 ways to get to the styles to see where they were added.

The other option would be that ... you didn't add any custom styles so there wouldn't be any then. :)

As for exporting, you cannot export separate files "yet". I believe they are still working on adding something for that. You can only export the entire project so if you want to export a file, then export the project.

3

One of the things I found before this update was that it was not automatically sending my custom code to my custom css file, it was sending it to whichever one was at the top of the list. I’ve had to go into a handful of files throughout various projects and correct that in my CSS files to make sure that my custom file has something in it.

If you have a “styles.css” file and it’s empty, it’s most likely because you didn’t put anything in it.

Thanks Jo, that helps me I think. What I did was take everything out of STYLES.css and a number of other files that I had created for each component, and put them into Custom.css then minimize it to be Custom.min.css Now I think I am going to take a Custom.min.css which I have external to the exported website, check it for the css that I know I need, and then change the name to Styles.css and Import it. Then I will remove "custom.css" and "custom.min.css" from inside BSS.

I think both I & the program are getting confused by not having a working styles.css That is where the "custom.css" is intended to be located generally. ...Correct?

Also, I have to remember to copy a piece of CSS code over to Styles.css to change it?

Why, oh why do I get into these problems? ..perhaps it's because I try to make it better, clearer, faster, etc.

Thanks. Rick

4

Also, I think another problem, was I had created an ALL.CSS file (quite literally, all CSS, including bootstrap and all the custom.css) and had imported it into BSS, I tried loading it and the machine started working very hard and I could not scroll, so I have removed it. I was experimenting with loading that file from my website directly for the purpose of optimization speed. It is faster, but not significantly, and it is too confusing to do, I am likely to screw up while updating and maintaining the site!

The bigger optimization game is to get rid of the google calendar, which is very expensive and configure an simple availability calendar working in bootstrap and to optimize the images further.

I think I am going to keep the four or five cdnjs calls in place for bootstrap, jquery, lightscape and swiper. The site is at 87% optimized now, and fixing the 2 other problems will get it above 90% I think.

As for exporting, you cannot export separate files “yet”. I believe they are still working on adding something for that. You can only export the entire project so if you want to export a file, then export the project.

Good, I think I really need that to be easier!

5

update was that it was not automatically sending my custom code to my custom css file, it was sending it to whichever one was at the top of the list.

Perhaps, I should just continue using "custom.min.css" and make sure it is at the top of the list? Or perhaps copy css am changing directly to "CUSTOM.CSS" and then change it in that!!!

This morning I have made the same change twice and it did not take, so I am having this problem for sure.

I will ignore the style.css file and that it is empty. Can I delete it? I find it confusing to have a style.css file that has "custom.css" I would rather have a "CUSTOM.CSS" file that makes it clear that the center "STYLES" css edit area is something different, coming from "Bootstrap.css" that Does NOT change. Perhaps it should be called "BSS.CSS styles" to be clearer to us rookies! Then my changes and custom stuff gets put in CUSTOM.CSS.

6

Try right clicking and deleting.

7

Now I've deleted that old empty "styles.css" and nothing crashed, and I also deleted the "custom.css" leaving just "custom.min.css" which is the one in imported. Things are looking better. I just have to change a few small things, first adding the css to my "custom.min.css" file though!

--Thanks Chris, I just saw your note. That's what I did.

PS: Its best to keep your Styles css folder pared down to only what you are using!!! Don't store excess files in there or excess CSS code. If you removspee some component, you must also remove any customized css that you are not using anymore. This is not automatic!!

8

Now it appears, that I must load my CUSTOM.min.CSS last otherwise those changes do not show up. So I am going to try no loading it first, but loading it last, however there may be page blocking css in the file and I may have to load it first and then again at the end. Checked with GTmatrix https://gtmetrix.com and it's ok being loaded last.

9

Now because I did some funky things with CSS files probably, it's saying I have unsaved information, yet I have saved everything conceivable. I am just going to close it.

10

I think you might be over concerning yourself with the whole page blocking thing.

Your browser creates 4 socket connections to download content from each domain.

The blocking comes in when one of the requests takes a significant amount time to either wait for the responding server to respond or it's a large enough file to download or you have a lot of stuff loading from the same domain.

For example: So, say you have 8 things in your <HEAD> section

  • your domain bootstrap CSS
  • your domain bootstrap theme CSS
  • your domain print CSS
  • your domain custom CSS
  • your domain jquery JS
  • your domain bootstrap JS
  • your domain slider JS
  • your domain custom JS

The browser will make 4 connections to grab the first 4 things. Now the browser is waiting for 1 of those connections to complete so it can grab the next (5th) item, that makes 4 connections again. Again waits for one of those connects to free up so it can grab the next one and so on and so on. While it's doing that the rest of the site is in a pause state waiting to continue.

Now lets say this:

  • cdn domain bootstrap CSS
  • cdn domain bootstrap theme CSS
  • your domain print CSS
  • your domain custom CSS
  • cdn domain jquery JS
  • cdn domain bootstrap JS
  • your domain slider JS
  • your domain custom JS

The browser will make 4 connections for each domain so now all 8 requests are being downloaded at the same time. Significantly increasing the rendering of your site short of a non/slow responsive domain.

....

The order of your CSS and JS matters.

First off "your" CSS and JS files should come after the built-in/supplied/cdn files. Your CSS is technically an overrider CSS, so to override stuff it must come after ever other CSS file that you are trying to override. Your JS file needs to come after technically all other JS files because like the CSS it works in a way that requires the other JS files to be loaded before it.

Take for example your JS file is you wanting to drive your car somewhere, well that's not going to happen until you first start the car right. Well the other JS files are effectively starting the car, and yours says where you want to go.

You should take those 2 scripts out of the head section.

You should get rid of the swiper code because I don't see you using it anywhere. This class .swiper-container doesn't exist anywhere in your code so the swiper stuff has no effect.

You need to get rid of the href="print.css" from the lightbox CSS link element.

You need to put your "other" JS file after all the other JS files so it actually works. :)

I'm not sure if you are aware but the BSS app has a setting to minify the CSS and JS code, I'm not sure if you are using an external program for that.

The script containing $('.calendar').calendar(enableRangeSelection) should be inside the $(function(){//your code here}); document.ready statement.

Saj

11

Your browser creates 4 socket connections to download content from each domain.

@saj it's not always 4, sometimes 6 or 8, but a simple, inexpensive, really effective speedup is to upgrade to a server that supports http/2. In 2017 it does not make sense to optimize for http 1.1 especially a website that already has a valid tls certificate. I did lot's of work in the past, including using image sprites, multiple domains, merging of css and js files etc. Now I first move websites to a modern nginx that supports http/2 and only then I start deciding what to do. The simple move to chose a better hosting usually gives such a great speed advantage that all other things are unnecessary. YMMV

12

Marrco, thank you for your suggestion of http/2, I knew nothing about this and am looking into it.

Saj, as usual your advice is crystal clear and targeted. Thank you. 1. Removed swiper code from css & jss header & foot (from start as a real newby!) 2. Removed DESIGN js & css cdns links for swiper. (that will help!) 3. Removed href="print.css" which some optimization website suggested to delay the link as uninmportant to rendering 1st page. 4. Put custom.css and other.js down at the bottom. (have not uploaded it yet.) 5. Made sure the cdns links are all at the top, with the calls to bootstrap first and jquery next. 6. Made sure minimize bootstrap was checked in the Settings. 7. Removed javascript for swiper in Settings > Head Content 8. With your direction to get the calendar running, I have tried adding to Settings > Head Content (I wish we had separate Settings for each html page, it seems to be global.)

<script> $(function(){ $('.calendar').calendar (enableRangeSelection); }); </script>

The document ready statements are a real wonder to me. I wish I understood all the brackets, $ and functions. What may seem clear to someone on the bootstrap year calendar website is very difficult to follow to a total newby because it is quite stripped down. These examples for document ready statements were helpful, but I had difficulty understanding how the parts fit together - https://learn.jquery.com/using-jquery-core/document-ready/ - https://www.w3schools.com/jquery/event_ready.asp - https://www.sitepoint.com/types-document-ready/

I removed the calendar view code from the body of "dates.html" which enabled a view-able calendar for visitors (first objective)

<div> <div data-provide="calendar"> </div> </div>

And then tried previewing the "dates.html" page and no calendar appeared. It is very possible I have this code wrong. Maybe I do need to have this code in the Body! Now trying the trial website, rather than the IP trial view, I see that different css and js files are loaded and that bootstrap-calendar files are not there. I guess they must be listed along with the my custom.css and other.js. view-source:http://crimson-paper-3666.bss.design/dates.html

So now, I've added to the <head> <link rel="stylesheet" href="/custom.min.css"> <link rel="stylesheet" href="/bootstrap-year-calendar.min.css">

and at the very bottom of the <body> <script src="/js/jquery-1.12.4.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script> <script src="/bootstrap-year-calendar.min.js"></script> <script src="/other.js"></script>

To make sure those files are loaded. I think I might possibly need an object or something in the <Body> to make the calendar fire.... Those javascript files in the body are simply copied from the website to try to duplicate this calendar http://www.bootstrap-year-calendar.com/#Examples/Full%20example and the code is shown at the bottom. I thought that if I could get that calendar working, I could then figure out how to get the "Range Selection" working and that is basically what is needed. Two views idea: View only for visitors to the website. Range selection & removal on a separate hidden html page.

Saj, Also thank you for your all your help, and analogies they're very helpful to someone who does not know jquery & does not really know javascript. Rick

13

From Firefox Inspector, I seem to have a reference error related to the $. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined There is a non-existent variable referenced somewhere. This variable needs to be declared, or you need make sure it is available in your current script or scope.

14

The $ errors are because you need the have jQuery as the first JS code then Bootstrap's JS then the rest of the JS with your JS as the last.

Saj

15

Based on this site http://crimson-paper-3666.bss.design/ you almost have it all right.

So, stop putting stuff in the HEAD section. Go get a large trout and start slapping yourself with it. :)

This is called twice on your site <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

If you manually added it in the HEAD section remove it, if you manually added it in the Design pane under the Javascript section delete it.

Remove these from the HEAD section

<script>
  $('#calendar').calendar({enableRangeSelection})
</script>
<script src="/_bssfiles/badge.js"></script>

If you are using that badge.js then import it into the BSS app in the Javascript section. Right click Javascript section title and select Include Order.. then drag the order so it's

jquery.min.js
bootstrap.min.js
lightbox.min.js
badge.js
script.min.js

Add this to your script.min.js $("#calendar").calendar();

Put the ID of calendar on the DIV that you want the calendar to appear or I think continue to use the data-provide="calendar" maybe, not sure not really worked with the calendar.

Are you going to break out your tabs to other pages? or just the Dates tab (Calendar)?

Saj

16

Saj, Thank you.

It took me awhile yesterday (actually all day) because I tried to clean up the code formats and understand it better. I worked locally and have a mostly working version with all the files that I am going to zip up and upload somewhere.

I had a chuckle with your "slap yourself with a large trout" post! I will make those changes on the http://crimson-paper-3666.bss.design/dates.html next!!

I've tried to take what I did yesterday and move it into a duplicate of the index file. It seems to be locked because of the javascript appearing below. I have another local file which largely works by deleting a section of code, but I don't know if it is a necessary section. I had deleted the section just after the long section of javascript that is showing below the calendar that begins with:

 <div class="panel panel-default">
    <div class="panel-heading"></div>
    <div class="panel-body">
            <br >function editEvent(event) {<br>    $('#event-modal input[name="event-index"]').val(event ? event.id : '');<br>    $('#event-modal input[name="event-name"]').val(event ? event.name : '');<br>    $('#event-modal

And that seems to work pretty well. This would be the Entry to Block Dates page, then I needed to have a View Page for visitors. I also wanted to figure out if that code above it used, because when I change dates on the local version and close the file, then reopen it, they are not saved. Somehow they need to be saved. I thought that the line var newld=0 when turned true too var newld=1 would activate saving the updated or new dates, but it does not seem to work locally.

        else
        {
            var newId = 0;
            for(var i in dataSource) {
                if(dataSource[i].id > newId) {
                    newId = dataSource[i].id;

Anyway, I am going to upload two zips to Opencpn Beta File Thingie rguser, rgpass under the Bootstrap directory, which when unzipped locally create two htmls (and files) that work, but one works better because the javascript is not showing and I took out that code.

  • bs-year-calendar-blockout.html (javascript shows & did not remove that section)
  • blockdates.html (removed that section of code & javascript does not show)

The corresponding page to bs-year-calendar-blockout.html is here in BSS http://crimson-paper-3666.bss.design/indates.html

Yes, I did stop "stuffing the head" that Mackeral slapped me in the face! but something in the javascript isn't working yet. Now back to fix the Dates.html page next after I upload to file thingie.

Thank you. Rick

17

Saj, After making sure I'd made the changes you suggested above, and finding that the calendar that resulted was simply the year calendar without any Dates blocked out and no capability to highlight and add dates, delete, etc, and since the "Entry of Block Dates" one that I had working locally, (but not saving dates) was also not functioning, I realized that I was missing some code or something.

So being a bad hack, not knowing anything really, I copied the javascript code from inside the <script> </script> tags derived from the bootstrap-year-calendar "full calendar" page and pasted that code into the "cal-scripts.js" . Then saved and shut down BSS and restarted, and then I was able to use http://crimson-paper-3666.bss.design/dates.html and highlight a range of dates, right click and "save" the dates. I could also delete the ranges of dates. So now that seems to be working. You were right, all it requires for the html page is

 <div class="calendar">
       <div data-provide="calendar"></div>
 </div>

And then of course, including the correct files for CSS and JS. I had tried to whittle those down to what was necessary earlier and will need to do some more work on that, and will report back. Of course my css and js files are sort of a mess and I need to get them cleaned up too.

  • Block Dates Entry (single page) - http://crimson-paper-3666.bss.design/dates.html
  • Block Dates Entry (in side the TAB format website) - http://crimson-paper-3666.bss.design/indates.html
  • Dates Simple (single page) - view-source:http://crimson-paper-3666.bss.design/dates-simple.html Which does not have that functionality yet because the necessary cal-scripts.js that has the calendar javascript is not included. When I close and restart that will probably be added and it will work up to the point we've arrived at.

There are still several problems:

  1. Data is not being saved back to the file. I enter ranges of dates in 2016 and 2018 and close the page and then reopen it and the dates are gone.
  2. The javascript that I pasted in to the cal-scripts.js file is showing at the bottom of the calendar sometimes, and I need to remove all that code, etc as it is not needed.
  3. This page is our "Blocked Date Entry" page, I need to configure a "View" only page, using the same data source.
  4. I need to track down how/where the date is stored and change it to be persistent.
  5. If I can figure out a login to the Blocked Date Entry page, it would be better.
  6. If I can't achieve 3 or 5, once I figure out what file the data is stored in, I could just change that manually with a text editor and upload with filezilla, until a better solution is found.

So with your help there has been some progress. Thank you. Rick

18

This is the javascript pasted into cal-scripts.js

{ function editEvent(event) { $('#event-modal input[name="event-index"]').val(event ? event.id : ''); $('#event-modal input[name="event-name"]').val(event ? event.name : ''); $('#event-modal input[name="event-location"]').val(event ? event.location : ''); $('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : ''); $('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : ''); $('#event-modal').modal(); }

        function deleteEvent(event) {
            var dataSource = $('#calendar').data('calendar').getDataSource();

            for(var i in dataSource) {
                if(dataSource[i].id == event.id) {
                    dataSource.splice(i, 1);
                    break;
                }
            }

            $('#calendar').data('calendar').setDataSource(dataSource);
        }

        function saveEvent() {
            var event = {
                id: $('#event-modal input[name="event-index"]').val(),
                name: $('#event-modal input[name="event-name"]').val(),
                location: $('#event-modal input[name="event-location"]').val(),
                startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
                endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
            }

            var dataSource = $('#calendar').data('calendar').getDataSource();

            if(event.id) {
                for(var i in dataSource) {
                    if(dataSource[i].id == event.id) {
                        dataSource[i].name = event.name;
                        dataSource[i].location = event.location;
                        dataSource[i].startDate = event.startDate;
                        dataSource[i].endDate = event.endDate;
                    }
                }
            }
            else
            {
                var newId = 0;
                for(var i in dataSource) {
                    if(dataSource[i].id > newId) {
                        newId = dataSource[i].id;
                    }
                }

                newId++;
                event.id = newId;

                dataSource.push(event);
            }

            $('#calendar').data('calendar').setDataSource(dataSource);
            $('#event-modal').modal('hide');
        }

        $(function() {
            var currentYear = new Date().getFullYear();

            $('#calendar').calendar({ 
                enableContextMenu: true,
                enableRangeSelection: true,
                contextMenuItems:[
                    {
                        text: 'Update',
                        click: editEvent
                    },
                    {
                        text: 'Delete',
                        click: deleteEvent
                    }
                ],
                selectRange: function(e) {
                    editEvent({ startDate: e.startDate, endDate: e.endDate });
                },
                mouseOnDay: function(e) {
                    if(e.events.length > 0) {
                        var content = '';

                        for(var i in e.events) {
                            content += '<div class="event-tooltip-content">'
                                            + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
                                            + '<div class="event-location">' + e.events[i].location + '</div>'
                                        + '</div>';
                        }

                        $(e.element).popover({ 
                            trigger: 'manual',
                            container: 'body',
                            html:true,
                            content: content
                        });

                        $(e.element).popover('show');
                    }
                },
                mouseOutDay: function(e) {
                    if(e.events.length > 0) {
                        $(e.element).popover('hide');
                    }
                },
                dayContextMenu: function(e) {
                    $(e.element).popover('hide');
                },
                dataSource: [
                    {
                        id: 0,
                        name: 'X',
                        location: '',
                        startDate: new Date(currentYear, 2, 5),
                        endDate: new Date(currentYear, 2, 8)
                    },
                    {
                        id: 1,
                        name: 'X',
                        location: '',
                        startDate: new Date(currentYear, 2, 16),
                        endDate: new Date(currentYear, 2, 19)
                    },
                    {
                        id: 2,
                        name: 'X',
                        location: '',
                        startDate: new Date(currentYear, 3, 29),
                        endDate: new Date(currentYear, 4, 1)
                    },
                    {
                        id: 3,
                        name: 'X',
                        location: '',
                        startDate: new Date(currentYear, 1, 15),
                        endDate: new Date(currentYear, 1, 20)
                    },
                    {
                        id: 9,
                        name: 'X',
                        location: '',
                        startDate: new Date(currentYear, 3, 17),
                        endDate: new Date(currentYear, 3, 20)
                    }
                ]
            });

            $('#save-event').click(function() {
                saveEvent();
            });
        });

}

The data appears to be stored in "dataSource" as simple records within brackets. Of course I could edit this file and upload it to the server and then disable the editing features, but it would be much easier to enable saving and persistent data.<br /> I had tried making newid= 1; but that did not seem to do anyting locally. Would it work differently when online with the proper javascript files?

     var newId = 0;
    for(var i in dataSource) {
        if(dataSource[i].id > newId) {
            newId = dataSource[i].id;
19

When I am done, I am going to write this up for others, as what he says "It's so Easy.." has actually taken quite a bit of time to learn and figure out. It's perhaps easy if you know this stuff better than I do and you've been providing guidance all along. I think it would be good for others who what a calendar.

20

Now I see that there is a COMPONENT online for Paul-DS Bootstrap Year Calendar. I am wondering if this will install the darn thing properly so it works and saves data. So I guess I'll make another page and try that. Why didn't I check that earlier? It's been downloaded 353 times too! Sorry Saj, for bothering you so much about this. Rick