I'm writing wordpress theme using Tiber and have really interesting case regarding different images on mobile and desktop.
Case:
I would like to upload 2 images (mobile and desktop version) using Advanced Custom Field PRO in Wordpress and use them in custom Timber template engine theme.
Code:
.twig
<div class="application--main-image"></div>
.scss
.application-main-image {
background-position: center bottom;
background-repeat: no-repeat;
background-image: url('../img/mobile.png');
#media (min-width: 600px) {
background-image: url('../img/desktop.png');
}
}
I found that I should use inline-style to put {{ post.image }} inside background-image but what about media queries?
Should I make some custom attributes or style inside .twig file with <style></style> but I want to use scss so it's not the case.
How would you solve that problem?
This is certainly a unique use case, here are my thoughts on how I would approach this:
<style>
.application--main-image {
background: url('https://source.unsplash.com/500x500/?ocean');
/* The actual URL would be replaced by your ACF Filed {{ post.mobile_image }} */
}
#media (min-width: 600px) {
.application--main-image {
background: url('https://source.unsplash.com/500x500/?mountain');
/* The actual URL would be replaced by your ACF Filed {{ post.desktop_image }} */
}
}
</style>
<div class="application--main-image"></div>
I think you are correct in that you will need to add the tags and the css necessary to your .twig template. I know you want to use .scss, however you only really need to change the background image property. I have create a JS fiddle to show you what I mean.
https://jsfiddle.net/robertguss/2kacx91k/7/
I hope that helps. If you have already come up with a solution that is different than mine, please share it here so not only I can learn but others in the future as well.
Cheers.
Related
I'd like to use paper-item element within a lit-element based app.
Within the app, I'm using --paper-item CSS custom property which can be applied to the paper-item using #apply but since the feature is removed from browsers, it doesn't work now.
Looks like ShadyCSS can make it work, but don't know how to activate it. Can someone help me?
html {
--paper-tabs: {
font-size: 1.0em;
height: 24px;
color: var(--text-primary-color);
background-color: var(--default-primary-color);
};
}
The #apply shim is only applied to styles in the elements template. It was a bit too difficult to apply it to styles added via constructible stylesheets. So if you want to use it, move the styles to a <style> tag in the render() method.
I was looking for my answer # CSS media query but couldn't find it so I thought I would ask here.
Can CSS media queries be used offline/locally? I'm building a webpage it's all on shared network drives and I'm trying to setup different stylesheets based on resolution and I want to use CSS media queries min-width but they don't seem to be working and I'm wondering if it's because my site isn't live? (similar to how favicon doesn't work locally, only on hosted sites).
An example would be:
<style type="text/css">
#media all and (min-width: 1024px) {
background-image: url(images/bigbg.jpeg);
}
body {
width: 1000px;
background-image:url('images/test.PNG');
background-repeat:repeat;
overflow-x:scroll;
}
</style>
Any suggestions? Much appreciated :)
Should work locally, but you need to define what's changing. Try:
Original:
#media all and (min-width: 1024px) {
body {background-image: url(images/bigbg.jpeg);}
}
Even better:
#media all and (min-width:1024px){
body{background:url(images/bigbg.jpg)}
}
I'm trying to use macros in a CSS file (in site manager-> development).
This is my CSS code:
#import url('/CMSPages/GetResource.ashx?stylesheetname=sitecss{$=|en-US=eng$}');
a, a:visited, a:active {
color:#407a1f;
}
....
This doesn't seem to work dynamically on the site as I switch between default culture and English.
The only time that it works is if I SAVE the CSS file (in site manager) while the site itself is in a certain culture.
In short: the macro "takes" the culture when the CSS file is saved and is not dynamic upon page loading.
How can I solve this?
THANKS :)
As far as I know, you cannot make you CSS code dynamic. However, you can do this easily as explained below:
Kentico adds a special class to the body tag of the document. Check your source code and you will see that the body tag has a class ENUS if the current culture is en-US, ENGB if the current culture is en-GB and so on.
Then you can change your CSS code accordingly by defining rules like:
body.ENUS .container { float: left; }
body.ENGB .container { float: right; }
body.FRFR .container { float: none; }
Hope this helps.
In version 6 and later you can do it by
#import url('/CMSPages/GetResource.ashx?stylesheetname=sitecss{%CurrentCulture%}');
or you can directly resolve target CSS by
{% CSS["<stylesheet code name>"] %}
See more on http://devnet.kentico.com/docs/devguide/index.html?combining_stylesheets.htm
I have an image (source file in Paint.NET format) and it has two areas that need to be click-able when on the web. I've never done anything like this (I usually don't do very graphical sites). Is there an easy way to cut this image up and put it into a web layout?
What about HTML Image Maps?
You could use image maps, but they are difficult to author, and if you just need a rectangle area, consider using invisible absolutely positioned elements over an element with background image.
You don't need to cut the image at all, just convert it to jpg format.
<html><head><title>Clickable Areas</title><style type="text/css">
#imageArea
{
position:relative;
width:100px;
height:60px;
background-image:url(areaImage.jpg)
}
#imageArea a
{
width:20px;
height:20px;
position:absolute;
}
#area1
{
top:20px;
left:20px;
}
#area2
{
top:20px;
left:60px;
}
</style></head>
<body>
<div id="imageArea">
</div>
</body>
</html>
You can do an "image map"-like thing in CSS. A List Apart has a good guide. Essentially, you set the image as a background and use CSS to create invisible links and position them over the correct spots.
Try CSS sprites. http://css-tricks.com/css-sprites/
Hey guys I'm currently having trouble with my CSS linking. Basically I want the colour of my links to change when I hover over them, and click on them and such. But for some reason it is not working when I view it on a browser. Below is my HTML code and my CSS code, they are seperate files and are linked togather. Thanks in advance. (I apologise if the codes are not appearing correctly but it is all there)
EDIT: Don't worry its fixed now :D thanks for the help
from what I see, you don't have a:hover,a:vistied, or a:active defined anywhere, which is what controls the behavior you're looking for.
Are you coding by hand or using Dreamweaver as a WYSIWYG?
NOTE: This could be because the files aren't formatted well in your question, so Markdown could have dropped some characters from the display.
From what I can see, the CSS file isn't written correctly. I'm going to give one example for you which fits for the whole file:
content {
width: 510px;
float: left;
}
This snippet above looks for the <content> tag in the HTML, and when it finds that tag, it will give it a width of 510px and floats it to the left. The problem here is that there are no <content> tags in your HTML page OR in HTML 4.01 itself. What you need to do is change it to this:
.content {
width: 510px;
float: left;
}
By adding the '.' before 'content' in the CSS, it changes 'content' from <content> to finding a tag that has class="content" as an attribute.
Also, to get the <a> tags to change on hover, etc, use the pseudo-elements (pseudo-attributes?) of :hover, :active, and :visited, for when a user hovers over a link, clicks on a link, and has previously visited a link, respectively.
Example:
a {
color: blue;
}
a:hover {
color: red;
}
In this example, a link will display as blue unless the user has their mouse on the link.