Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS Image overlay for Custom Taxonomy
Tagged: css, custom post types, custom taxonomy
- This topic has 4 replies, 2 voices, and was last updated 8 years, 8 months ago by aetherdesign.
-
AuthorPosts
-
December 29, 2015 at 10:04 pm #175145aetherdesignParticipant
Hello,
I am so close to creating exactly what I need for an equestrian website I am developing, but I could use a little coding help for the final step...
I have used the "Pods" plugin to create a custom post type for "Horses". Within this there is a custom taxonomy (category) for what status that horse currently holds : "for sale" "sold" "for lease" "leased". (This would be very similar to a real estate site with houses for sale or rent)
This way as the horse status changes, I can just change the post category.
Where I am stuck is that I would like to have a banner across the corner of the main photo for each horse that is associated with it's status (ex. a "SOLD" banner across a sold horse's photo that will show on its post and on the horse archive or 'listing' type page).
So first, I need help writing the CSS for each class that will create the banner overlay for the image. I have a PNG image to use, but am having some trouble figuring out the best way to write this.
Second I need to associate it with the appropriate status category so that it automatically puts the proper overlay on each horse post. I have created a custom field for each status where I can enter the image class for that status. Hopefully then I can just write a template that will call the class into the image output.
I hope this makes sense to someone who might be able to help me!! (I am even willing to hire someone to code this last part if I can get it done quickly and properly!)
Thank you!December 30, 2015 at 3:18 am #175157Brad DaltonParticipantDo you have any examples you can link to please?
I assume you want to overlay the sold banner over the entire featured image on single and archive pages?
December 30, 2015 at 10:59 am #175202aetherdesignParticipantSorry if this ends up duplicate posted... I just tried twice to submit responses that did not show up... I don't know why but I am assuming it was because I included links to screenshots that are on my google drive and it did not like the 'https' links?? What is the best way to share those screenshots?
I do want a 'sold' and 'leased' banner over the photo on the single page and the page where I will list all the horses (one page with 'for sale' followed by 'sold' and one page that has all 'for lease' and 'leased' horses listed -- I am still working on those pages).
The main photo is one that is uploaded through a custom field on the 'horse' post type, not the native wordpress 'featured photo' (I have those photos stretching out across the top of the page on other pages on the site and do not want that on the sale pages).
I am hoping to call the css class from the taxonomy for each status in the template when I show that main uploaded image.
Here are links to show what I want a final single page to look like for a 'sold' horse and the admin pages for entering horses and taxonomies.December 30, 2015 at 11:02 am #175203aetherdesignParticipantOkay, I took the site out of maintenance mode temporarily so you can at least see an example of a single page with the 'sold' banner over the photo.
December 30, 2015 at 12:00 pm #175212aetherdesignParticipantAs I am looking at archive pages and 'featured post' listings on my home page, I am thinking I may need to use the native 'featured image' after all, rather than having a separate uploaded one. Still trying to work through it all. Open to suggestions!
Thanks!January 3, 2016 at 8:34 am #175198aetherdesignParticipantHi, Thanks for replying. Yes, I want the banner over the image on the single page and on the page where I will list all the 'for sale' and 'sold' horses. (I am still working on putting this page together, as I want the for sale ones followed by the sold ones on one page so don't plan to use just the plain archive page).
The image is not native wordpress 'featured image' because I have it as an upload in a custom field; and other featured images on the site are stretched across the top of the page and I don't want that for these.
See these photos for an example of a single page for a sold horse and the custom post form where you enter the info and upload the file. I would only want a stamp to show on 'sold' horses and 'leased' horses, with nothing over the 'for sale' or 'for lease' ones. I am hoping to simply add the CSS class to the taxonomy category for each of these to have it then show automatically on horses with that status by having the single and archive templates call that 'css class' field when it displays that uploaded image.
I currently have the site on maintenance mode, but can turn it off if I know someone wants to take a look more closely.
Thanks!January 3, 2016 at 8:34 am #175200aetherdesignParticipantSorry if this ends up double posted... I just submitted a response that did not show up... I don't know why.
I do want a 'sold' and 'leased' banner over the corresponding photos on the single page and the page where I will list all the horses (one page with 'for sale' followed by 'sold' and one page that has all 'for lease' and 'leased' horses listed -- I am still working on those pages).
The main photo is one that is uploaded through a custom field on the 'horse' post type, not the native wordpress 'featured photo' (I have those photos stretching out across the top of the page on other pages on the site and do not want that on the sale pages).
I am hoping to call the css class from the taxonomy for each status in the template when I show that main uploaded image.
Here are links to show what I want a final single page to look like for a 'sold' horse and the admin pages for entering horses and taxonomies. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.