[Resolved] changing the header color and font

[Author]

Posts

[NikoH9364]

I am trying to: change the header color and font of my site to black background with gold text. I am also having trouble changing the font.

I created a div tag however I can not seem to upload the font family correctly

site url: hidden link

Thank you!

[Beda]

It seems to me, that header comes from your Theme.

To edit Theme CSS you can either use (if avaiable) Theme Options or edit the Theme's CSS Files directly.

Usually Font Color is adressed with "color: red" (example)
A whole new Font is added to your theme, and then used either in specifc places or all over the theme.

However, this are not Toolset Relevant issues.

Only Layouts Plugin can let you edit a Header, and for that, your Theme needs to be integrated with Layouts, or you need to use a Layouts Integrated Theme.
https://toolset.com/documentation/user-guides/layouts-theme-integration/
https://toolset.com/documentation/user-guides/# > Integration With Themes And Plugins Guides

Even then, a Font needs to be provided by your Theme.
To create a Custom Theme, or a Child Theme, please refer to the WordPress DOC and Support Forum:
https://wordpress.org/themes/
https://codex.wordpress.org/Theme_Development
https://wordpress.org/support/

[NikoH9364]

I am using the classifieds theme and I do not see an option to edit the header color so I am assuming this has to be done with some custom CSS.

I do not want to create a custom theme... I want to use classifieds theme and edit the header.

I feel like there is a simple way to do this... Can you take a look at my custom CSS logs and tell me what I am missing please?

/*Layouts css goes here*/

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
.cred-form {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
}
body
{
background: #EEE8AA; 
}
#erpohometext



 /*******************************************
 * 		My Messages
 ********************************************/
.messages-list {
  padding: 0;
  list-style-type: none;
  margin: 30px 0;
}
.messages-list li {
  padding: 15px 30px;
  border-bottom: 1px solid #ececec;
}
.messages-list .cred-delete {
  float: right;
}
/*******************************************
 * 		Single message
 ********************************************/
.message-date,
.message-from,
.message-listing {
  margin: 0;
}
.message-date .glyphicon,
.message-from .glyphicon,
.message-listing .glyphicon {
  margin-right: 5px;
}
.message-date a,
.message-from a,
.message-listing a {
  text-decoration: underline;
}
.message-entry {
  margin-top: 30px;
  margin-bottom: 30px;
}

/*******************************************
 * 		Ad packages
 ********************************************/
.ad-packages-options {
	margin-bottom: $margin-base;
	text-align: right;
}
.ad-packages-options  input[type="submit"] {
	line-height: 28px;
}


/*******************************************
* Featured ads
********************************************/
.list-element.featured,
.product-list-table tr.featured td{
	background: rgba(255, 255, 0, 0.2);
}


/****************************
	Footer styling
**************************/
.footer-credits-products-logo,
.footer-credits-text
 {
  display: inline-block;
  vertical-align: bottom;
}
.footer-credits-products-logo {
  margin-left:-15px;
  width: 120px;
}
@media (min-width: 768px){
  .footer-credits-products-logo {
    margin-bottom:-5px;
  }
  .footer-credits-text {
    width: -webkit-calc(100% - 120px);
    width: calc(100% - 120px);
  }
  .footer-credits-text p:last-child {
    margin-bottom: 0;
  }
}
.footer-credits-otgs {
  margin-top: 30px;
   text-align: right;
}

[NikoH9364]

Hi Beda,

Any update?

Thanks

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Beda is on holiday. This is Minesh here to help you further and I'll take care of this ticket. Hope this is OK.

Basically - to change color of header, you need to target the CSS class for header elements and change to color. To do that you need CSS knowledge as well as editing and customizing themes.

You may refer to the following links that may help you:
=> https://wordpress.org/support/topic/how-can-i-change-header-color-css-supplied
=> hidden link
=> http://stackoverflow.com/questions/17606963/css-header-background-color-wont-work

This is all I have to offer you and if you still need further help. Please feel free to contact our certified partners.
=> https://toolset.com/consultant/