0

I want to modify a division by adding a width element in its CSS options. I use chrome and firebug also to copy the CSS' path, but i guess that the output is not right. Once i put it in my style.css, it makes no changes to the divison. Also, if i do an inspectiona after refresh, i can clearly see that css options are not added.

Example: i want to alter the style of division called "fpart" in my footer. When i do copy css path, i get this output: body > div > div.fpart If i add this line: body > div > div.fpart { width:900px; } in my style.css, it wont work. Also, division fpart ( div style="fpart" ) is not on body, its on my footer, so i guess it should be something like: #footer .fpart { width:900px; } etc

Question is, what tool to use in order to get the correct element's name, that i will be able to add in my style.css and will work?

Priya Ranjan Singh
  • 1,567
  • 1
  • 15
  • 29
jeejee
  • 45
  • 1
  • 4
  • 11

3 Answers3

1

This should be in normal case sufficient:

.fpart{
  width: 900px;
}

Based on what your question is, we're making an assumption that the div that we're targeting is:

<div class="fpart">...</div>

If this doesn't work, then there is certainly something else that's going wrong and we should try putting your code on jsfiddle.net so that we can get a closer look.

Inputs from user: Webpage: http://thinkpreview.com/contact-us/

Target class: .fpart (inside an iframe)

Css selector for .fpart:

iframe{
  border: solid 1px red;
}

iframe .fpart{
  // selector to select something inside iframe
  // invalid selector - will not work
  border: solid 1px blue !important;
}
Priya Ranjan Singh
  • 1,567
  • 1
  • 15
  • 29
  • If this is sufficient, why css inspectors are not giving me this as the CSS path? My code is
    bla bla, and this is inside the footer division.
     – jeejee Apr 19 '14 at 16:35
  • css inspectors give the highest specificity of selector. in other words, they tell so much more but its not required. the reason it might not be working is not to do with selector, so we should look for some error beyond this. by starting to see html too, or a jsfiddle example. – Priya Ranjan Singh Apr 19 '14 at 16:37
  • Im actually trying to set display:none to a division that comes from a widget taken from weather widgets of freemeteo.com. They dynamically input on my website a .css stylesheet. Take a look at the footer of my website: http://thinkpreview.com <- i want to hide the fpart div – jeejee Apr 19 '14 at 16:47
  • While I work on a possible solution, I want you to look closer too. If you try to look at bottom of answer that I'm updating, you will see the iframe. You can hide the entire iframe but selecting something inside and then hiding that one part looks tricky. – Priya Ranjan Singh Apr 19 '14 at 16:59
  • I see. thanks a lot for working on this for me, I really appreciate it! There must be a way, but css inspector dont help too much at this. Really, is there any better tool to give more accurate answers about css paths i could use? – jeejee Apr 19 '14 at 17:03
  • You are selecting the right thing but somehow this seems to be a limitation of css (not entirely sure but making educated guess) to pick up something inside iframe and then change its style. However I'm beginning to see ways to do this using javascript. – Priya Ranjan Singh Apr 19 '14 at 17:05
  • There doesn't seem to be a way to solve this today. In fact this is not a problem. The limitation here - Cross origin request block is made industry standard. If you try doing a $('iframe').last().contents() you'll see you cant get to a point where you control whats inside iframe. And you should not be doing that. You hit such dead ends when trying a wrong approach, maybe something else is the solution. – Priya Ranjan Singh Apr 19 '14 at 17:53
0

Hey if it is right class but it doesnt work try adding !important in the end.

Example

.fpart {
width:900px !important;
}
Krsto Jevtic
  • 1,218
  • 1
  • 10
  • 8
  • I did, in case that its used from another css stylesheet too. But no luck in this also. – jeejee Apr 19 '14 at 16:34
  • Can you send me the link to the website? Did you also check that there is not same class below that? Because then it would overwrite it. – Krsto Jevtic Apr 19 '14 at 17:24
0

Chances are the #footer IS inside the body so that should work still if the path is right. 

.fpart{
   width: 900px;
}

Should work. If you're overridding a stylesheet you don't have access to, you can add these style directly inside the <head> of your html like

<style type="text/css">
  .fpart{
     width: 900px;
  }
</style>

Just add that right before the </head> tag. If all else fail, add !important after 900px to force it to take that value.

user3047675
  • 82
  • 8