I am writing a Chrome Extension that inserts a DIV on top of an existing page. I have given my DIV the distinct ID name, 'juxiSidebar'. In addition, all of the ID and Classes I insert into the page contain the prefix 'juxi'. The problem is that when I visit certain pages, sometimes my CSS formatting gets messed up, and I am unsure why this is happening. When I search the page for any IDs/Classes that start with 'juxi', I just see my own tags.
Here is a snippet of how I am inserting my nodes:
var sidebar = document.createElement('div');
sidebar.id = "juxiSidebar";
document.body.appendChild(sidebar);
Not only ID and class selectors can affect the style of your element, but also other selectors, such as div, body > div, etc.
Make sure that all relevant styles for your element are set.
Related
I'm using CSS Hero which makes it easy for the element to break down.
On one page the wrapper, which bleeds over to other templates, shows this:
html>body>#wrapper>#main>#content>div
Since I only want the changes to be for this element on this page what would I do? I tried this:
.page-id-89 .html>body>#wrapper>#main>#content>div
Unfortunately, this did not work.
I am wanting to create Custom Links within my menu to open to (open) tabs on a page. I have tried to use anchors but this is not working.
Please see example for URL: https://adventurethon.savvylittlefreelancer.com/
Main menu > Events (dropdown) > Clarence Valley > Results
Under main menu settings, I have created a Custom Link for "Results" and want this to redirect straight to the Results Tab under Event > Clarence Valley when clicked on.
I have given a section within the tab an ID or clarence-results and linked this to Menu Custom Link > Anchor = #clarence-results with no luck.
Anchor ID on Results
Anchor ID in Menu
I have also added in the direct URL: https://adventurethon.savvylittlefreelancer.com/event/clarence-valley-nsw/#clarence-results & adventurethon.savvylittlefreelancer.com/event/clarence-valley-nsw/#clarence-results (with no https://)
And no luck.
The custom links direct to page successfully but does not take me to the "results" part of the page.
Any pointers?
Thanks!
I am not sure what the parent element is that is displaying as none, but I tried to
#clarence-results {
display: inline;
}
Not quite sure how to display the parent element.
Thanks!
It is because a parent element of the tag with the "clarence-results" ID is being hidden with CSS display: none. Make sure the element is showing, and the jump link should work.
I have checked and there is not reliable way to select this particular element with CSS. I suspect it is being hidden by some sort of setting in the backend, so your options are:
Find the setting that makes this element visible
Add a visible element above it with an ID, and use that as the anchor. If you don't want it to be visible, you could use visibility: hidden and/or height: 0; overflow: hidden;
Add an ID to the wrapping column or row, then use that as the anchor.
Without being able to see your site's admin, it's difficult to find the best way to fix it. But the root of the problem is that the ID you are linking to is not visible on the page, so you need to either make it visible (I strongly suspect there is a setting somewhere that is hiding it), or you need to link to a different (visible) ID.
We are working on customising a website for our client in Squarespace (so that they can manage it on their own).
I've added a CSS style to the background of a layer of text, but it won't show up. I have imported the image to use into Squarespace and I have the URL.
I have also inspected the page element and found the id that I'm wanting to target to.
This is my code:
#yui_3_17_2_5_1465050472193_17704 {
background-image: url("http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5752e43c22482e7d77f53e3b/1465050172750/Share+the+Love+Kids+Club.png")
}
Why does this not add the image I expect?
In Squarespace, currently, any ID starting with "yui" can/will change on page refresh. That is because such IDs are dynamically generated. Therefore, you should not rely on them for use in CSS or Javascript.
However, it is currently accepted that block IDs (ID's starting with "block-" do not change as long as the block is not removed or moved in a way that causes it to be removed (such as dragging a text block directly above/below another text block).
Therefore, you should instead locate the block ID of the block to which you want the CSS rule applied. If you need to target with even greater specificity, start with the block ID then add specificity from there. For example:
#block-yui_3_17_2_4_1443109442267_11866 {
background-image: url("http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5752e43c22482e7d77f53e3b/1465050172750/Share+the+Love+Kids+Club.png")
}
If this still doesn't give you enough to get the problem solved, consider adding a link to the page in question, and stating which block/area on the page you want to target.
Additional Information/References:
https://answers.squarespace.com/questions/59297/how-do-i-discover-a-block-id.html
https://answers.squarespace.com/questions/10450/which-ids-should-i-target-for-my-css.html
I am trying to fix a presentation bug in Google Chrome. When I change one class, the page looks correct. However, if I change every attribute of class A to those of class B, the presentation is still wrong. Therefore, one of the child elements has a different style applied when I change the style.
Is there a way to quickly see all the changes in the computed styles on all elements that occur because you change a class on one element?
With an element selected, click on the '+' in the upper right corner of the inspector. This will allow you to write a new rule.
Is it possible to add new CSS properties in the Chrome inspector? It seems that you can only edit existing properties.
Also, once you edit the properties, is there a way to view the revised CSS as a whole?
Yes, it's possible to add new CSS properties in the Chrome inspector and review them in a few easy steps:
Right click in the element you want to change and choose "Inspect element";
Click the "New Style Rule" button (1 in the image below);
Google Chrome will assign a CSS matching rule which you can rename (2 in the image below);
Add your CSS rules (2 in the image below);
When you're done just check the "Computed Style" pane (3 in the image below).
You can add new property in a rule double clicking within the rule. Also you can add a new rule from the wheel in the corner and then select "New Style Rule".
To view the whole revised document go to: Resources > Frame > site name > Stylesheets > stylesheet-name.css
Or simply Click the + symbol above the css properties
Is it possible to add new CSS properties in the Chrome inspector? It
seems that you can only edit existing properties...
Simply double-click in any white and empty space in the "Styles" panel.
I tend to double-click to the right of the } for whichever CSS rule I want to edit.
Also, once you edit the properties, is there a way to view the revised
CSS as a whole?
See #Sotiris's answer.
Not that I know of.
There may be an extension that can do this, but if one exists, it probably won't preserve the exact formatting of your original CSS.
Why not? Here is the screenshot of the Styles panel of the Google Chrome inspector
Notice the block:
element.style {
}
You just click with mouse in that area and inspector will give you an opportunity to add new styles. If you need to add a new attribute to an element, you right click on it in the Elements panel and choose 'Add attribute'.
Also, once you edit the properties, is there a way to view the revised CSS as a whole?
Doesn't Computed Style panel give you this information? There you can check al lthe styles applied to a node and, actually, in what rule and from what stylesheet they are applied.