I am a beginner in laravel, and having some trouble in laravel CSS layouts.
I have multiple links in my web, for example:
testing.com/main
testing.com/AboutUs
testing.com/ContactUs
which I used a layout stored in /layouts/main.blade.php in the views folder.
Inside the layout, I wrote all the css link that is based on the public folder.
For ex:
<link href="stylesheet" href="/css/styles.css">
And it works fine on all the links except for the ones with sub-links, for example:
testing.com/main/Clients
testing.com/main/Solutions
The CSS seem to have dissapear when I navigate to sub-links.
Am I not properly declaring the CSS in Laravel? The CSS works perfectly when it is not a sub-link.
You should use the Laravel helpers to add assets to your views as they generate the correct URLs. Either use URL::asset('css/styles.css') or asset('css/styles.css') if you need to get a link to an arbitrary asset. Alternatively, you can be a bit cleverer and get Laravel to do some extra hard lifting:
{{ HTML::style('css/site.css') }}
{{ HTML::script('js/site.js') }}
{{ HTML::image('images/logo.png') }}
These will write your HTML for you as well as generating the links to the assets.
You can use
asset('css/styles.css')
It's work fine with me!
Related
I have a site where I am trying to allow the site owners to enter an iframe embed code (using the paragraphs module) on a page and then will render this out adding a container to make it always responsive.
I am running into an issue with twig always outputting as text however. It works perfectly if I use a formatted text field and then click "source" and paste the code in from the dashboard, but obviously that is super clunky for the site admin and very prone to errors. I'd like to just have a plain text field instead. Trouble is even when I use {{ content.field_embed[0].value | raw }} it comes out as text. is there anyway around this that I am missing? Would like to not resort to having the user work with the CK editor just for a simple embed
#mhfleming, I was having the exact same issue as you. Using the filter raw was still giving me the escaped iframe, like in <iframe .... I even thought the issue could be related to one of the contrib modules Twig Tweak and Twig Field Value, which the site I'm working on uses, but those were not the culprits.
I was able to get my code working with the following Twig snippet:
{% set embed_code = {
'#type': 'processed_text',
'#text': content.field_embed_code[0]['#context']['value'],
'#format': 'full_html',
} %}
<div class="responsive-embed">
{{ embed_code }}
</div>
Your code looks very similar. Try replacing the field name with field_embed and give this snippet a try.
Had the same issue and came to thread and found Bruno's answer which gave me an idea that worked for me for a plain text field.
Override the field--name.html.twig that has the iframe code in it. Then print the field using this structure (kint is your friend here) {{ item.content['#context']['value']|raw }}
This worked for me and rendered the iframe just fine. Hope it helps someone else.
** EDIT ** SOLVED
I'm using bootstrap_admin app for my Django admin page. If you are using bootstrap_admin app for your Django Admin page, this might come in handy for customizing the sidebar.
TLDR:
Sidebar.html doesn't see my custom.css file, only base.css, so I had to add everything to base.css
The long version:
Look below the break to see my original problem.
So essentially, bootstrap admin has a template tag for the sidebar. This sidebar is customized with sidebar.html template, but it's not really a template as I thought; it's actually called into a template using a couple of commands, such as :
{% display_sidebar_menu cl.has_filters as is_displaying_menu %}
and
{% block sidebar_menu %}
{% render_menu_app_list %}
Because of this, for some reason the sidebar.html file doesn't see my custom.css file, even though it comes after the base.css file link in the base.html head.
Anyway, because of that reason, I found that I had to put my custom classes into the base.css file directly. Fortunately the file is pretty small and easy to maintain, so this isn't a big deal.
Background images are now showing correctly, and I don't have to use any inline styles, which is great.
For those who took the time to comment, thank you for your time. Hopefully my mistake helps someone else in the future.
As the title states.
I've run into an interesting problem. This is related to css background images. I am loading the app names and their models in a sidebar menu, and for some reason the images just won't load.
I added the images in the static folder for the app. The code in the css file is the following:
/* App Buttons and Icons */
#servers_icon {
background-image: url("/static/bootstrap_admin/img/icon_servers_copy.png") no-repeat;
}
#sensors_icon {
background-image: url("/static/bootstrap_admin/img/icon_sensors_copy.png") no-repeat;
}
Note the path.
For some reason, django is refusing the load these files. The css file is being loaded and actively used by the app. The ID names are correct. However, the images just will not load.
However, if I put them inline in the HTML file:
<li style="background-image: url('/static/bootstrap_admin/img/icon_{{ app.app_label }}_copy.png'); background-repeat: no-repeat;" {% if app.app_url == current_url %}class="active"{% endif %}>
<a href="{{ app.app_url }}" class="section" title="Models in the {{ name }} application">
{{ app.name }}
</a>
</li>
Then the images load. Note that the path is the same.
{{app.app_label}} is part of the in-template for loop that populates the menu. The label name and file name matches. In fact, the file name was renamed to match the app label name.
Anyway, I have checked numerous sources and can't seem to find a fix for this. For now, I will keep the style in-line, but I would like to revert back to using the CSS file if possible. I really dislike using inline styling.
Please note that this is development code. I'm honestly stumped here, and I have no idea what to do at this point beyond continuing to use inline styling just to load the icons.
I keep seeing people say AMP pages must have the css code all inline in the custom tag, but on the website it seems to say you can reference it from an external file for when its from a preprocessor: https://www.ampproject.org/docs/guides/responsive/style_pages#using-css-preprocessors
Can someone tell me if I'm interpreting this wrong? Thank you!
{% include "/assets/css/main.min.css" %} is Twig Tag (The flexible, fast, and secure template engine for PHP). For more details Click Here
You can use like this if using PHP language
<style amp-custom>
<?php include("styles.css"); ?>
</style>
include : The include statement includes and evaluates the specified file.
Note : styles.css is external css
I made my own welcome intro page using org.eclipse.ui.intro and I'm able to show my welcome extended with other contributors.
Now I'd like to decore my welcome with some css, and I have two question:
1) How can I apply predefined eclipse css (i.e Slate) to my page? I've already tried putting org.eclipse.ui.intro/INTRO_THEME = org.eclipse.ui.intro.universal.slate in plugin_customizazion.ini without success
2) there's a way to extend css to contributors without giving them the css file??? I mean there a way for contributors to use my own css if it is only inside my plugin (or eclipse plugin if i will be able to use "slate" style?)
Eclipse SDK Help
The only way to select a theme is via the preference org.eclipse.ui.intro/INTRO_THEME in plugin_customization.ini.
Theme-enabled intro implementation must make all the references to style and presentation resources using the $theme$ substitution variable. Absolute paths for images, pages, styles, etc. will be computed by resolving the substitution variable using the path of the currently active theme.
See Intro Content XML Format as well.
To answer the second question, if you define an intro theme which include your css file, other plugins will be able to use it for sure.
Cheers,
Max
Ok, now I've learned more about themes, but I think I have some problem with path.
I've defined my own theme, css and graphics, so I extend theme by configExtension. But when I load my application the welcome page doesn't load css neither images. I've also defined org.eclipse.ui.intro/INTRO_THEME in plugin_customization.ini.
I have a structure similar to slate template like this
my.plugin.name
|_resources
|_intro
|_graphics
|_html
in graphics there are all images definitions whlile in html there are css
then in intro I have my root.xhtml (referenced by intro.xml)
with this css reference
<link rel="stylesheet" href="$themes$/html/root-ie.css" type="text/css" charset="utf-8" />
finally I've defined configExtension with theme
<extension
point="org.eclipse.ui.intro.configExtension">
<theme
default="true"
id="my.plugin.name.themes.themename"
name="%theme.name.themenam"
path="/resources/intro"
scalable="true">
I think maybe the problem is with the path, I've also tried with path="resources/intro"
path="/resources/intro/" and path="resources/intro/" withous success
could someone post a simple but complete working sample please?
Websites like Wordpress and Tumblr allow designers to create themes that users can select. In general how would you architect a website to be flexible enough to allow custom themes for users?
Take a look on how Django does it. Django uses a Model-View-Controller-like approach in which you use views to populate a context, and then use that context to process a template. Note that Django has its own MVC terminology.
For example, if we say that our context reads as follows (in pseudo code),
author = 'mntnoe'
title = 'My Title'
content = '<p>This is my content</p>'
we could use the following template:
<h1>{{ title }}</h1>
<div class="author">Author: {{ author }}</div>
<div class="content">
{{ content }}
</div>
Now, you are free to replace the template (or collection of templates) with another one without affecting how the site works.
Seperate content from formatting by using proper html and css. That means using css files for the style rather than inline style inside the html.
You can make several css files (themes if you wish), and switch between them using javascript.
Let your serverside technology of choice simply generate easy to adjust, by css and images, html. A great site of examples is http://www.csszengarden.com/. It emits the same html every time but uses different css and images to style it. Take a look at the html they generate to get ideas.