I have a question related to background image url in Compass. I generated a sprite and I have the following path "images/social/facebook.png" but compass generated the sprite in the folder "images" (images/social-s17cf54cdde.png). When I inspect the element in the site I noticed that the background url isn't correct. I need to access one level up (../) so instead of "background-image: url('/images/social-s17cf54cdde.png');" I need "background-image: url('../images/social-s17cf54cdde.png');". How can I do that?
In the scss file I used these code:
#import "social/*.png";
#include all-social-sprites;
Related
I am attempting to override Bootstrap with SCSS so I can use my own code for the buttons. Bootstrap has been imported and is located within node_module inside of my project.
I basically want to get ride of the default square shape the button takes and have the background color to my specifications.
I decided to start with color and made my own color to be used instead of the value that Bootstrap relies on in the following format.
$button-color: rgba(255, 255, 242, 0);
#import "../../../node_modules/bootstrap/scss/variables";
This format I am using based off of the Theming Bootstrap page in the Importing section.
Argument `$color` of `darken($color, $amount)` must be a color
I looked this up on the website and noticed those that received this error had actually attempted to use this darken($color, $amount) format. I did not and I am not sure how to resolve this issue because I am not using it.
You need to import the _functions SASS file too...
#import "../../../node_modules/bootstrap/scss/functions";
#import "../../../node_modules/bootstrap/scss/variables";
I'm working on a project I've inherited. Problem is, when compiler generates sprites, name contains some random string at the and, I want to change that to something like version of project, so for example if i have sprite of "home" I want to have home-v1, for version 1 and so on.
I've tried to edit config.rb and add some code there, but I was un-successful.
So what i basically want is this: When i run compass compile, to get sprites with name like "home-v1.png" and when i run compass clean, to clean "home-v1.png", Also i want to do something like this, if i change version variable, so for example its not "home-v1.png", now its "home-v2.png" all old sprites (home-v1.png") should be removed.
I am a newbie in Sass / Compass. I tried to generate sprites, it works without any problems.
I cant find how to generate two sprite layouts from one folder with images. I dont want to create 2 folders with the same content (duplicate images only because of 2 or more different sprites layouts).
It is possible to do this?
my code generate one group of sprites (diagonal) and now i want to generate horizontal and vertical ..
$vlajky-spacing: 20px;
$vlajky-layout: diagonal;
#import "vlajky/*.png";
#include all-vlajky-sprites;
I've had this problem, best thing is to generate two sprite maps, all you need to do is put them in separate folders depending on which you want them to appear in. This way you can have separate rules for spacing /positioning too.
#import "vlajky-horizontal/*.png";
#import "vlajky-vertical/*.png";
#include all-vlajky-horizontal-sprites;
#include all-vlajky-vertical-sprites;
I use Sphinx to generate some docs. I have a reStructuredText document and I'd like to put an image into it. The case is that the image should be clickable so that after a user clicks the image then they should be shown this image in full size. I use the image directive and its target option like this:
.. image:: /images/some_image.png
:alt: Image descripion
:align: center
:target: `big_some_image`_
.. _big_some_image: /images/some_image.png
The problem is that in the rendered page I get:
<img src="../../../_images/some_image.png">
So there is correct src from the image directive but an incorrect href attribute from the hyperlink.
Questions:
is there any way to generate links in the way that image directive does it? I mean relative to the document.
is there any other (built in) way to have "thumbnail-> click -> big image" behaviour?
Simply use the scale option:
.. image:: large_image.png
:scale: 20%
When the scaled image is clicked on, the full image loads in its own window. So this doesn't increase the image size on the page, but that would be messy anyway.
When you use the image directive from within Sphinx, Sphinx does some special handling to find the image file and copy it into your project (like your _images directory), and then renders the HTML to point to that place.
But the target option just takes a URL as a parameter. It knows nothing about your Sphinx project, or how your images are laid out, and does not attempt to guess.
If you want to have it point to a larger version of the same file, you will likely need to do some manual steps (like maybe copying the file to a specific location), or maybe provide a relative URL to the large file, rather than the absolute URL you have in your example.
If you want to go a completely different way, you could also try overriding and modifying the HTML templates for your project to add some JavaScript to get the click-to-larger-image effect you want.
Looks like there is a Sphinx extension that does this now, and quite nicely at that, sphinxcontrib-fancybox 0.3.2. Install with pip, add it to your extensions in conf.py, and use the fancybox directive:
.. fancybox:: images/image.png
Relative links seem to work. For the Mapserver docs setup, if an image is placed in the images directory, a relative link like in the following code works in my local build. Here is an example using figure (the underscore ("_") before "images" in the target link is necessary):
.. figure:: ../../images/carto-elements.png
:height: 400
:width: 600
:align: center
:target: ../../_images/symcon-overlay.png
My .html files are all in Assignment1/*.html files
My CSS file is in Assignment1/style/cssfile.css
My images are in Assignment1/images/images.png
How do i call an image from Assignment1/style/cssfile.css to Assignment1/images/images.png file?
I can`t do it like the html files as i could just forward the folders to go through. I am trying to do:
.top {background-image: url("Assignment1/images/deco1400.png");}
from the css file to no avail.
How can I reference my image files from my CSS that are in different directories.
try
background-image: url("../images/deco1400.png");
Your tree structure is like
Assignment1
style
style.css <- you are here
images
img1.png
so either you need to go 1 level up (..) and then enter images OR you need to give absolute path /images/img1.png (note / at the beginning). Both should work, assuming Assignment is your root directory
UPDATE: you might be interested in reading about relative and absolute paths.