I want to make a mechanism that will display the css file depending on the url address
example
if url = www.domain.com/our.php then we print <style> background: red; </style> if not, <style> background: blue; </ Style>
chciałbym to umieśćić między <head>
In PrestaShop you can do this stuff directly in your template files, you have many helper variables available:
https://devdocs.prestashop.com/1.7/modules/creation/displaying-content-in-front-office
search for "Here is a list of Smarty variables"
You can load extra styles here:
/themes/your_theme/templates/_partials/head.tpl
You can do for example:
{if $page.page_name == 'product'}
{literal}<style>body { background: red !important; }</style>{/literal}
{/if}
This will result with a red background on product page.
Related
I receive a configuration JSON that has colors and the paths of the images that I must use in my CSS, I correctly set the variables in the html and it would have a result similar to this:
<html lang="en" style="
--c-logo-square:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/temp%20belike%20small.png;
--c-background-image:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png;
--c-primary:green;
--c-secondary:purple;">
I can use the color variables correctly, but I don't know how to use the image paths as background.
// Works
.my-html-component {
color: var(--c-primary);
}
// Error
logo {
background: url(var(--c-background-image));
}
When working with Angular and SCSS I understand that I could use some function that allows me to do what I need, but I don't know how to do it.
Instead of defining url in the attribute, define it as a part of the variable. Dont forget to add :root.
:root {
--c-background-image:url(https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png);
}
.logo {
background: var(--c-background-image);
width:500px;
height:500px;
}
<div class="logo"></div>
I'm creating PDF from HTML using weasyprint. I have a content that has dynamic number of pages.
I can start a new page after it with style="page-break-before: always;".
How do I make this new page yellow?
I would use #page :nth(3) { background: yellow; } if I new it was third page. But I don't know the length of the content before.
Maybe something like <page> could be styled?
Thanks!
Found in samples! You can use page css property to name target page.
#page mypagename{
background: yellow;
}
#element-on-styled-page{
page: mypagename;
}
Let's assume that the user can add styles for every component in admin panel and I get it as string in my Node server:
const stylesFromAPI = ".p { color: red } .bg { background: lime }";
How to prefix this styles before append to my document to avoid conflicts?
I need something like CSS modules but working with strings (not as module loader):
const stylesFromAPI = css(".p { color: red } .bg { background: lime }"); // returns hashedClassname685946898456
<SomeCompontent className={stylesFromAPI} />
produces:
<style>
.hashedClassname685946898456 .p { color: red }
.hashedClassname685946898456 .bg { background: lime }
</style>
<div class="hashedClassname685946898456"></div>
Shadow DOM seems like a reasonable option here. You can create your style tags with inside the shadow DOM without having to deal with any selector prefixes. For example, using the react-shadow package:
import root from 'react-shadow';
Then in JSX, something like:
<root.div>
<style type="text/css">
{/* CSS string here */}
</style>
<div>
{/* Stuff here */}
</div>
</root.div>
Check out a working example of this here: https://github.com/joshdavenport/stack-overflow-61566764-react-css-shadow-dom
The main downside here is your styles from outside the shadow DOM will not apply. Those using the shadow DOM for components see this as a good thing, those simply trying to scope CSS do not. Not sure what it is you're scoping, so I can't really tell if that would be an issue for you.
If it is, you could re-import your styles within the shadow DOM, though I can't really point out how to do that without knowing what bundler is in use and how it is in use.
Alternatively you could pull apart your imported CSS using the css package, iterate over the selectors prefixing all with a randomly generated class, and then re-stringify.
I don't know it can be write like that or not but I am trying to set height
to html item in css style. Height is being passed in context variable from Backend Django.
I am trying this:
<style>
.fc-agendaWeek-view tr {
height: '{{row_height|add:"0"}}'"px"
}
</style>
{{row_height|add:"0"}} => this is context variable passed from Django Backend which is integer i-e 70 , 80.
Where I am wrong? Can we even write like that. Any help will be appreciated.
Your CSS is invalid. It often helps a lot to View Source on a page and see exactly what your template is outputting. In this case, I think you want something more like:
<style>
.fc-agendaWeek-view tr {
height: {{ row_height }}px;
}
</style>
Which will output:
<style>
.fc-agendaWeek-view tr {
height: 70px;
}
</style>
I have a background image that I can not get to stay just on one page. I have made a welcome controller with one home view to display it. I am precompiling my assets as well. The background shows up just fine, but my goal is to just show the background image on my home.html.erb view.
welcome/home.html.erb:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>"
lang="<%= I18n.locale || 'en'%>">
<body class="container">
<h1>title</h1>
</body>
</html>
welcome controller:
class WelcomeController < ApplicationController
def home
end
end
stylesheets/welcome.css.scss:
body
{
background: {
image: asset-url("image.jpg");
}
}
and I have the following in my application layout:
<head>
<%= stylesheet_link_tag "welcome" if controller_name == "welcome" %>
</head>
and in config/initializers/assets.rb :
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( welcome.css )
Add specific css,
body.welcome
{
background: {
image: asset-url("image.jpg");
}
}
and in html,
<body class="container welcome">
You must be wondering even though you have not included specific file then why it is applying all over. This is because you must have specified require_tree . in application.css
In Rails:
Try creating a css class for the background image
.splash {
background-image: image-url("image.jpeg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
If you want all pages to display the image
<html class="splash"> ... </html>
But on one page only, on that view page, wrap everything in
<body class="splash"> ... </body>
You are overriding body for the entire application. Make a class instead and call it using div on the page you want to display the background image.
Also, you are calling the use of the stylesheet from the application layout rather than the page itself.
Stylesheet
#app/views/layouts/application.html.erb
<head>
<%= stylesheet_link_tag controller_name if controller_name == "welcome" && action_name == "home" %>
</head>
#app/assets/stylesheets/welcome.css.scss
body {
background: {
image: asset_url("image.png");
}
}
#config/application.rb
config.assets.precompile += %w(welcome.css)
This should load the welcome stylesheet if you're visiting the welcome#home view. I would strongly recommend against using classes to determine this page - it's far cleaner to include a stylesheet, as this will give you scope to extend the functionality as you wish
--
Test
To test this, you should first look at whether your welcome.css is being loaded when you hit the welcome#home view. To do this, you just need to right-click > view-source.
If the stylesheet is present, you'll want to ensure your styling is performing correctly. This will be trickier to debug, but will just entail you looking at the loaded CSS file & seeing what it's doing with the elements on your page.
If you do the above, comment as to whether you're seeing the welcome.css in your source. If you are, it's a good sign, and we'll be able to look at the CSS after that
Your welcome.css file is being included by the asset pipeline so will apply the background on every page. In order to apply the background image to the body only on the home page, you need to apply a class to the body when the home page displays.
However, if you are correctly using layouts, the opening <body> tag will be in your application.html.erb or in a partial so not available in your home.html.erb. You will need it to add it dynamically so I suggest you use a small jQuery script at the end of your home template.
<script>$('body').addClass('home-page');</script>
Then you can amend your CSS to
body.home-page {
background: {
image: asset-url("image.jpg");
}
}
That should give you the results you require.