In my SCSS file I'm using the Rails image-url helper like this:
background-image: image-url('sidebar-button-gradient.png')!important
It generates this two lines in the CSS as output:
background-image: url(/assets/sidebar-button-gradient.png) !important img;
background-image-width: 20px;
In Chrome inspector, the first line is ignored (it is crossed), if I manually remove the extra last 'img' word it is considered:
background-image: url(/assets/sidebar-button-gradient.png) !important;
Rails helper is generating it, how can I remove that word?
I tried also asset-url(path, image)
This appears to be working:
background: url(sidebar-button-gradient.png) repeat-x #f6f6f4;
Only rest to test in production, I'm not sure if it will work when the assets are precompiled.
If you're using SCSS, it should be trivial to add Compass on top of it (obviously, I say that without knowing much about your setup). If you're having trouble with the Rails image-url helper, try using the image-url helper provided by compass. It has a similar or identical syntax and I've never had trouble with its output.
Related
When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"
ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example)
I expect see topnav in a single line.
I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right !important;
width: 200px;
padding-top: 6px;
}
The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.
One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.
Thanks Paustian. It's working.
I have edited the file: Resources\ZikulaSearchModule\views\Block\search.html.twig in order to change the css class to "myInput-group". Then I have edited Resources/public/css/style.css and add your changes to the file.
Thanks for all guys.
I am trying to implement a basic theme roller functionality using LESS CSS.
Suppose I have the following Less Code, which compiles to a .css file included in the page:
#main-background-color: #809BB8;
body
{
background-color: #main-background-color;
}
I would like to change the #main-background-color dynamically with javascript based on an user action (Color Picker) and compile the LESS code dynamically and refresh the styles of the page so that the user changes are reflected immediately in the browser.
Is this possible at all?
Please advise!
Thanks
you could try using less.js functions like:
less.refreshStyles()
or
less.modifyVars()
you can maybe read some more on this here: Dynamically changing less variables
Something along this lines with JavaScript and modifyVars might work:
var $picked-color = "#809BB8";
less.modifyVars({
'#main-background-color': $picked-color
});
I'm using angular-ui bootstrap carousel and would like to change the right and left navigation links with images. It seems that within the tpl they are hardcoded with ‹ and ›
Does anyone have any recommendations on changing these to images without changing the actual angular-ui bootstrap files? I want to keep this in a library and don't want to change it after each version release.
The only solution I had was a hack to make the control of these angle brackets super small in CSS so they couldn't be seen and placed the images.
.carousel-control {
font-size: 1px
}
.carousel-control.left, carousel-control.right {
background: url(/path/to/[image-here].png) no-repeat !important;
}
Is there a better solution?
The goal for the http://angular-ui.github.io/bootstrap/ project is to have customizable templates so if you don't like the default markup you can swap it for your own. If you want to change carousel's look and feel I would recommend overriding the default template (https://github.com/angular-ui/bootstrap/tree/master/template/carousel).
You can easily override individual templates without messing without touching project's deliverables as described here: https://stackoverflow.com/a/17677437/1418796
Hi I am using twitter bootstrap for my website. I have put dropdown in collpsable which is in modal window. My problem is the dropdow I have put in collaspable inner, it cutoff the menu. Here is that Image
It should show like this :
I have tried by changing the z-index attribute but unable to show it. Can anybody know what is the problem?
I beleive the css it is using is the .dropdown-menu class whose position is set to absolute. If you change the position to relative it will give you the behavior you desire.
So you could isolate this change in your own .css file so you don't touch the main bootstrap.css file so its easier to update without breaking your styles.
So perhaps something in a custom.css:
.dropdown-menu {
position: relative;
}
I have deployed fancybox v2.0.4 on my RoR v3.0.3 web app to create a photo gallery. I've been able to get fancy box to product a large image when a thumbnail is clicked, but am having several issues with the appearance and behavior not working as expected.
1st issue - I can't seem to get the fancybox buttons to appear. I've gone into the jquery.fancybox-buttons.css and changed the paths for the various "background-image: url" to point to the fancybox folder in the public/images folder (standard RoR). Here is an example:
background-image: url('./images/fancybox/fancybox_buttons.png');
My first suspicion is that I am referencing this incorrectly, but I've tried every relative path iteration I can think of.
2nd issue - The default div that shows fancybox image keeps getting tucked behind the div that has the image_tags in it. I have changed the z-index in the fancybox css files to be greater than the z-index in the other divs on the page. I can't seem to change this at all. Here is the default fancybox div I am referring to:
<div class="fancybox-wrap fancybox-default fancybox-opened" style="display: block; overflow-x: visible; overflow-y: visible; height: auto; width: 486px; position: fixed; top: 20px; left: 468px; ">....</div>
3rd issue - I am unable to get any of the drop shadows or other "stock" css effects to appear. I have checked that the source code is pointing to the appropriate css files. I have placed all the fancybox css files in the standard RoR stylesheets folder and all the .js files in the standard javascript folder. In my Application.html.erb file I have explicitly called for these javascript libraries and stylesheets inside my tags.
OK, I found the problems that were preventing this from working:
The path for the fancybox_sprite.png and all the other urls in the jquery.fancybox.css file need to be as follows (assuming you are placing the images in the default "public/images" folder in a standard RoR application:
background-image: url('/images/fancybox_sprite.png');
I had conflicting jquery-.min.js files in the javascripts folder.
Case closed.