Difference between bootstrap.css and web.css file? - javascript

I was following this tutorial on Microsoft's developer network concerning using asp.net and mvc model with sql database. Here is the link to the tutorial that I was following
http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started.
So basically, I wanted to play around with the design of the file which is defined in these three files bootstrap.css, bootstrap.min.css, and web.css.
As to my understanding , bootstrap is an html, css, and javascript framework which has the design for the elements already defined. In Visual Studio, I began to edit the bootstrap.css file by changing background-color of the jumbotron element. However, when I saved the file and ran my web application , I noticed that the color remained the same and did not change. But, when I defined the design for the .jumbotron element in the web.css file, the element's background color changed accordingly to red.
Essentially, what I want to know is if bootstrap.css is restricted for editing within the template?

What is Bootstrap
I think you're trying to refer to the Twitter Bootstrap that is used all around the Internet. It contains most of the Styling techniques for the Elements, such as buttons, inputs etc.
When you edit a website's Stylesheet, (Bootstrap.css is a Style sheet and its name doesn't make it write/edit protected file) you get the style that you've applied to it.
http://getbootstrap.com/
Web.css
This file might be the default Style sheet that was created by the Developers at Microsoft while creating the Template for the Website that you're using.
Secondly, when you edit and create this file, it is also a Style Sheet which means it would apply the style to your website and all the web pages who are refering to it.
You're right. It has all the pre-defined methods and contains all of the contents and styles required to make a web page responsive. For more: https://en.wikipedia.org/wiki/Responsive_web_design
What might have caused this problem would be cache. When you first loaded the web page, it would have captured the New Style sheet from the file System and would have applied the styles. But second time it would have loaded the File from the Cache.
https://en.wikipedia.org/wiki/Cache_(computing)
This way, the browser would load the last successive layout of the Web Page. Without loading a new StyleSheet from the File System.
I really think, you need to reload the page using CTRL + F5 button. This would be helpfull in this manner! Because Bootstrap.css is editable and you can edit it. It doesn't prevent editing, only caching would be the problem here.

Related

Removing google translate icon on .chm pages

I have a large number of (300+) help pages. The web version should display the Google Translate dropdown menu, but when these same files are used offline (in Windows help .chm files) the dropdown should be hidden. Obviously I would not want to maintain two separate help files.
So I have my Google Translate code inside a called and created a style sheet that tells the page whether or not to show the translate dropdown (web) or hide it (local file). This works pretty well, except that I get the Google Translate icon on my local .chm files.
Like I said, the dropdown is not displaying on these local pages, just as expected, but how can I get rid of the icon? Interesting, too, that this image (untitled.png) shows up with or without the style sheet enabled.
BTW, I am talking about the bigger, blue image, not the Google"G" right in front of the dropdown.
without dropdown
with dropdown
Thanks for your time!
You can ensure that the CSS files are compiled into the help file by adding their names to the [FILES] list in the project (.hhp) file in two ways.
You may add the *.css filename(s) by editing the *.hhp file with a plain text editor or to do this with HH Workshop:
Open the .hhp file in HTML Help Workshop. 
Click the Add/Remove Topic Files button on the Project tab.
In the Topic Files dialog box, click Add.
In the File Name field at the bottom of the Open dialog box, type *.css (or e.g. *.jpg)
Browse to the directory that contains the files (or e.g css), and then select them.
Click Open, and then click OK to close the Topic Files dialog box.
Additional information:
The help compiler automatically pulls into the help file all graphics that are referenced in elements via the "src=" attribute. For graphics that are referenced by other means, such as in a script or style sheet, you must use the above workaround to ensure that they are compiled into the .chm file

Why does WinJS Navigation app apply css to any visited page?

I develop WinJS Navigation app (Windows 8.1/WP 8.1) and there's one problem: I've linked .css file to only one .html file, but when I go to any other .html page and if it has any same class then app applies .css from first page I went!
I don't link that .css to host (default.html).
It's not depending on which Visual Studio I use.
I have same bug in WinJS 2.0, 3.0 and 4.4.0.
There's a question: why does WinJS do this? Is there any solution or workaround?
You can reproduce my problem on your VS2013 or VS2015: zip (debug Windows project, not WindowsPhone).
When using WinJS navigation and page controls, the "navigations" are happening with DOM replacement inside the single context of default.html or whatever your root app page is, and not by dumping default.html (and all the CSS/JS that's been loaded) and initialized a new page context.
This single-page navigation model provides several benefits: it preserves the global JavaScript context and allows you to do animations/transitions to move elements on and off the page. If you truly navigate to a new page altogether, you'd reset the JS context and would always navigate through a blank page.
The side-effect, as you're seeing, is that any and all CSS that gets loaded in the course of page navigations is cumulative. That is, a "navigation" in WinJS does not reset any contexts, including CSS, and this can be tricky to manage.
There are several ways around this:
Use a global CSS file and avoid using page-specific CSS unless you know something is unique to a page.
Make sure each page has a top-level div with a page-name class like <div class="page1"> and then scope all styles for that page in your CSS using .page1 selectors.
Specifically load and unload CSS files by modifying <link> tags in the page header. This is really the only way to unload CSS, but also means reloading and reparsing the CSS files which will cause a page to re-render.
Generally speaking, I think option 2 is best and most portable.
For a longer writeup, see the section "Page-Specific Styling" in Chapter 3 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, and I've written up similar material on my blog, http://www.kraigbrockschmidt.com/2013/05/02/css-loading-behaviors-winjs-page-controls/.

Big Cartel - JQuery Upload/Location

Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.

Downloaded aspx website does not display well

I have downloaded a aspx webpage and saved it as html. I open it in IE and chrome and it takes time to load + some parts are missing. All the text is there but the onmouseover is not working properly and some css is not displaying correctly. Was the content not downloaded completely? i.e is it missing sme javascript, css or else?
I have done what you describe on many occasions for the purposes of putting together a prototype of new functionality in an existing application.
You will likely need to do a couple of things:
Ensure the paths to your JS and CSS resources are right (removing the unneccessary JS files, if any)
Also, you will likely need to update the paths in your CSS to any image resources in your page

Editing Source Code in Wordpress

The company I am working with hosts their webpage on Wordpress. They want me to edit some of the code in order to do various things, such as enable a photo container to be a moving slideshow.
Figuring out the javascript and html to achieve the results they desire is not problematic for me. However, I am unsure how to get full access to the Source Code of the site. I have privileged access to the backend of the site but in wordpress when you go to edit it only shows some of the basic html tags while hiding the <div> and <script> tags and code. Is there any way edit the page in its source code format? I don't want to have to go through the simplified and less expressive/less control Wordpress interface, and I don't even know if I can achieve the desired results with it.
If you try and edit individual pages you're approaching the problem in the wrong way. You probably want to be using a plugin or modifying a plug-in to create the slideshow you need. There are many plugins for wordpress that do what you seem to need.
slider-widget is one such pluging
In Wordpress, there are two main parts to the website's front and backend: the core WP files and the theme that is used. (And other important aspect to a WP site is the database, where all content is stored, including text/images entered in the admin backend.)
Core WP files are not to be changed because they get overwritten with each update. What you want to work with is the theme. Look in Appearance>>Themes and see what the active theme is for the site. It will also tell you the name of the folder the theme files are in.
With FTP, go to root/wp-content/themes/your-theme-name. That's the php, html and css source of the displayed part of the site. Uploaded images are in /uploads/, and plugins in /plugins/.
See http://codex.wordpress.org/Theme_Development to get an idea of how themes are built and how to modify them.
See the rest of the docs at WP to see how to work with plugins, add other javascript correctly so it doesn't conflict with WP's included javascripts, etc. All the docs you really need are at wordpress.org

Categories