How to change tagline image on EVER AFTER theme?

  • Unknown's avatar
    larosiebelle · Member ·

    The image is displaying bright blue and I wish it to display a different color? I’m uncertain if it is an image embedded in the CSS code? If so, is there a way to delete it and apply a different color banner?

    ANY AND ALL HELP IS APPRECIATED!

    The blog I need help with is: (visible only to logged in users)

  • ehtis · Staff ·

    Yes, it’s a combination of three PNG images in the default theme. Edges on both sides and one strip in the middle.

    This code will delete the images and will add a background color that you can change according to your liking. Mobile screen size addressed as well:

    #description-left {
  background: none;
}

#description-right {
  background: none;
}

#description-middle {
  background: #e3cae3;
}

/* It was resorting to old background on mobile screens, so removed from here as well */

@media not all, not all, only screen and (-webkit-min-device-pixel-ratio: 1.5), not all
#description-left {
  background-image: none;
}

@media not all, not all, only screen and (-webkit-min-device-pixel-ratio: 1.5), not all
#description-right {
  background-image: none;
}

@media not all, not all, only screen and (-webkit-min-device-pixel-ratio: 1.5), not all
#description-middle {
  background-image: none;
  background: #e3cae3;
}

    Change the value of background: #e3cae3 according to your liking.

  • ehtis · Staff ·

    Could have achieved it via !important to override the changes in mobile-size screens. Overlooked that, I’m being too lazy I guess!

    This code is also valid:

    #description-left {
  background: none !important;
}

#description-right {
  background: none !important;
}

#description-middle {
  background: #e3cae3 !important;
}
  • Unknown's avatar
    larosiebelle · Member ·

    is there a way to replace the images to make my own colored banner? And, how do I find the code from the original theme?

  • ehtis · Staff ·

    Background images can be replaced yes.

    Your blog currently don’t have any tagline set so we can’t directly work on it, I tested this on my test blog with the default Ever After theme.

    Set your blog’s tagline from Customizer.

    Then to apply the code I posted earlier, go to CSS in Customizer and copy/paste the code.

  • Unknown's avatar
    larosiebelle · Member ·

    I added the tagline back to it. I have entered the code but it made it just one straight line as opposed to the banner style image it was before. Is there a way to override the image of the blue banner in the default theme with an image of my own?

  • ehtis · Staff ·

    Yes it’s possible.

    You’ll have to make a banner image of appropriate dimensions, preferably upload it to your media library and post a link here.

  • Unknown's avatar
    larosiebelle · Member ·

    do you know what the dimensions are for the default??? I haven’t quite found the image code in the default theme, yet.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, you can take a look at the three images and use those as a guide. You may wan to check your image editing program and see if it has the ability to change colors. Adobe Fireworks and Photoshop do I know, so if your does, you can actually select and change the color of the ribbon.

    Left image
    Center image
    Right image

  • Unknown's avatar
    larosiebelle · Member ·

    Thank you both so much for your help!!! I’ll get back to you both with the updated images for further help! You are both phenomenal!

  • Unknown's avatar
    thesacredpath · Member ·

    Here would be the CSS you would need. Just replace URL_OF_IMAGE between the quotes with the new images you upload to your media library. 

    #description-left {
    background: transparent url("URL_OF_IMAGE") no-repeat scroll 0 0 / 56px auto;
}
#description-middle {
    background: transparent url("URL_OF_IMAGE") no-repeat scroll 50% 0 / auto 44px;
}
#description-right {
    background: transparent url("URL_OF_IMAGE") no-repeat scroll 100% 0 / 56px auto;
}
  • Unknown's avatar
    larosiebelle · Member ·

    THANK YOU!!!!!
    I have one further question (I think)… is there a way to keep the background image from scrolling?

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome, and it looks good in your chosen color. To keep the background from scrolling, add the following CSS. 

    body.custom-background {
    background-attachment: fixed;
}
  • Unknown's avatar
    larosiebelle · Member ·

    Thank you so very much! You are wonderful! The help is abundantly appreciated.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome and thank you. :)

  • ehtis · Staff ·

    Apologies, had to leave after pulling an all-nighter! But glad our very own expert took over. ;)

  • Unknown's avatar
    thesacredpath · Member ·

    @ehtis, many thanks for all your help in the forums. Glad to have you here. :)

  • Unknown's avatar
    larosiebelle · Member ·

    I thank you both so very much! You were wonderful!
    If I could beg your help for one more thing while you are here that would be wonderful… Is there a way to attach a permanent image/signature to the bottom of each post without having to add it to each post separately?

  • ehtis · Staff ·

    No problem!

    Here’s one way. I’m using your tagline’s background image for this example, the signature would appear below the post’s Share/Like buttons:

    .`entry-content {
    background: url(https://belleslittlestory.files.wordpress.com/2015/07/ribbon-middle.png) no-repeat center bottom;
    padding-bottom: 80px
    }`

    Change the padding-bottom value to fit a bigger image, and you can change center to left or right depending on where you want it to appear.

    Personally don’t think it’s possible to make it appear above the Like/Sharing buttons, you’ll have to adjust the image’s horizontal position depending on content length for each post, one code won’t serve all posts.

  • ehtis · Staff ·

    My bad, messed up the code tags. Here it is:

    .entry-content {
	background: url(https://belleslittlestory.files.wordpress.com/2015/07/ribbon-middle.png) no-repeat center bottom;
	padding-bottom: 80px
}
1 2
  • The topic ‘How to change tagline image on EVER AFTER theme?’ is closed to new replies.