I'm trying to embed the bitcoin widget headlines from www.bitcoin.com into my website but is there a way to make it full-width?
here is the widget (taking out the divs to be able to show it here):
div class="btcwdgt-news" bw-entries="3" bw-theme="light"
I'd like it to occupy the whole width of my page if possible.
(original link: bitcoin.com/widgets)
You can override the widget CSS parameters by inserting in you CSS file the following:
div.btcwdgt {
max-width: 100% !important;
}
Also I would recommend you to read this: How to override the properties of a CSS class using another CSS class
(function(b,i,t,C,O,I,N) {
window.addEventListener('load',function() {
if(b.getElementById(C))return;
I=b.createElement(i),N=b.getElementsByTagName(i)[0];
I.src=t;I.id=C;N.parentNode.insertBefore(I, N);
},false)
})(document,'script','https://widgets.bitcoin.com/widget.js','btcwdgt');
div.btcwdgt {
max-width: 100% !important;
}
<div class="btcwdgt-news" bw-entries="3" bw-theme="light"></div>
Related
This is a wordpress website - https://smecollaborative.org/
Down the page there is a section pulling from the Events Calendar. Each Event has a featured image. You can use CSS to hide the featured image of each image, but the challenge is using the Fusion Builder element, the featured image is replaced with a 'placeholder' image off a calendar, and I can't get that thing hidden.
Here are the two snippets I've tried:
.single-tribe_events .page-header-image-single {
display: none;
}
.tribe-events-event-image img {
display:none!important;
}
.fusion-events-shortcode .tribe-events-event-image {
height: auto !important;
}
The 2 snippets you tried are wrong because:
snippet 1. is targeting the header image on the tribe event single page.
snippet 2. is targeting an img tag which does not exist in this case.
You should target the parent item to also hide the clickable link to it:
.fusion-events-post div.fusion-events-thumbnail {
display: none;
}
I added the extra div to the thumbnail selector to override the standard display: block; without having to use !important
Or, in case you only want to hide it if the image is missing you can do:
.fusion-events-post .fusion-events-thumbnail span {
display: none;
}
This one will only target the placeholder in case it is present
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
I've been using for some time a "BEM like" syntax in my projects. Recently, I was just re-reading some CSS articles when I saw this: https://en.bem.info/methodology/css/#single-responsibility-principle
Basically, instead of putting all the styles of header__button inside that class, it also relays on styles from button class. Aren't we in this case coupling the element of header with the button class? That means that if in the future, we're gonna change the button class, we also need to remember exactly where we're using this class.
In this example maybe it makes sense because you're trying to have the same styles, but what about a layout component? For instance, let's suppose that I have a Menu class that position some children vertically, and I have a Sidebar class that's also going to apply some style to those children. And we use them like this:
menu.css
Menu {
}
Menu__item {
}
sidebar.css
Sidebar {
}
Sidebar__item {
}
index.html
<div class="Menu Sidebar">
<div class="Menu__item Sidebar__item">
</div>
<div class="Menu__item Sidebar__item">
</div>
</div>
If we don't put all the code about how to position items in the Sidebar class and in the future we change some of this code from Menu, maybe the Sidebar class is going to be broken. In the other case, if we repeat code in both classes Menu and Sidebar we're violating the SRP (single responsibility principle) discussed at the begging of the question. That's what lately, in my projects, I've been favoring code duplication, so I would write all the code needed for a Sidebar into the Sidebar class.
But, what would be the best practice here?
There's also a chapter which partially answers your question: https://en.bem.info/methodology/css/#external-geometry-and-positioning
In your example I'd day Sidebar should be responsible for Menu positioning but it shouldn't know anything about Menu__items. And Menu in its turn should not know anything about its own positioning but should position its items inside.
If you really need to change something in Menu__item positioning when it's inside Sidebar use nested selectors:
.Menu {
}
.Menu__item {
}
.Sidebar {
}
.Sidebar .Menu__item {
}
I think, you should decide, what is it: menu or sidebar, and use one of these classes. If blocks are different a bit, you should use modifiers. If it is impossible to do this with modifiers, use two different classes.
Using modifiers:
// your menu
.menu { }
.menu__item { }
// your sidebar
.menu--some-modifier { }
.menu__item--some-modifier { }
//
.sidebar__menu {
// set some styles (margins, positioning) for .menu
}
Two independent different blocks:
// your menu
.menu { }
.menu__item { }
// your sidebar
.sidebar { }
.sidebar__item { }
I received a task at work to create some mini-webpage layout with bootstrap. I decided to base on already done layout (Amoeba). Here is the preview: Amoeba bootstrap link
Well, on localhost almost works except one thing - footer. Just take a look on provided link and then: click Portfolio (from navigation) and then filter the gallery by Photography.
When you will scroll down you will see ugly space. And this is my issue. I dont want that. So i thought that I need a footer OR portfolio div class which will automatically resize to proper size. BUt I dont how how to achieve that. Any tips?
You need only to change the code of modernizr slightly. Change forceHeight to false and will work good.
if (Modernizr.mq("screen and (max-width:1024px)")) {
jQuery("body").toggleClass("body");
} else {
var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: false,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
}
Im not sure why, but your body element gets some height inline styling. Anyways here is the solution of your problem:
body {
height:100% !important; // inline styles, so you need to add "!important" here
position:relative;
}
#footer {
position: absolute;
width: 100%;
bottom: 0px;
}
You can also add wrapper div if you don't want to add position:relative and height:100%!important properties to your body element. Just see how it works and choose a better option for you.
Hi I want to do a fixed size page, but don't want the page to break or reflow at all if the user resizes the window. Is this a javascript function?
sample: http://www.neimanmarcus.com/
Most people put all the content of there page inside a div with an id, such as 'doc', then they would apply the following rule:
<body><div id="doc">
YOUR PAGE HERE
</div></body>
body {
test-align: center;
}
#doc {
margin: 0 auto;
text-align: left;
width: 940px
}
The "text-align" fixes an IE 6 issue, really you just need to assign a margin to your wrapping document div.
it doesn't need java script function .
but remember : don't use % for declaring width or height for elements in css.(for having a static element that resizing window doesn't effect that).
for example : "width:90%;" ==> replace this with "width:100px;"