WordPress.org

1. DesignLoud
   Member
   Posted 2 months ago #
   

   Hi all, I am working on a re-design of a website and had this cool feature worked out in photoshop and trying to see if there is a way to apply this to any images that are uploaded through the page/post editor. Im sure there is a way and I am just not wrapping my head around it but I currently have these images on the site hard coded in the template with a couple of divs and classes to display the corner effect applied to the images. I thought there would be a way to add it to the selectors using a background image and just use :before and :after but I could not get that working either. Is there a way to accomplish this effect either in CSS or through php to insert a div and class to that div before and after an image that is uploaded by the admin?

   The effect (hard-coded version) and test link can be found by clicking here I am sure there is a way as I have seen this on other sites, like I said I just cant wrap my head around how to do it.. :(

   Thanks for the help

2. DesignLoud
   Member
   Posted 2 months ago #
   

   so I am able to do this with the pseudo class like this:
   

   .post_content p a:before {
       content: url("http://my-domain.com/wp-content/themes/my-theme/images/top-right.png") ;
       position: absolute;
       right: 25px;
       top: 26px;
   }

   But how can I add a class to the anchor tag surrounding each image uploaded and inserted into post by the admin?

3. DesignLoud
   Member
   Posted 2 months ago #
   

   Got it... Thanks

   Found solution here (JQuery solution since I already use lightbox and sass js) http://www.island94.org/2011/01/adding-class-to-wordpress-linked-images/

4. DesignLoud
   Member
   Posted 2 months ago #
   

   So I thought I had this fixed 100% but it seems to be broken on Firefox, looks great in Chrome.. Is there something I am doing/not doing with my CSS to achieve this? If you look at this link then you will see what I mean.. Not sure why it breaks in FF, havent even checked safari or IE

5. Andrew Nevins
   Volunteer Moderator
   Posted 2 months ago #
   

   Resolve some validation errors before you expect to see a cross-browser-compatible website. Only after then should you be looking at why the CSS is causing it.

6. DesignLoud
   Member
   Posted 2 months ago #
   

   Hey Andrew, thanks for the feedback.. The validator is usually the last step I take to close up any loose ends. So your telling me that you think those errors could be what is causing the break in FF because I dont see how that would effect one browser and not all. I could be wrong but I wanted your opinion if you think I should address that now and see if I get a fix or just wait until the site is done and get it verified with W3c?

   Thanks

7. DesignLoud
   Member
   Posted 2 months ago #
   

   Just wanted to put this out there, fixed the errors and the problem still persists..

Reply

You must log in to post.