CSS editor big mess

  • Author
    Posts
  • #16212

    lulu13
    Member
    Original poster

    I know barely anything about CSS so I asked a friend of mine to help me. What I wanted was a shadow around my pictures. Putting a shadow around individual pictures in my posts was fine, but when he tried to put a shadow around the small tile picture (grid view) on the main page, the problems started. Now, instead of turning black on hoover, the pictures turn white, but only the pictures published since he made the change, so my “old” posts still turn black. Also, the number of comments and “Edit” appear outside of the picture instead of inside (which is not a problem at all since I am the only one seeing it, but I’m just describing the extent of the problem).

    Would someone be able to tell me what went wrong? My friend is looking in CSS/Wordpress forums for an answer but can’t seem to find anything. It’s not super annoying so it’s not urgent, but I just liked the blackened pictures and the consistency (I had to change my link color so that the titles of my posts would appear on both black and white backgrounds).

    The blog I need help with is: cestpasmoijeljure.wordpress.com

    #16315

    maharzan
    Theme Author

    Hi lulu13,

    I couldn’t find anything as such. I see you have background applied to article class which will apply to everything that is an article. If you are looking to put that in list view, please try

    .list article { background: #f00; }

    I would suggest you to revert the changes your friend did (since the problem started) and reapply the css again. I see the comment is flying above the picture in the grid view as well.

    Thanks,
    Chandra

    #16327

    lulu13
    Member
    Original poster

    Hi Chandra,

    What do you mean you couldn’t find anything as such? Do you mean in the CSS code or when you hover on the tile pictures on the main page? Do you see the pictures become black except the two first ones? I’m talking only in grid view.

    I don’t know where the problem is so I wouldn’t know what part of the CSS code I need to remove. I wish I had time to learn more than the very basics about CSS…

    #16328

    maharzan
    Theme Author

    I mean I couldn’t find any solution to figure why its happening. I can see the first 2 images are white on hover. Whatever changes you did, you can remove that and reapply.

    Or, can you post whatever css you have in your custom CSS ? I will apply that and see which one is creating this problem. Thanks.

    #16329

    lulu13
    Member
    Original poster

    OK, here is all my custom CSS code:

    .home .grid .portfolio .entry-content .entry-title a {
    color:#D9ABAB;
    }

    h1.page-title,h1.entry-title {
    border-bottom:dotted;
    border-bottom-color:#E8A8A6;
    }

    .has-header-image .menu-top-menu a {
    color:#fff;
    }

    .has-header-image .menu-top-menu a:hover {
    color:#000;
    }

    h3.widget-title {
    margin-bottom:.8em;
    margin-top:.8em;
    }

    .portfolio .entry-content {
    overflow:inherit;
    }

    .grid a.thumb {
    display:block;
    overflow:inherit;
    }

    article .entry-content a.thumb img,article .entry-content img {
    -moz-box-shadow:2px 0 5px 2px #777777;
    -webkit-box-shadow:2px 0 5px 2px #777777;
    box-shadow:2px 0 5px 2px #777777;
    }

    article {
    background:none repeat scroll 0 0 #FCF9FB;
    }

    #16347

    maharzan
    Theme Author

    Hi lulu13,

    Can you remove this part and see?

    .grid a.thumb {
        display:block;
        overflow:inherit;
    }

    It seems to work on mine.

    Thanks,
    Chandra

    #16349

    lulu13
    Member
    Original poster

    Hi Chandra,

    Yep, this is the guilty code! But it also removes the shadows around the pictures. Is there another way to get this shadow, or maybe simply a little frame around them without creating other issues? I’m being picky I know, sorry…

    #16350

    maharzan
    Theme Author

    I added a class in this block

    .grid article, article .entry-content a.thumb img, article .entry-content img {
    	-moz-box-shadow:2px 0 5px 2px #777777;
    	-webkit-box-shadow:2px 0 5px 2px #777777;
    	box-shadow:2px 0 5px 2px #777777;
    }

    seems to work. :)

    Let me know how that goes.

    Thanks,
    Chandra

    #16351

    lulu13
    Member
    Original poster

    Ahhhhhhh this is BEAUTIFUL :D Thank you thank you, you are amazing, you totally made my day :)

    #16361

    maharzan
    Theme Author

    You are most welcome!. ;-) Cheers!!

The topic ‘CSS editor big mess’ is closed to new replies.