Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Select Background Color for Feature Image (SVG)

Home Forums Support [Resolved] Select Background Color for Feature Image (SVG)

Home Forums Support Select Background Color for Feature Image (SVG)

  • This topic has 10 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #545696
    Marcelo

    Hello Tom! I have a question, with your extense knowledge maybe you have a solution.
    I am create a site in Generatepress with the posibilty of agregate SVG image for the feature image (i think that is more fast and easy instead create image for each post) and i whant to select a background color for each post created for the feature image svg (post 1 – feature image with backgrond blue, post 2 – with feature image background red, etc).

    Do you know how can y do it or what is the function for it?
    Thank you!

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #545940
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Not too sure what you mean. Are you wanting to give all of your SVG images a default background color?

    I think you can use fill, but I don’t know a lot about SVGs: https://stackoverflow.com/questions/44198625/how-to-change-background-colour-in-an-svg-image

    #546392
    Marcelo

    Hello, i am not refer to the svg (that is only a mension), i am refering to Pick a Background Color for each feature image background post (the image selected to the post). For example, in your theme i can select a color for the header, the footer, etc. I want to do the same por each background of the feature image (in my case an svg or transparent image).

    #546914
    Tom
    Lead Developer
    Lead Developer

    You could use CSS to set the backgrounds. If you use Simple CSS (https://en-ca.wordpress.org/plugins/simple-css/), it adds a metabox to each page which you can add CSS to.

    Something like:

    .featured-image {
        background-color: red;
    }
    #546937
    Marcelo

    Thanks you Tom, but i am searching more for somethink like Color Pick Función of WordPress or somethink like that. You use this función for the selection of the colors,i want to use that función but Will be apply for each post. I have the perfect design for this website in my mind (and i will to Share it in your foro soon)
    😉

    #546942
    Marcelo

    PS. CSS on each post is like:

    2000 posts > 2000 CSS sheets

    #547518
    Tom
    Lead Developer
    Lead Developer

    Unfortunately there isn’t a built in color picker that can achieve that.

    Wouldn’t you need to use the color picker on each post anyways, if each post needs a different color?

    #547619
    Marcelo

    Yes that is the idea, use in each post the color picker, this can be asociate to a list of CSS colors prdefined, for example, red:#ff000; blue:#0000ff; like a class. Or, you know some way to put a class in a post? Then i can put this class “red” and include the class in my css style.

    #547952
    Tom
    Lead Developer
    Lead Developer

    You could use the custom fields metabox (core WP). If you don’t see it, click “Screen Options” at the top right of the screen, and check the Custom Fields option.

    Then add a new field, and give it a name: featured_image_background

    Then give it a class value: red

    Then add this function:

    add_filter( 'post_class', 'tu_add_post_class' );
    function tu_add_post_class( $classes ) {
        if ( is_single() && get_post_meta( get_the_ID(), 'featured_image_background', true ) ) {
            $classes[] = get_post_meta( get_the_ID(), 'featured_image_background', true );
        }
    
        return $classes;
    }
    #551124
    Marcelo

    Muchas gracias Tom, funciona muy bien!

    #551279
    Tom
    Lead Developer
    Lead Developer

    Awesome 🙂 Glad I could help!

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.