I want to override the default styling using the fancybox2-rails. In particular, I want to set the navigation outside the slideshow like this:
http://jsfiddle.net/Xh3B2/
Unfortunately, this isn't working with any traditional ways I'm trying, like overriding the css manually in my view:
$(function(){
// override fancybox default styling
console.log("overriding styling");
$('.fancybox').css("margin", "20px 60px 20px 60px");
$('.fancybox-prev').css("left", "-60px");
$('.fancybox-next').css("right", "-60px");
}
In my browser, I can see that the styling is defined in the file jquery.fancybox.css, but I can't access this file. How might I change the styling?
to fix this, I created the file
fancybox_and_overrides.css.scss
and put it in my stylesheets folder.
I then edited the contents to look like this:
.fancybox-prev{
left:-80px !important;
}
.fancybox-next{
right:-80px !important;
}
.fancybox-nav{
width: 60px !important;
}
and it worked!
Related
I read through the Trix documentation and an answer did not jump out at me for this. It appears that the Trix WYSIWYG editor defaults to 3 displayed rows:
Any chance this can be toggled to more rows, for example: 15 or so rows:
It is a matter of setting the min-height css attribute. Using javascript, this works if you only have one trix-editor on the page:
$('trix-editor').css("min-height", "350px");
If you have multiple trix editors on the page and you only want to change the default height for that one: what I did is I wrapped the trix editor in a div, set a class on that div, and used find:
$('.solution-trix-field-wrapper').find($('trix-editor')).css("min-height", "350px");
Yes, you are right, but I have solved the different way.
You can be overriding the default CSS like trix-content class
.trix-content{
height: 350px;
}
you can increase the height using this CSS if you want to use scroll after some depth then overflow-y: auto; like
.trix-content{
height: 350px;
overflow-y: auto;
}
after 350px it will automatically add the scrollbar.
Where should I add the code?
Try adding it to your stylesheets/application.scss file (if you're using sass - or equivalent files).
In rails 7 I had to override the min-height of the trix-editor element. Code in app/assets/stylesheets/actiontext.css
trix-editor {
min-height: 15em;
}
I want to set custom height (and possible other things) the the flickity 'carousel-cells' INDIVIDUALLY. I can see it is calculated somehow with with javascript by the flickity package itself.
How could I overwrite this, to create something like this (with the smaller inactive slide)?
.
I have tried to give the carousel-cells a height of 300px, and the active carousel (who has a class is-selected) a height of 500px. That did not work.
.carousel-cell {
width: 70%;
height: 300px;
background: #8C8;
}
.is-selected{
height: 500px !important;
}
A simple codepen to get you started if you like.
You need to work off the asNavFor sample until you get to a view like in this CodePen
I want to remove the background-color effect applying when clicked on tab in angular material:
Here is the link of md-tabs
When I click on the tab, I can see a background-color is applying to the div element:
Here is the screenshot
I tried to over-ride the style with the following code, but not taking into effect:
.md-ripple-container:active{
background-color: none; !important
}
Help!!
Just use the .md-tab.md-active class in css. see the below example.
http://codepen.io/next1/pen/JXbVQN
You can override material styling from your scss/css. Like this:
/deep/ .mat-tab-group.mat-primary mat-tab-label-active{
background-color: red;
}
Due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered.
I need to make a dropdown navigation, where for every parent navigation item, in the dropdown area I show the child pages + 3 images with a title linked to other pages.
I would need something like the 'Custom Navigation' module with an option to select images (or add a custom class, and get the image from the page).
Is there an extension which I could use for this? If not, would be easier/faster to change/extend a core module, or should I create a new one?
Thanks!
EXAMPLE ('Kollektion' menu-item hovered. The gray area is the submenu container)
I don't know of an extension that would allow including an image to a specific link in a navigation menu. But if you are willing to do it with CSS styles, here's how I would do it:
Any page can have multiple custom CSS classes and they do apply to the navigation (unless the navigation template has been changed in such a way that they don't anymore). The place where you enter these CSS classes is at the bottom of the Edit page view, under expert settings. Add any CSS classes you want and then edit the style sheet to make them look right.
If the three pages are not supposed to be subpages for the current page, but lead somewhere else, you can use the "Internal redirect" page type for them.
The CSS could be something like this in addition to your regular styling:
.level_2 li {
float: left;
clear: left; /* this is to stack them on top of one another*/
}
.level_2 li.special_class {
display: inline-block;
vertical-align: top;
}
.level_2 li.special_class:before {
display: block;
content: '';
width: /* the intended image width */
height: /* the intended image height */
}
.level_2 li.special_class.foo {
background-image: url('foo');
}
.level_2 li.special_class.bar {
background-image: url('bar');
}
...
Please remember that this isn't supposed to be a complete solution, but rather a principle upon which you can build your own. You may want to add backwards compatibility to older browsers (or not), etc.
I think there is an extension to allow you do that. check this link Navigation with images
and may be this one also Navigations-Bild
Either of this should give you what you want but with a little styling
Is it possible to create a jQueryUI Button with a custom icon, ie: an icon that is not part of the sprite icons that are provided with jQueryUI???
I am using the ButtonSet functionality for a group of 3 checkboxes but need a more stylised icon than what is provided out of the box...
Worked it out with a CSS hack.
Setup the button as per normal and give the primary icon the "Error" class defined below
.Error
{
background-image: url('Images/Icons/16/Error.png') !important;
}
The !important overrides the ui-icon definition for background-image.
I took this approach for one of my buttons and I discovered some interesting things:
I didn't need to use the "!important" override
I needed to set background-position for my button (otherwise I think the background was being displayed well outside the button)
It looks like you can also put anything you like in the jQueryUI primary icon name - it just needs something as a placeholder.
For my uses I ended up with:
Javascript:
jQuery(function() {
jQuery('#share-button').button({
icons: { primary: "icons/share" }
});
});
CSS:
#share-button > span.ui-icon {
background-image: url(icons/share.png);
background-position:0px 3px;}
HTML:
<button id='share-button'>Share</button>