I want basic theming support in my Symfony2 project, so I wanted to have separated static files (css, js, img) for each theme.
I have tried to add
assetic:
read_from: %kernel.root_dir%/../web/themes/mytheme
but this took no effect, my {{ asset('css/style.css') }} are still referencing realtic to %kernel.root_dir%/../web, instead %kernel.root_dir%/../web/themes/mytheme.
Any idea?
Fixed with config:
assetic:
debug: %kernel.debug%
use_controller: false
read_from: %kernel.root_dir%/../web/bundles/mybundle/themes/%my_theme%
write_to: %kernel.root_dir%/../web
filters:
yui_css:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
yui_js:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
And in layout I have:
{% stylesheets 'css/*' filter='?yui_css' %}
<link rel="stylesheet" type="text/css" media="all" href="{{ asset_url }}" />
{% endstylesheets %}
Related
I'm building a web page using Hugo.
Here is my website header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Website</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<meta name="referrer" content="no-referrer" />
<link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css"
/>
<!-- tried this as per suggestion from Hugo forums
{{ $sassIncludes := (slice "node_modules" "assets/scss/vendor" "assets/scss/components") }}
{{ $target := "styles/main.css" }}
{{ if .Site.IsServer }}
{{ $cssOpts := (dict "targetPath" $target "enableSourceMap" true "includePaths" $sassIncludes ) }}
{{ $styles := resources.Get "/css/main.scss" | toCSS $cssOpts }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
{{ else }}
{{ $cssOpts := (dict "targetPath" $target "includePaths" $sassIncludes ) }}
{{ $styles := resources.Get "/css/main.scss" | toCSS $cssOpts | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
{{ end }} -->
{{ $style := resources.Get "/css/main.scss" | resources.ToCSS | minify | fingerprint}}
<link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
</head>
<body>
<header>
<div class="nav-bar">
<a class="top-logo" href="/">
<img src="/img/logo.svg" />
</a>
</header>
</body>
</html>
Here is main.scss:
#import 'reset';
#import 'commonStyles';
#import 'pricing';
#import 'docs';
#import 'header';
#import 'footer';
#import 'home';
header {
.nav-bar {
background-color: red;
}
}
config.toml:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "Website"
assetDir = "static"
I'm running on macOS with hugo server command. I'm changing the background color in styles. Here is terminal output:
thatsme/../website-landing (master↑1|✚7…) % hugo server
Building sites … WARN 2020/05/18 12:27:34 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/05/18 12:27:34 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
| EN
-------------------+-----
Pages | 14
Paginator pages | 0
Non-page files | 0
Static files | 19
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 17 ms
Watching for changes in /Users/thatsme/git/website-landing/{archetypes,content,data,layouts,static}
Watching for config changes in /Users/thatsme/git/website-landing/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Change of Static files detected, rebuilding site.
2020-05-18 12:27:42.202 +0200
Syncing css/main.scss to /
Styling changes apply only when I restart server. Html changes are getting applied properly.
The following command should do the trick:
hugo serve --noHTTPCache --ignoreCache --disableFastRender
I've been trying to set up owl carousel for quite some time now and none of the answers I read seemed to work. So, I began to wonder if it just simply won't work or am I missing something here.
I tried pretty much every possible solution I could find but did not get it to run...
I am using laravel app view with #yield('content') and on the home page I'm inserting the actual content along with the owl carousel.
In the blade.app file I linked all the scripts and css files like so:
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/jquery.min.js') }}" defer></script>
<script src="{{ asset('js/owl.carousel.min.js') }}" defer></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
autoPlay: 1000,
items:10,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:10
}
}
});
});
</script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.carousel.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.theme.default.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.theme.green.min.css') }}" rel="stylesheet">
When I load the page noting is showing up. I tried some other bootstrap carousels and they seem to work, but I like this one since it has draggable elements and looks cool...
Here is what it looks like in the editor:
app.blade.php page
carousel page
Delete the defer and try again by using correct link, may be sometimes the link has to be in incorrect form.
For performance reasons, I want to inline my CSS in the HTML files generated by Jekyll. Naively, I tried:
<style type="text/css">
{% include main.scss %}
</style>
The trouble is, that includes the source file (which just defines variables and includes other files), not the compiled CSS. How can I get the compiled CSS?
Jekyll scssify filter to the rescue :
<style type="text/css">
{% capture sass_file %}
{% include main.scss %}
{% endcapture %}
{{ sass_file | scssify }}
</style>
I have a .blade.php view that is nice and well designed with css, but when I put a variable like {{$data}} or even inside a for each loop {{$d->col1}} the css design get away.
What is the reason to be
#foreach($data as $d )
{{$d->price}}
#endforeach
I corrected myself
I changed
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
to
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
And the problem solved.
I just installed laravel 5.5 and the good news is, I finally managed to get npm run dev/production working. The manifest file looks fine too. In my bladeview I am using these lines:
#if($userIsLoggedIn)
<link href="{{ mix('build/ccs/admin.css') }}" rel="stylesheet">
#else
<link href="{{ mix('build/ccs/auth.css') }}" rel="stylesheet">
#endif
But loading the page results in the following error:
So I was like, lets go into the mix helper and dump some data to see what it looks like... :
dd($manifest, $path); gives :
Is it just me, or does the index actualy exists? using
dd($manifest[$path]);
actualy results in Undefined index. The weirdest thing, when I write the link outside of the conditional like this:
<link href="{{ mix('build/css/auth.css') }}" rel="stylesheet">
<!-- Styles -->
{{-- #if($userIsLoggedIn)
<link href="{{ mix('build/ccs/admin.css') }}" rel="stylesheet">
#else
<link href="{{ mix('build/ccs/auth.css') }}" rel="stylesheet">
#endif --}}
then if all works fine! no errors or undefined indexes whatsoever, versioning/non versioning.. all loads :P There is some stuff going on here that I don't understand.. Any1 has any ideas??
EDIT::
Using these lines at the bottom of the body works fine too..
#if($userIsLoggedIn)
<script src="{{ mix('/build/js/admin.js') }}"></script>
#endif
)) try to change way of css files)
mix('build/ccs/admin.css') => mix('build/css/admin.css')
etc.)
It should be 'build/css/admin.css' instead of build/ccs/admin.css.