Need help? Check out our Support site, then


CSS change is overwritten by a local style in HTML that i need to change.. help!

  1. Hi - I am currently editing the CSS for my blog template but am noticing in the page source that a particular CSS style is overwritten by a local style directly in the HTML . I need to change this because it is throwing off my layout. the code is this:

    <div id="content" class="narrowcolumn" style="margin:0px; ">

    the 'style="margin:0px;' needs to be removed. can you please help me with this?

    http://peekabublog.wordpress.com/?csspreview=true
    (click on one the the blog topics on the right to see the problem.)

    thanks!

    The blog I need help with is peekabublog.wordpress.com.

  2. Go to "narrowcolumn" in the CSS and change it to what you want. The div is pulling from that selector in the CSS.

  3. I looked at your sourcecode, and find nowhere that this occurs:

    <div id="content" class="narrowcolumn" style="margin:0px; ">

  4. from the home page of my blog, click on one of the blogs on the right hand side, for example 'Miss California’s Political (and Pubic) Phooey!' . On the page that comes up, you will see that the window on the right side is too far up and right. look at the source code of this page and you will see on line 156: <div id="content" class="narrowcolumn" style="margin:0px; ">. I have in fact changed 'narrowcolumn' and it has worked for the homepage, but on this subpage, because 'narrowcolumn' is overwritten by a local style style="margin:0px;' it doesn't apply the margin settings i make to 'narrowcolumn'.

  5. In element.style in your CSS set margin-right to 15px and margin-top to 30px.

  6. In general settings did you enter in a blog title and description??
    When I tested this out on my blog it seems the main reason is because you don't have a header title. I recommend going to general settings and entering something in the blog title and description fields and then replace the following CSS classes and make adjustments from there,

    #header a {
    font-size:2em;
    color:transparent;
    margin-left:220px;
    }
    #blog_description {
    font-size:1.2em;
    color:transparent;
    margin-left:220px;
    }

    HTH

  7. My opinion (and it and a couple buck will get you a bus ride across town) is that the position of the content section on the single post page should not rely on whether you have a title defined in settings > general or not. My view is that is a shortcoming in the CSS.

  8. I agree too, but I changed the CSS and once everything was right on the post page, if went wrong on the front page of the blog. Theres actually a lot of things wrong in the CSS it has a lot to do with the header including the fact that its in the page class instead of the header class. This is just the quickest fix to stop the column from overlapping on the header. I was actually going to recommend starting over or designing a new theme that already allows space for the header you want to use.

  9. I tried searching in the CSS for element.style or just element and the search found no results. thesacredpath, where did you see this? so is there no way to fix this unless i remove my header image and just put text in the header and blog description fields?

  10. Hmmm, it shows up with firebug, but it isn't actually in the CSS. Interesting.

    Add the following to your CSS

    element.style {
    margin-right:15px;
    margin-top:30px;
    }

    And see if that does not fix it for you.

  11. Hi - I tried adding that style to the CSS and it didnt seem to help.. where do we go from here? It seems odd that the local style 'style="margin:0px;' simply cant be deleted.. is this a possibility?

  12. Did you try doing what aw1923 suggested?

  13. that would mean me losing my header logo graphic , right? :(

  14. No. The header text will overlay the graphic, but I believe where she has color:transparent; that takes care of the issue and the text will not be visible over the header.

  15. I tried changing 'header a' as well as a few styles associated with 'h1' to color:transparent, and I also added the 'blog_description' style to the CSS because it was not previously in there. unfortunately you can still see the header and blog description

    #header a {
    font-size:2em;
    color:transparent;
    margin-left:220px;
    }
    #blog_description {
    font-size:1.2em;
    color:transparent;
    margin-left:220px;
    }

  16. I've also looked through all of the CSS to find any style with that blue color that the header is showing up in and I am not finding any style referencing that color.. its as if there are styles I cannot access through this one CSS file

  17. I can't even see the header text or description in FireFox.
    The only time you can see the header and description is if you move your cursor over the text and highlight it.

  18. weird.. I'm in Firefox and can see them both

  19. Well, I'd recommend playing around with it or design using a theme thats more workable with a header especially since the "White as Milk" theme doesn't originally allow for a custom header image.

  20. fixed it! I removed all side margin settings from both 'sidebar' and 'content' and instead applied it to 'page'.. whew!

  21. LOL, Great!

Topic Closed

This topic has been closed to new replies.

About this Topic