Benjamin
asked 10 years ago

I’m wanting to change the colour of the button from blue to black. Could you please help me?
http://www.zeezbeez.com

1 Answers
DominicStaff
answered 10 years ago

To change color for the Email US button on the home page, below is our instruction:
Firstly, follow the jetpack’s guideline in the Blog article on how to use Edit CSS here. http://cmspioneer.com/designwall/blog/using-jetpack-custom-css-for-your-wordpress-site/
Then add the code to the Edit Css.

.btn-primary {
    border-top-color: #5bb5fd !important;
    border-bottom-color: #00508d !important;
    border-left-color: transparent !important;
    border-right:  transparent !important;
    background: #399cee !important;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM5OWNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDYwYTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)!important;
    background: -moz-linear-gradient(top,  #399cee 0%, #0060a7 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#399cee), color-stop(100%,#0060a7)) !important;
    background: -webkit-linear-gradient(top,  #399cee 0%,#0060a7 100%)!important;
    background: -o-linear-gradient(top,  #399cee 0%,#0060a7 100%)!important;
    background: -ms-linear-gradient(top,  #399cee 0%,#0060a7 100%)!important;
    background: linear-gradient(to bottom,  #399cee 0%,#0060a7 100%)!important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#399cee', endColorstr='#0060a7',GradientType=0 )!important;
}

.btn-primary:hover {
    background: #3a9cee !important;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhOWNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDc4ZDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) !important;
    background: -moz-linear-gradient(top,  #3a9cee 0%, #0078d1 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a9cee), color-stop(100%,#0078d1)) !important;
    background: -webkit-linear-gradient(top,  #3a9cee 0%,#0078d1 100%) !important;
    background: -o-linear-gradient(top,  #3a9cee 0%,#0078d1 100%) !important;
    background: -ms-linear-gradient(top,  #3a9cee 0%,#0078d1 100%) !important;
    background: linear-gradient(to bottom,  #3a9cee 0%,#0078d1 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a9cee', endColorstr='#0078d1',GradientType=0 ) !important;
}

Note: you need to change your color in the code.

Gloriana Chacon
replied 10 years ago

How did put a bigger logo?
I like the way it hangs over the pages.

Dominic Staff
replied 10 years ago

To change size for the logo, you can add the following code:
.navbar .site-title { width: ..px; height: 100px; }

Benjamin Hodge
replied 10 years ago

Thankyou for your reply Dominic,

Dominic Staff
replied 10 years ago

You can tell me detail about the position that you want to change, please send me a screenshot for further checking.

Powered by DW Question & Answer Pro