My project has the following structures:
-src
-components
- first
- Base.vue (*)
- refer
- css
- common
- common.1.0.1.css (* Imported)
- images
- common
And I'm having trouble loading images defined in CSS file.
After importing the following css file in tag:
#import '../../refer/css/common/common.1.0.1.css';
Styles other than images seem to be applied correctly.
For example, they style below does not apply the backgound-image...
#bottom .bottom .container .content {
background-image: url('./refer/images/common/bottom-logo.png');
background-repeat: no-repeat;
font-weight: 400;
color: #CBCBCB;
}
This also makes me think that there is some issue with the url path again...
please help me out!
Related
I have a file global.css in assets folder, file is imported in main.js. Styles from this file works only if i dont have same style applied in component style. For example, in component i have this
h1 {
font-size: 50px;
}
then in global.css
h1 {
font-size: 35px
}
this won't work. Is there a way to override component styles with this global.css?
Make sure your style tag within component has scoped attribute otherwise it'll override global styles.
Review: https://codesandbox.io/s/vue-basic-demo-j87nz0?file=/src/components/HelloWorld.vue
You need to look into CSS specificity to solve this issue.
Here, it's happening because the global style is applied at first, then component style comes in second, you could inspect that in your devtools and see various declarations applied to your h1 element.
There are of course advanced possibilities in CSS but writing something more specific
h1.my-cool-class { /* or just .my-cool-class */
font-size: 50px;
}
should be enough here.
You can use h1 { font-size: 35px !important; }
Or with classes
For example:
.headline-h1 {
font-size: 35px
}
Thank you everyone for answering. I had to deal with some messy css, every component had its own css style for every heading and paragraph(sizes, colors, fonts, etc.). I deleted all of these and put them in global.css file and then changed html elements to be compatible with sizes. That's it.
Hi I'm a new developer and I'm trying to build a portfolio site for myself. Anyway, I can't seem to get the background image I put together to show. The image is located in the images folder of my CSS folder. I notice if I try to put a background color in it works just fine. However, I don't want a background color just an image.
The file pathway in my project is as follows:
ProjectName > SiteRoot > CSS > images > hmebckgnd.jpg
This is my code for styles.css
body{
background-image: url('/images/hmebckgnd.jpg');
background-repeat: no-repeat;
margin: 0;
}
The first / in the path attempts to find the images folder from the root directory, removing it will load it relative to the directory the stylesheet is in (which should be the CSS folder):
body{
background-image: url('images/hmebckgnd.jpg');
background-repeat: no-repeat;
margin: 0;
}
If your image has path like this:
ProjectName > SiteRoot > CSS > images > hmebckgnd.jpg
why don't you include css directory in css file?
body{
background-image: url('../images/hmebckgnd.jpg');
background-repeat: no-repeat;
margin: 0;
}
It is good practice to use relative path in css file and load whole css file with forward slash in your HTML file.
This is the markdown code effect of stackoverflow:
Code from stackoverflow
Nearly no extra space at the beginning
And this is the markdown code effect of gitbook:
The extra blanks at the beginning is confusing for me. So I decided to change it by myself.
I did:
cd /usr/local/lib/node_modules/gitbook/theme/stylesheets/base
vim markdown.less
In which there is a code block which looks like:
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
I changed the font-size to 385% and border-radius to 0px. I used git serve . to restart my gitbook server, but the code effect didn't change.
I got these files which havs code keyword in the theme directory, which should I modify?
.//assets/app.js
.//assets/fonts/fontawesome/fontawesome-webfont.svg
.//assets/fonts/fontawesome/fontawesome-webfont.ttf
.//assets/fonts/fontawesome/FontAwesome.otf
.//assets/print.css
.//assets/style.css
.//javascript/utils/sharing.js
.//stylesheets/base/markdown.less
.//stylesheets/base/normalize.less
.//stylesheets/website/highlight/night.less
.//stylesheets/website/highlight/white.less
.//stylesheets/website/markdown.less
.//templates/book/includes/exercise.html
.//templates/ebook/includes/exercise.html
What else should I do?
This should be a comment, but you can't fiddle in comments.
As you can see below, the style information you've given doesn't include the styles you want to change, you've left out some important information from somewhere.
The code you've included is shown on the left, the problem you've described is on the right.
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
.described {
padding: 20px;
}
<code>fprintf(...);</code>
<code class="described">fprintf(...);</code>
To over-ride the Gitbook default styles, create a file called 'styles/website.css` in the root of your gitbook project.
Edit the book.json file and add the following to define the source of your own custom styles
{
"styles": {
"website": "styles/website.css",
"ebook": "styles/ebook.css",
"pdf": "styles/pdf.css",
"mobi": "styles/mobi.css",
"epub": "styles/epub.css"
}
}
Anything in this file will over-ride the Gitbook styles (if you get the names right).
Then find out the names of the html elements you wish to apply or change styles to using your browser inspector. Open your Gitbook project in a browser and right click on a code block, this brings up a menu with Inspect or Inspect Element.
You will need to restart gitbook serve when changing styles as it only reads the styles/website.css file on startup.
The styles I defined to over-ride the Gitbook ones can be seen in this Github Gist
https://gist.github.com/jr0cket/9cc41eb9dd0b6c6d091831be43fa3e42
The results of these can styles can be seen at:
https://practicalli.github.io/clojure/basic-clojure/
Thank you
I am having some trouble with a few things with the Laravel 4 Framework. First, to give the setup, I have an assets folder, within my public folder, that contains a folder for css called "CSS", a folder for images called "images", and a folder for fonts called "webfonts". Here are the paths:
/laravel-master/public/assets/CSS
/laravel-master/public/assets/images
/laravel-master/public/assets/webfonts
Inside the CSS folder is my main CSS file, style.css. I am trying to use an image as a background that I call within this CSS file. Here is the code:
.banner-image{
background: transparent url('../assets/images/8662834823_575a23516d_o.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 800px;
min-width: 1200px;
}
I have also tried:
.banner-image {
background: url('assets/images/8662834823_575a23516d_o.jpg');
}
and:
.banner-image {
background: url('/assets/images/8662834823_575a23516d_o.jpg');
}
Within my view, I call this CSS with the div:
<div class="banner-image"></div>
Both of these result in the page remaining blank. The image is not showing up, and I am not sure why.
On to the next one. Without using CSS, I am just trying to have a simple image show up. I have tried:
<img src="{{asset('assets/images/fanssignupsplash.png')}}">
and:
{{HTML::image('images/fanssignupsplash.png')}}
and:
{{HTML::image('assets/images/fanssignupsplash.png')}}
All of these result in the broken image symbol. The image is not showing up.
Finally, in CSS again, I am trying to use fonts files that I have put in the webfonts folder mentioned above. However, again the font is not working. I know the CSS file is being uploaded correctly to the page, because the color changes on the text, but the font is not being applied. Here is the CSS:
#font-face {
font-family:'proxima-nova';
src:url('/assets/webfonts/proximanova-bold-webfont.eot');
src:url('/assets/webfonts/proximanova-bold-webfont.eot?#iefix') format("embedded-opentype"),url('/assets/webfonts/proximanova-bold-webfont.woff') format("woff"),url('/assets/webfonts/proximanova-bold-webfont.ttf') format("truetype"),url('/assets/webfonts/proximanova-bold-webfont.svg#ProximaNovaBold') format("svg");
font-weight:bold;
font-style:normal
}
The view I am using is a blade file (landing.blade.php). This is all on localhost, using MAMP.
Thank you very much for your help with all of this. I am new to Laravel, and I have gotten all of this to work outside of a framework on a live site. Your help is very much appreciated.
I stopped on your first question, first tried solution.
Shouldn't it be this :
.banner-image{
background: transparent url('../images/8662834823_575a23516d_o.jpg') no-repeat center center;
...
}
See the removed "/assets"
Because if I got it well, your arborescence is like this:
assets
CSS
style.css
images
8662834823_575a23516d_o.jpg
For your second question, try to add a / at the beginning of your URL :
{{HTML::image('/assets/images/fanssignupsplash.png')}}
since I believe assets is at the root of your server.
add font face in a main.blade.php:
<style>
<?php $url = asset('plugins/font/Roboto-Regular.tff') ?>
#font-face {
font-family: Roboto;
src: {{$url}};
}
</style>
you can write also:
<style>
#font-face {
font-family: Roboto;
src: {{asset('plugins/font/Roboto-Regular.tff')}};
}
</style>
then in your scss or css use:
body{
font-family: Roboto;
}
https://laravel.com/docs/4.2/helpers#urls
then you don´t have problems when public your app
I use GWT 2.1.1
In package resources i have png images and one css file.
In css file i wrote:
.finishedTask {
background: white url("tick64.png") center center;
padding: 0.5em;
border: 0;
}
.unFinishedTask {
background-color: white;
padding: 0.5em;
border: 0;
}
Than i create ClientBundle interface extension. With this CSS and images.
Than in UiBunder view i try to change css style:
textArea.setStyleName(isFinished() ? res.style().finishedTask() :
res.style().unFinishedTask());
When this code executed css layout of textArea are broken but i see that class changed (FireBug). Seems bug in css.
Maybe somebody already tried do the same thing.
Probably you should use addStyleName or addStyleDependentName instead of setStyleName which remove existing styles.