Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Please include more information than that, tell us more about your environment and what exactly you tried.
http://codex.wordpress.org/Forum_Welcome#Include_as_much_information_as_possible
Sorry here’s the website.
http://svgur.ipower.com/
I tried to add a font size to #site-title but it didn’t change the size. I also tried to change the background color of the header which is white to transparent but that’s didn’t work either.
#site-title {font-size: 16px;}
#hgroup-wrap {background-color:transparent;}
I use the “Easy Google Fonts” plugin. you can modify everything with that plugin. it works very good.
I don’t think I need to install a plugin just to change the font color and background in the header.
Because your site title has a link on it you need to remove or change the font size for the html a tag as below
#site-title a {
color: #000;
font-size: 16px; /* Or remove */
text-decoration: none;
}
I also notice that you have multiple instances of font size for #site-title
#site-title {
font-size: 5rem;
}
#site-title {
font-size: 26px;
font-weight: bold;
line-height: 1.4;
text-shadow: 1px 1px #e6e6e6;
}
#site-title {
font-size: 30px;
}
Delete these and use the following instead
#site-title {
font-size: 16px;
font-weight: bold;
line-height: 1.4;
text-shadow: 1px 1px #e6e6e6;
}
As for the background colour, change that to the actual colour that you require. eg background-color: #FFF
I noticed the multiple instances. They were like that in the theme. It’s cluttered with them.
What do you mean by changing the background to #FFF? That was the original color. I want the background of only the header to be transparent.
You can add these items to your “Edit CSS” in “Appearance” if you have jetpack installed and not modify the header.php
If you update WP you will lose your modifications if you work directly in some of the php files.
Okay, that didn’t answer my question.
I don’t have issues editing CSS. I edit the style sheet directly because I have a back up. I don’t edit the php files.
I’m trying to change my background for the header to transparent but the issue is that the header is connected to the site/body color. I ONLY want to change the header color.
If the header is connected to the site body as you have stated, you simply can’t change only the header…
you’ve answered you’re own question.
There are ways to fix this. That’s why I’m here. I need help to make it happen.
How do I go about separating them so I can edit either one exclusively?
To fix it you probably need to re-code your header so it lives in it’s own div and so it’s not included in the content container.
Yeah, I knew that part. So, how do I go about doing that.
This is the structure of the website:
.site {
width: 990px;
margin: 30px auto;
}
#header-left {
float: left;
max-width: 100%;
}
#primary {
clear: both;
float: left;
width: 570px;
}
#header-right {
float: right;
max-width: 300px;
}
#secondary {
float: right;
width: 300px;
background-color: #D2B48C;
}
/* =Margins and Paddings
———————————————– */
.page-links,
.widget,
blockquote,
.site-content article,
.site-content .site-navigation,
#infinite-handle,
.comments-title, #reply-title,
#respond {
margin-bottom: 40px;
}
#homepage-message {
margin-top: 40px;
}
article.sticky .featured-post,
.page-header,
p,
.featured-image,
.entry-content table,
.comment-content table,
.widget.widget_catcheverest_social_widget,
#content .searchform {
margin-bottom: 30px;
}
#header-right .widget,
.entry-header,
article.format-aside .entry-title,
.comments-area article header {
margin-bottom: 20px;
}
.page .entry-header,
.widget-title,
#header-right .widget.widget_catcheverest_social_widget {
margin-bottom: 10px;
}
#featured-post .entry-header {
margin-bottom: 0;
}
.container {
padding: 0 40px;
}
#site-logo,
#hgroup,
#header-right,
#supplementary,
#main {
padding-top: 20px;
}
#hgroup-wrap,
.hentry,
.comments-area article {
padding-bottom: 40px;
}
#site-generator .site-info {
padding: 30px 0;
}
.entry-header .entry-title {
padding-bottom: 10px;
}
.page .entry-header .entry-title,
.tag-post-formats .entry-header .entry-title{
padding-bottom: 0;
}
The #FFF was just an example. What colour do you actually want the header to be? Transparent is not a colour and as you have said will show the colour beneath it, which in this case appears to be #3a2109 for the .site class.
The easiest way to give your header the required colour is to set the background-color for the #hgroup-wrap. eg black, pink, #FFF, #000, etc.
I want the background to be transparent in the header as I stated.
I also stated that the background color was white initially.
