New web dev student here. I'm in inspector looking for certain elements of my web page. However once I find elements, it shows the CSS file and line that it belongs on. But, when I go to the CSS file and look for the element, it's not on that line. Am I missing something here?
Look at both the .carousel-inner in the image. Both telling me different lines of code they're on. But when I go to my CSS file in a text editor, those elements are not on the corresponding line that inspector is telling me.
Keep in mind that inside a generated CSS file, there can be several lines for the same definition. What could be happening is that you are checking the definition for the same class, but for a different media query.
I'd suggest you look for all the instances of the definition and see which one reflects the changes.
ctrl+f in your css file should be work
Related
I am trying to create a website on Squarespace and am having trouble selecting elements on my HTML page to use in the custom css. When I use the inspect element on my browser, the ID's for some elements change while others are constant.
I am running the developer mode and downloaded the code to my local machine via github.
In the downloaded site.region file I found the div element which contains the content I am trying to style:
<div id="content" class="main-content" data-content-field="main-content" data-collection-id="{collection.id}" {.equal? collection.typeName "gallery"}{.or}{.equal? collection.typeName "index"}{.or}data-edit-main-image="Banner"{.end}{.end}>
{squarespace.main-content}
</div>
Where is {squarespace.main-content} coming from and how do I select elements inside of it to style?
Regarding some IDs changing and some staying constant, indeed, this is the case. See this answer for more information on this. In summary:
...any ID starting with "yui" can/will change on page
refresh...however...block IDs (ID's starting with "block-" do not
change as long as the block is not removed...
Regarding where the {squarespace.main-content} coming from, that is a JSON-T tag that tells the server to load the content as entered within the content management system (a.k.a. "Layout Engine") for that page. Wherever that tag is, the content from Layout Engine for that page will be loaded.
Finally, regarding how to select the elements within the main-content for styling with CSS, you are on the right track. Inspect the elements as you are doing. If you want to target a specific block, look for ID's starting with block- and target those. Or find other ways to target the element, such as :first-child or nth-child selectors. Then enter your CSS in the CSS Editor or, if you're using Developer Mode (as you indicated that you are), then add the rules to your base.less file (or other CSS files as the case may be) and then update your template using Git or SFTP.
One last note that you do not need to use Developer Mode to target elements with CSS. You can simply target the right elements as mentioned then enter the rules in the CSS editor as mentioned, so there may be no need for the added complexity of Developer Mode at all.
In squarespace do this:
Turn ON the developer option ( to edit JS it is mandatory at least, not sure about CSS),
go to DESIGN »» CUSTOM CSS
add/change whatever you like there, you should style classes or css selector like nth-child/nth-of-type instead of those dynamic ID's.
You can see more info here:
Adding custom HTML, CSS, and JavaScript
Using the CSS Editor
I have made a small popup window that shows up at the bottom of the page (like a recommendation system). But whenever I embed my script to any of the client's website, it disturbs my CSS. Like the CSS which is on the client's website overshadows my CSS and this causes me to fix my CSS for each client. Is there a fix that I will have to install on my code?
Please help
Thanks
This is due to overlapping CSS properties of client's and your newly developed. I recommend you to inspect element of google chrome's very nice feature. You can individually identify your overlapping properties. If this is too much complex. Like James commented give a new id to your pop-up menu, which will separate your pop-up CSS from all other components on your web page
On of the ways I heard about is Shadow Dom, and in this article it describe it and at the beginning of the article he listed the problem in brief: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
But there is a fundamental problem that makes widgets built out of
HTML and JavaScript hard to use: The DOM tree inside a widget isn’t
encapsulated from the rest of the page. This lack of encapsulation
means your document stylesheet might accidentally apply to parts
inside the widget; your JavaScript might accidentally modify parts
inside the widget; your IDs might overlap with IDs inside the widget;
and so on.
Else which I did my self long time ago is: to name all your ids, classes with a special names for example 'mywebsite.myclass' this may minimize the issue. and I saw this way is used by many bookmarklets which import html,css and javascript to user opened page.
"All browsers" is a lot of browsers :P
CSS is going to get interesting soon thanks to shadow DOM. You are going to be able to create a web component that is completely isolated, DOM and CSS, from the rest of the document, which is exactly what you want.
Obviously, it's not in place in al browsers (only in Chrome at the time of me writing this). Meanwhile, this is what I would do:
Use shadow DOM components if available
Anyway, manually name-space everything you use (CSS classes, JavaScript, etc)
Try to use custom elements for everything. (that way, there's less risk of your e.g. <h2>s being styled by outer CSSs)
As a last resource, use very specific selectors (look up CSS specificity), and use !important. Just to be clear: never do this routinely!
Most of that stuff will fail for some value of "All browsers". You'll have to compromise somewhere, I guess.
Yes you can reset your div styles.
Something like this:
div.your-popup * {
/* your reset */
}
And try to set !important to styles or put them inline.
In addition create unique class names that no one can override it.
P.S. http://www.cssreset.com/
EDIT: Self-Answered. JSoup does indeed find all image tags.
I'm trying to scrape something off https://www.flickr.com/explore and I ran into a problem.
In the source code, the main images on that website are written in red font, and they don't get found by my JSoup select method (or with the getElementsByTag method). It would be much easier if you guys went to the website and checked the source code yourself because of formatting issues but I'll try to include the bare minimum here.
EDIT: I just tried viewing the source code through chrome and IE, and the image tags are not red, so I'm assuming it's firefox formatting. But the question remains, JSoup doesn't see those image tags. (Second edit at the end of the post)
EDIT 3: Removed my pasted code to put this print screen in: http://i.imgur.com/o8fNPnZ.png
Notice how the red blocks are the main user uploaded images (that I want), and you can see other img tags that are not red (but those are only things like tiny logos). When I run the code
Elements imageElements = doc.select("img");
and then print it, I get all the tags that are not red.
I'm not very experienced with HTML or CSS, is there something specific that I don't know? Or is it something in my code? Is there a way to retrieve the "red" font images as well?
EDIT 2: OK so I narrowed it down to red HTML font in firefox being an error of some kind. If I hover over it, it says: No space between attributes.
Now I'm a little more confused since flickr is a huge website and it obviously still works since I see the images. Can this be some sort of "anti-scraping" thing they have going on? Is there still a way for me to download the images?
Answering my own question.
I was mistaken, JSoup does indeed find ALL the img tags. I'm not 100% sure where my mistake was since I saw it yesterday and have changed my code since then, but I'm assuming it was my misuse of .select which would exclude those images (my code in this question was simplified for argument's sake).
I'll leave this question up because it might help someone else running into errored HTML in source code since there are a few helpful tips in the comments
I just downloaded Aptana (v3.0.4) and I'm really liking it, much better for coding than Dreamweaver. The big problem I've found so far is that I can't get the HTML highlighting to work properly.
For example, I go to the Theme selector and choose one theme (in this case the Dreamweaver theme, since I'm already used to those colors). It works fine for php, javascript, css... but for HTML. It won't give different colors to the different html tags (like "a", "img", "form", etc). If I look at the colors palette, I can see that those tags have different colors assigned, but no matter what color they have in the palette, they take the color of the "html meta" element in the palette. So basically, ALL the tags have the same color, which is annoying.
Is there any way to fix this? I've even created a new theme copying the Dreamweaver one to make modifications, but still the same...
EDIT
It seems that this might have something to do with Scopes. The coloring rules work assigning a color to a certain scope (each coding element has one scope linked to it). In the colors palette, each of the html tags ("a","img",etc) has a different scope linked to it. However, if I use the Show Scope tool that Aptana has, all those elements show the same scope: text.html.basic meta.tag.block.any.html entity.name.tag.inline.any.html, instead of showing a different one each one. So since they all have the same scope, using the them editor you can't choose a different color for each one... Is there any other way to do it? Is it possible to change the assigned scope of an element?
These operations behave similar to CSS Selectors.
GO => entity.name.tag.inline.(form, img, p, etc.).html.
(1) OPEN the Preferences Theme Panel.
(2) ADD (+) a NEW element.
(3) SELECT your desired STYLES.
(4) PASTE your desired scope selector, e.g., "entity.name.tag.inline.form.html" INTO the Scope Selector FIELD… and CLICK 'Apply'.
(5) PRESTO CHANGE-O!
All HTML tags currently have the same scope, so you can't (yet) do what you are asking. But please file a feature request so it can be added to the list.
maybe check the default editor for html files in aptana?
Anyway, my aptana had always the same color for each tag.
Of course we can use tools like Firebug to highlight portions of HTML and see what all CSS is being applied.
But what about the reverse? Is there some kind of tool which would allow you to highlight a particular CSS rule and show you all the pages on a site (either static HTML pages or their dynamic templates) that it applies to?
Example: I've come to work on a new site, very large and I need to edit CSS on a particular page but in doing so, I have no idea how many other pages on the site might also have these class names and hence be affected. Of course I can try to search the whole site for the class name(s) but this can be time consuming or tricky. This site has a class named "ba" for example. Guess how many irrelevant pages will turn up if I just search for "ba"? So how about including a double quote ("ba)? Well, it could be in the middle of a few other classes (class="hz ba top"), at the end (class="hz ba"), etc. More so, it could be dynamically plugged in via server side code making it even harder to find. A tool that could somehow spider your site and be able to identify all the places your CSS change will affect would be great.
not exactly that, but there is a firebug plugin that does that for any loaded page:
http://robertnyman.com/firefinder/
You could use regular expressions ..
for example in Dreamweaver on the search dialog box :
select 'Find in: Entire current local site.."
select 'Search: Source code'
check 'Use regular expression'
in the find textarea type class\s*?=\s*?".*?content.*?"
click 'find all'
the same regular expression could be used with other software that can search inside files using regular expressions....
for example : http://www.sowsoft.com/search.htm (not affiliated with them, just found it for here..)
Keep in mind though, that all the suggestions here do not take into account the case where the class is added by script..
If you use a Mac, there's an excellent shareware app called "CSSEdit" by an Indy Mac Shop in Belgium. A single-user license is 30 euros. I've used it for approx. three years and i can recommend it highly. It's a mature, stable App (though continuously updated/improved); widely used among Mac Web Designers, and those of use who are not but need all the help we can get, which CSSEdit certainly seems to provide.
To show elements on the html page styled by a given selector:
(i) open both the style sheet and the markup page (markup page must have a link to the style sheet);
(ii) click the X-Ray button off (must read 'Not Active' below the button);
(iii) in the style editor, click any selector (i click it so that my cursor is at the left margin, e.g., in front of the '#', etc.);
(iv) now click 'inspector' on the mark-up page (next to 'X-ray').
Now, look at your mark-up page--it will have a blue outline around the elements affect by the style you clicked on in step (iii) above.
For this kind of things I just use grep, or - even better, ack.
If you're concerned about false positive when searching for short patterns, you can do a double filter: you grep all lines containing class= and you feed its output in another grep which only narrows the result down to the lines containing both class= and your search pattern (which can also be more precisely specified with a regexp using word boundaries like \bba\b to avoid matching bar or abba)
How about putting an ID on the body of each page, and use that to restrain the use of CSS outside of pages clearly stated in the CSS?
Like this:
#mypage .description,
#myotherpage . description {
}
Cons:
Must put a body ID on each page / template.
Must specify each page the CSS should apply to. More CSS code to manage.
Makes the CSS less easy to scan through with your eyes (since the line starts with the page ID and not the CSS style). This is a bigger problem if some of the CSS styles are used on several pages (since the css spec for each style would be long).
Pros:
Avoids unintentioned CSS change propagations. I.e. changing one page affects other unknown pages.
See what pages a CSS change would affect, when you're editing the CSS style itself. The information is right there; no need to search/grep for it.
Forces developers to specify what pages the CSS would affect. If you'd just included this information as comments in your CSS, some person would inevitably forget to update the comment when the CSS is used on a new page.
I agree with this statement, made by a friend:
"Minimize CSS that is used several places. It's not like programming; it's better with a little duplicate CSS, than unmanageable CSS. (Pages like apple.com, has own stylesheets for
each page, and some global CSS.)"
- Olav Bjørkøy, original creator of the Blueprint CSS framework
I'd love your input on this, or if any of you have found a better way.