kaniamea

I figured it out. thanks.

You are very welcome ??

Well, it is best to modify it the way you need to. That’s just an example.

@arbazkazi, I looked into this and it seems the button they use is similar to the code I am posting below. Modify it the way you want it and hopefully it will work for you. Once again good luck!

<style>
.ribbon strong {
	font-size: 27px;
	font-weight: 900;
	display: block;
}
.ribbon {
	margin-bottom: -7px;
	background: #cd2122;
}
.topbutton {
	clear: right;
	float: right;
	position: relative;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	padding: 10px 10px 15px;
	border-radius: 2px;
	margin-top: 8px;
	margin-left: 20px;
	font-size: 21px;
	width:200px;
}
.ribbon .trisvg path {
	fill: #cd2122;
}
.ribbon .trisvg {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 25px;
}
svg:not(:root) {
 overflow: hidden;
}
.ribbon:hover, .ribbon:focus {
	background: #f5dc26;
	color: #000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.ribbon:hover .trisvg path {
	fill: #f5dc26;
}
.ribbon:focus .trisvg path {
	fill: #f5dc26;
}
</style>
<a href="#" target="_self" title="GET FREE QUOTE" class="topbutton ribbon" id="topbutton"><strong>GET</strong>QUOTE
<svg version="1.1" class="trisvg" xmlns="https://www.w3.org/2000/svg" xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 14.017 5.006" enable-background="new 0 0 14.017 5.006" xml:space="preserve">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.016,0L7.008,5.006L0,0H14.016z"></path>
</svg>
</a>

Try this

a.thumbnail:hover, a.pretty:hover  {
    opacity: 0.1 !important;
}

Without seeing the website we cant help much.

I think this button requires some custom coding. You can inspect their code with Inspect Element and see what classes and how they are doing it. Good luck!

@arbazkazi, I dont have experience with this particular theme so the best thing to do is to ask the Pivot theme developers. You can check their tutorials too.

If you would like to change the color of the top section so it also becomes blue just like the banner under it you can use:

.top-bar {
    background: #4a88bf;

}

#4a88bf; is the color of your banner.Of course then you will need to adjust the font colors which you can do in your Divi – Theme customize (that’s if you are using the Divi theme as it looks like). From there you can also set up colors, font sizes, etc. Fore more info check Divi’s tutorial page on their site. You can also do it via CSS but Divi has made it really easy to do it through their system too. Hope this helps!

@arbazkazi, you can post your questions here.

I always use the Inspect Element in Firefox to located classes. It also works with Chrome and Safari. You can Google it and you will see it is easy to use it.

Hi arbazkazi, Your site looks fine to me but if you would like to reduce some spacing you can use this

section {
    padding-top: 20px;
    padding-bottom: 20px;
}

It will reduce the spacing between the different sections of your site.

You dont need to know HTML. You can simply install any CSS plugin, for example Simple Custom CSS and then just add this code there.

Add this in your css and the text will be black:

p {
    color: #000;
}

You can reduce the spacing on the top by adding this in your css:

.site-main {
    padding: 0;
}

Regarding the spacing on the left you can try something like:

.site-content {
    margin-left: 23.4118%;
}

If you want to remove the spacing on the right you will need to adjust the content area width.