I have a less library that has multiple versions.
I have the main page that uses V1 of this library.
At a point a component of the page uses V2 of this library.
My problem is that when that component is loaded that uses V2 the styles are applied on the whole page.
Unfortunately the library is not backward compatible so it ruins the whole page :|.
Is it possible to isolate somehow that inner component from the rest of the page?
CSS Page:
Thank you!
You could put a unique identifier (id or class) on the Inner Page container, and cascade from that container in your V2 CSS to affect only its contents.
#inner-page input { width: 100%; }
#inner-page p { margin-bottom: 20px; }
Or LESS eg:
#inner-page {
input {
width: 100%;
}
p {
margin-bottom: 20px;
}
}
This will affect content in a container with a unique id whether it is dynamic or not.
Related
UPDATE: https://github.com/Polymer/polymer/issues/5551 - they use shadyDom
Youtube team recently updated their code to Polymer 3.x
If you go to youtube and open dev tools, you don't see any shadow dom at all:
However, when you start a new Polymer 3 app, shadow dom is here, as it was in previous versions.
There are a lot of discussions about how great it will be to be able to render certain components without shadow dom. Seems like youtube team has succeeded in this.
Shadow dom is great for component development, but pages, for
instance, should not be treated as components, IMHO. Treating
everything as a component (with ShadowDom) turns out to a be pain -
issues with styling, third party libs and more.
My question is: How youtube team achieved this?
Posibly they are using this:
polymer reference
emphasis mine :
Customize DOM initialization
There are several points where you can
customize how Polymer initializes your element's DOM. You can
customize how the shadow root is created by creating it yourself. And
you can override the _attachDom method to change how the the DOM tree
is added to your element: for example, to stamp into light DOM instead
of shadow DOM.
Stamp templates in light DOM
You can customize how the DOM is stamped by overriding the _attachDom
method. The method takes a single argument, a DocumentFragment
containing the DOM to be stamped. If you want to stamp the template
into light DOM, simply add an override like this:
_attachDom(dom) { this.appendChild(dom); } When you stamp the DOM template to light DOM like this, data bindings and declarative event
listeners work as usual, but you cannot use shadow DOM features, like
and style encapsulation.
A template stamped into light DOM shouldn't contain any tags.
Styles can be applied by an enclosing host element, or at the document
level if the element isn't used inside another element's shadow DOM.
About the styling in litelement, now you can do:
static get styles() {
return css`
:host {
display: block;
height: 100%;
}
.boxing rect {
x: -24;
y: -14;
width: 48px;
height: 28px;
rx: 8;
ry: 8;
}
.copia rect.text {
width: 135px;
height: 30px;
stroke:blue;
stroke-width: 1px;
}
text {
font-size: 20px;
font-family: Arial;
}
${miGestorEstilos.getDibujaGafa()}
${miGestorEstilos.getDibujaForma()}
`
}
Notice that this function can be shared across modules, and is composable with other functions returning also "CSS"
I'm using AngularJS and Cordova (ionic) in a mobile application project, and everything uses the same page perse. Everything is loaded into a single index.html file, so the body, html, ion-view, ion-content elements are all shared between each "page"/"interface"
Basically, all of my interfaces are set up with a unique identifier:
<ion-content id="interface-name">...</ion-content>
However, in this interface I need to make sure that the following elements have the following styles:
html, body, ion-view, ion-content, .scroll {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
So that the interface can be fullscreen. This is all fine and dandy, but it's causing issues for my other interfaces not being able to scroll/expand vertically.
Is there a way (using CSS) to only apply a style if a child id/class is present, for example the above style is only applied if id="interface-name" is applied to a child element?
No. That's the "cascading" part of Cascading Style Sheets. It's a top down approach and you can't go back up the stream.
There is a relatively new pseudo-class :has() that allows you to only apply css to an element, if a specific child (or children) is present.
Link to the mdn web docs
For example, you can apply a selector to an element of the class .list only, of a child with the class .list-item is present:
.list:has(.list-item) {
display: block;
}
However, this feature is relatively new, and not all common browsers support that css selector yet: see the browser-compatibility
If you want your code above to work on ID/class, for example apply only to id="interface-name"
#interface-name {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
You could do it with a JavaScript function at page load time, but you can't apply CSS rules conditionally on the existence of child elements. Something simple like
var parent = document.getElementById("elementId").childNodes;
var children = parent.childNodes;
for(child in children) {
if(child.id == "theIdYouAreLookingFor") {
parent.style.height = "100%";
// set other CSS rules here
// ...
break; // we're done, no need to check other children
}
}
I am using Squarespace as my website builder. I have added a search icon above my blog feed https://www.livingwithphotography.co.uk/learn/ however for some reason the search box also appears on each blog post as well. This is what I don't want, instead I just want it to be shown on this page https://www.livingwithphotography.co.uk/learn/.
In order to code search icon I added this code in the site header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
I then added this css code
.myTitle {
width: 100px;
padding: 10px;
border: 1px solid grey;
margin: 40px;
font-size: 22px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Lastly I then added this code to the PAGE HEADER CODE INJECTION
<div class="myTitle"><img src="https://livingwithphotography.squarespace.com/s/Screen-Shot-2015-06-01-at-120646.png" alt="search icon" style="width:20px"> <a href="/search?q=&f_collectionId=5568d109e4b0cb923356090b">Search</div>
<script>
$(document).ready(function() {
$(".myTitle").prependTo("#content");
});
</script>
I hope there is a way, thanks for your help :)
This is a little hacky, but it should work. Wrap the code where you prepend the div in this if.
$(document).ready(function() {
if(window.location.pathname == "/learn") {
$(".myTitle").prependTo("#content");
}
});
Lawrence,
In your CMS (SQ), the type of mod you're wanting here is actually best done in 'developer' mode. Essentially, there's only one collection-ID assigned to the blog itself, which is why when you inject to the main page/content area, it appears across the board as you've noticed. The only differentiating factor is that blog overview pages have added class of "blog-list", while blog entries pages have added class "blog-items" (again, both still contained within the same collection).
So that all said, if you're trying to do this with Jquery in an existing template on a blog module specifically (and you are not toggling into developer), one way to workaround is to target the first instance of the ".entry-header" class on the blog [instead of using 'prependTo' #content].
After targeting the first instance of the entry-header, you would additionally need to also hide the display on the '.blog-items' pages as well (these are the actual entry items themselves). With this approach, your new class "myTitle" should appear only on the blog overview page (in your case: /learn/), but keep it hidden on actual article entry view.
So instead of what you have now, try instead using:
$(document).ready(function() {
$('.myTitle').insertBefore('.entry-header:first');
});
Then in Custom CSS put:
.myTitle {
font-size: 30px;
margin: 40px auto;
padding: 10px;
text-align: center;
width: 201px;
}
.blog-item .myTitle {
display: none;
}
As a note, while it's not totally "proper" form, many just put the whole shebang right into the blog module header since it's page specific and won't run globally.
In that case, you would just input all your code directly into: > Configure Blog > Advanced. Here's a screenshot example (note: shot taken directly from their UI and why the line wraps look funky):
Last note: This method does work, however, bear in mind that if you've manipulated other elements in your site as well (which I wouldn't know if you did) then those other changes could also impact.
Hope this helps.
You could use the Squarespace search block and summary block to do this without any coding:
Just create a new page.
Insert a "search" block and constrain it to only search your blog collection.
Insert a "summary" block and set it to display your existing blog.
Here is an example I set up on my site to demonstrate: http://www.figjamit.com.au/example
Based on In MediaWiki, is there a way I can apply [[Image:<name>]] style resizing to external images?
Instead of adding an entry like this in the [[MediaWiki:Common.css]] page on the wiki
.image100px img { width: 100px; }
Would it be possible to change the css line with use of a mediawiki passed variable to set the width to an arbitrary value at runtime?
I now have 10 such lines to have a relative flexibility in external image sizing but would prefer to have something of the kind
.imagewidthpx img { width: {{{1}}}; }
I have no idea how to interact dynamically with common.css or even if this is feasible and I really need to embed external images with resizing.
Thanks
Something like this might work...
In MediaWiki:Commmon.css add:
.externalimage-holder {
position: relative;
}
.externalimage-holder img {
width: 100%;
height: auto;
}
then set up a template Template:Sized-external-image like this:
<div class="externalimage-holder" style="width:{{{1}}}">{{{2}}}</div>
and call it like this:
{{sized-external-image|250px|https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg/1024px-%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg}}
Unfortunately I can't test it right now as I'm having some difficulties with my local installation.
I'm using the excellent Jalbum to create a photo album for a website. Each page of the generated photo album is a complete webpage, so the recommended way to embed the album within a website is to use an iframe.
A problem arises when I want to style the images contained within the embedded iframe. If I add a rule such as:
img {
-ms-interpolation-mode: bicubic;
}
to my stylesheet, it does not select the images within the iframe. Is there a way to select elements contained within an embedded iframe?
Of course, I could manually edit the CSS file created by Jalbum before I embed the iframe, but I would need to remember to do this every time I regenerate the album.
You could use JavaScript code to insert a CSS include into the document of the iframe.
From my experience it is just about making CSS rules that are more specific than the rules within the iframe itself. this can be accomplished by for instance giving an ID to the iframe, and have that has the outer element, making it more specific (LESS example with a livestream embed that we are using on our platform):
#livestream-iframe-wrapper {
width: 100%;
height: 100%;
#livestream-viewer {
width: 100%;
height: 100%;
#layout0, #layout1, #layout2, #layout3 {
#layout4, #layout0-lsplayer, #layout1-lsplayer, #layout2-lsplayer, #layout3-lsplayer, #layout4-lsplayer {
width: 100%;
height: 100%;
#lsplayer {
width: 100% ;
height: 100%;
}
}
}
}
}
I cant give any specific information on how to do this for your case, but use the DOM inspector in the browser development tools to inspect the DOM and find the classes to override.