Newbie question: I've created a github page for one of my projects
http://grokimagecompression.github.io/grok/#/
by copying a tutorial from the web, and modifying it .
The source can be found here:
https://github.com/GrokImageCompression/grok/tree/gh-pages
I would like to set a background image, similar to how this page does it:
http://blackrockdigital.github.io/startbootstrap-creative/
but so far have had no luck. The image is img/header.jpg in my gh-pages branch.
Any guidance would be greatly appreciated!
I would add to the css
body {
padding-top: 50px;
padding-bottom: 20px;
background: url("img/header.jpg") no-repeat center cover;
}
For more information about background check the MDN
Related
I am starting a new website in React and I need to use a font from Google called FredokaOne.
I have used the command:
npm install --save typeface-fredoka-one
Everything went well but I can't figure-out how to use it.
I tried this :
font-family: FredokaOne;
font-size: 40px;
But it still using the default font. Is there a way to checkout the proper font to use ?
or any missing params.
Thanks
Regards
You can add #import inside index.css file of react project.
Index.css
#import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
*{
font-family: 'Fredoka One', cursive;
}
it seems like my react Application is not picking up the style from index.css file. Would someone please let me know what could be the reason.
I have index.css as mentioned below.
body{
background-color: aqua
}
however, I don't see aqua colour of any of the page.
I have a SPA project in VS 2013 using Angular.js and HotTowel and Breeze. It works fine on my development machine but when I deploy it to IIS 8.0 on a webserver running Windows Server 2012 it fails. The framework loads but it does not load my default view. It simply flashes the splash page and shows an empty browser.
I can walk through the js code using the Developer Tools but it never loads my default view into the index.html.
Using the developer tools in IE, I set breakpoints in the config.route.js to walk through the process of determining what page will be loaded into the SPA. It appears to be coming up with the correct page. The page that is supposed to load is called request.html so I also placed a breakpoint in the request.js to see if it was failing on the load. It never hits this breakpoint.
I am hoping that perhaps somebody has run into these same or similar issues when deploying an SPA to IIS.
Thanks for any help that can be given. In the meantime, I will keep searching.
JG
Success at last! As stated in the comments I found there were some path issues in the index.html. I managed to fix the problem by removing the leading '\' from the data-ng-include for the shell.html.
Was:
<div data-ng-include="'/app/layout/shell.html'"></div>
Now:
<div data-ng-include="'app/layout/shell.html'"></div>
This enabled the code to find the proper directory level for the shell.html. I was concerned that this would break the code for the dev environment but it works fine.
I then found that I needed to fix similar paths in the directives.js file in the function for the ccWidgetHeader. The templateUrl had to be modified.
Was:
/app/layout/widgetheader.html
Now:
app/layout/widgetheader.html
Finally I had to modify the style.css to fix a path for a logo image in the header.
Was:
.navbar .brand {
background: url(/content/images/fcma-biostar.png) no-repeat left center !important;
margin-left: -6px;
padding: 35px 50px;
}
Now:
.navbar .brand {
background: url(images/fcma-biostar.png) no-repeat left center !important;
margin-left: -6px;
padding: 35px 50px;
}
Many Thanks! to PW Kad and fops for chiming in on this issue!
well just a guess, of course a blank screen can be caused by way more reasons that the one mentioned here.
in my case i had to turn off the minification in the BundleConfig.cs code:
BundleTable.EnableOptimizations = false;
(consider this as a workaround. To fix it definitely its worth a try to check the dependency injection part of your angular code)
Using boxsizing.htc is not working for me. The answers to other posts here on Stack Overflow have not worked for me:
Zerb Foundation 3 - IE7 Fix not working?
Making Zurb's Foundation 3 work with IE7
Here's what I did:
Created the boxsizing file in TextEdit, put the code there, named it boxsizing.htc, saved as Unicode 8.
Uploaded to my javascripts directory, at my domain root.
Added this to my stylesheet:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(http://mydomain.com/javascripts/boxsizing.htc);
}
Added this to the htaccess file:
AddType text/x-component .htc
To be safe, I made sure that jquery and modernizr are linked before the stylesheet is, just in case the htc file needs jquery.
Still no results. Any ideas?
The site is http://bureauforgood.com/index.php
Thanks!
Have you tried using *behavior: url(/javascripts/boxsizing.htc);?
I had to fiddle with the path to get this working.
whats the default padding for a jquery button? tried to download and search the dev pack... :( did not fint it :(
From the stylesheet:
.ui-button-text-only .ui-button-text {
padding: .4em 1em;
}
As one of the commenters mentioned, it's very easy to find this out by using the firefox plugin firebug, or by using the web inspector in Safari/Chrome