Add JPG as Border in Topbar

Support
#1

I would like to add a JPG where the topbar is. I’m using the Renew Stack. How can I do this? Basically I want it to look like my site has a colorful border at the top. Any help would be great. Thanks!

#2

Hello @pearlmultimedia,

Thanks for asking. :slight_smile:

You can use CSS border-image property. To learn more, please refer following articles:


https://www.w3schools.com/cssref/css3_pr_border-image.asp

Thanks.

#3

Thanks. But which code should I use to specify an image for the top border of the entire site? Basically I need to insert a JPG (I think) into the Topbar…

#4

Hey @pearlmultimedia,

You will need to apply the CSS to x-topbar class like this.

.x-topbar {
    background-color: transparent;
    background-image: url(http://icons.iconarchive.com/icons/icons8/windows-8/16/Gaming-Diamonds-icon.png);
    background-repeat: repeat-x;
    padding-top: 15px;
    padding-bottom: 10px;
}

As you can see, this requires coding in X while you can build this in Pro without coding. You might want to try Pro.

The given CSS serves only as a guide. Issues that might arise from the use of it and further enhancements would be outside the scope of our support.

Thanks.

#5

Thanks, Christian! From what I read in reviews, I thought that Pro was better for developers who really know coding, while X is better for those of us who don’t.

#6

You’re welcome.

#7

I just tried that topbar CSS and it’s not working. I used the exact CSS Christian gave me. Any suggestions? I cleared the cache and tried a few times, but the border isn’t appearing at the top.

Also, is Pro better for people who do know coding?

#8

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#10

Hello,

In that case you will need to provide us your login credentials as well in a secure note :slight_smile:

Thank you!

#11

Ok. I’ll do that when the site is a bit farther along. Then I can ask about a few different things at once. Thanks!

#12

Great! Please let us know how it goes then.
If you need anything else we can help you with, don’t hesitate to open another thread.

1 Like
#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.