WordPress.org

Ready to get started?Download WordPress

Forums

Pink Touch 2
Changing date banner color in Pink Touch 2 (20 posts)

  1. bluebesos
    Member
    Posted 1 year ago #

    Hey there!
    I'm totally new to WP and CSS. Love Pink Touch 2 but would like to change some things. I'd like to start by changing the pink date banners to blue and have no idea how to start. Advice gratefully appreciated!

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    Look inside the images folder you will see the image file named sprite.png change the pink as you wish, using photoshop or any other image editing application.

    Also, you will have to change link's color too, to keep the overall design look great.

  3. bluebesos
    Member
    Posted 1 year ago #

    Thanks so much for answering! However I'm not sure what images folder you're talking about. Am I in the right place? After choosing Appearance>Editor I see Image Attachment Template in blue on the right, but no Images folder.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have access to your website's files and folders?

  5. bluebesos
    Member
    Posted 1 year ago #

    I have access to the dashboard.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Ask your hosting company for your FTP credentials.

  7. bluebesos
    Member
    Posted 1 year ago #

    I have my FTP password/user name if that's what you mean by credentials? I thought I managed everything within my WordPress dashboard...

  8. bluebesos
    Member
    Posted 1 year ago #

    ok, have gotten into my image file, found the sprite.png...

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Use some FTP software like FileZilla to access your website's directories. Then look inside the folder, /wp-content/themes/pink-touch-2/images and grab the image you need. After modifying it, upload it to that directory and overwrite the current file.

  10. bluebesos
    Member
    Posted 1 year ago #

    Do I need FileZilla if I'm in my FTP File Manager?

    Also, in my images folder I only see admin-bar-sprite.png and admin-bar-sprite-2x.png, but I do not see a place to change the pink as paulwp suggested above.

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    No, as long as you can access the files, it doesn't matter.

    Can you provide a link to your website? Paulwp probably looked at the demo website's images folder and assumed you would have the same.

  12. bluebesos
    Member
    Posted 1 year ago #

    http://bluebesos.com/

    thank you so!!

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

  14. bluebesos
    Member
    Posted 1 year ago #

    I can't click through on that link. Have also tried pasting it.

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you access the /wp-content/themes/pink-touch-2/images/ folder in your FTP File Manager ?

  16. bluebesos
    Member
    Posted 1 year ago #

    Yes! I'm there, I see the sprite.png. Also a sprite-rtl.png. Don't see anything to do with pink, but it does give me the option to upload the file, along with other options.

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    Look at the bottom of the sprite.png image, you need to change the colour of that pink-ish rectangle at the very bottom. Then reupload that whole image again.

    Paulwp also stated you'll need to also change the colour of that link through CSS. Try this CSS;

    .hentry .date p {
     background: yourBackgroundColour;
     /* Originally coloured #EB374B; */
    }

    but it does give me the option to upload the file

    I suggest using FileZilla if your File Manager doesn't give you that option.

  18. bluebesos
    Member
    Posted 1 year ago #

    Ok, thanks very much for all your help. In the GoDaddy FTP file manager I had to click "filmstrip" to be able to see the image properly. Thanks again!

  19. rhiannonbaxter
    Member
    Posted 9 months ago #

    There are three simple steps to changing the date banner in Pink Touch 2.

    1. Download the sprite.png and sprite-rtl.png file found in the pink-touch-2/imgages directory.

    2. Modify the banner image at the bottom of these two files using an application like photoshop. You will need to maintain the two tones on this image (a brighter top with the darker flag to maintain the 2d effect) Be sure to note the color code # that you used on the brighter section of the image because you will have to update the style.css file with this same color.

    3. Download the style.css file. Modify the background color # for the date banner found on line 501. (.hentry .date p {background: #eb374b;)

  20. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Download the style.css file. Modify the background color # for the date banner found on line 501. (.hentry .date p {background: #eb374b;)

    Modifying theme files is NOT a good way to make changes - as the changes will be lost when the theme is updated. Any changes should be made in a child theme or custom CSS.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic