Some headers being a different font to the others? Please help :(

  • Unknown's avatar
    theonecoleman2014 · Member ·

    Some headers being a different font to the others.
    You can see ‘Awesome People’ text is different to ‘Featured Workout Music’

    Can I change these?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jsmutek · Member ·

    Howdy!

    This should get you sorted out – 

    /* Set middle right (Featured Workout Music) to use the same font & styles as the left column (Awesome people) */ 

.home-middle-right .featuredpost h2 a {
	font-family: "Oswald",arial,serif;
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 5px;
}

    This is targeting those elements very specifically and applying the same styles that are used on the other posts.

    Let me know if this helps you.

    :)

  • Unknown's avatar
    theonecoleman2014 · Member ·

    You are a boss at this.

    Had a browse over your website. I will look into creating a budget to pay for your help.

    Thanks man.

    Also, the text has changed but it’s in bold. I’ve saved it so it’s live and you can see. Thanks

  • Unknown's avatar
    jsmutek · Member ·

    Had a browse over your website…..

    Aww man, thank you. Flattered and humbled by that, but I volunteer my time here freely.

    I’m going to be settings up another account for WordPress.com, that links to my personal blog instead of my professional site. (feel free to have a look – http://smutek.ninja/ )

    At any rate, try adding this rule below the other – 

    /* Make sure font weight on both is set the same */

.featuredpost h2 a,
.homemiddleright .featuredpost h2 a {
	font-weight: 400;
}
  • Unknown's avatar
    jsmutek · Member ·

    Sorry, scratch that – it’s early here. I used the wrong selector on the second line – 

    /* Make sure font size for both columns are set the same */

.featuredpost h2 a,
.home-middle-right .featuredpost h2 a {
	font-weight: 400;
}
  • Unknown's avatar
    theonecoleman2014 · Member ·

    This worked awesome. Thanks dude.

    I am thinking that I need more tailored help to be fair. It would be rude to continue asking you without paying you for your service. I could really use the help of someone with your skills.

    I get it a little but it’s doing my head in and times isn’t my friend right now.

    Thanks again.

  • Unknown's avatar
    theonecoleman2014 · Member ·

    Dude, I think i’ve made a real mess of things.

    I think i’ve copied my CSS coding in numerous times for the same stuff and it’s cancelling out other bits.

    For example… Now my hover over function where the text turns to blue is only woking on some heading roll over, hovers things?

    Is there any chance you could look over my code and tell me what I’m doing wrong? 

    #header {
	background: url('//doyouevenlb.files.wordpress.com/2014/07/new-header.png') no-repeat scroll center center !important;
	height: 152px;
	padding: 0;
}

#header, #inner {
	border: 0;
}

#nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item a {
color: #5590CC;
background-color: #fff;
}

#nav {

clear: both;
color: #FFF;
margin: 4px auto;
overflow: hidden;
width: 960px;
border-right: 0px solid #FFF;
border-left: 0px solid #FFF;
background: #5590CC;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
    animation: 0s ease 0s normal none 1 cubic-bezier;
    border-color: #5590cc;
    color: #5590cc;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: none repeat scroll 0 0 #ffffff;
}

input, select, textarea, .breadcrumb, .sticky, .taxonomy-description {
	background-color: #F5F5F5;
	border: 1px dotted #DDD;
}

input {
	color: #333;
	font-family: "Droid Sans", sans-serif;
}

.sidebar {
	line-height: 20px;
	font-size: 20px;
}

.sidebar {
	font-size: 13px;
	line-height: 20px;
}

.widget-area h4 {
	font-size: 20px;
}

.featuredpost h2 a,
.home-middle-right .featuredpost h2 a {
	font-weight: 400;
}

.ui-tabs ul.ui-tabs-nav li a:hover, .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a {
	background-color: #5590cc;
	color: #ffffff;
}

.ui-tabs ul.ui-tabs-nav li a {
	background-color: #5590cc;
	margin: 0;
	padding: 10px 10px 8px;
	text-decoration: none;
	text-transform: uppercase;
	color: #eee;
}

.sidebar .widget ul li, .sidebar .widget-area ul li {
	list-style-type: none;
	word-wrap: break-word;
}

blockquote p {
	font-family: "Droid Sans", sans-serif;
	color: #EEE;
	font-style: normal;
}

blockquote {
	margin: 5px 15px 20px;
	padding: 15px 20px 0;
	background-color: #5590CC;
	color: #EEE;
}

#footer-widgets {
    background-color: #ffffff;
    border: medium none;
    font-size: 13px;
    line-height: 20px;
    margin-top: 5px;
    overflow: hidden;
}

#home-top, #home-top .border, #home-middle, #home-middle .border {
	border-bottom: solid 2px #eee;
}

#home-middle .widget-wrap .widgettitle {
	font-size: 20px;
}

#home-top .widget-wrap .widgettitle {
	font-size: 20px;
}

#footer-widgets-1 .widget-wrap .widgettitle {
	font-size: 20px;
}

#header, #inner {
	border: 0;
}

.featuredpost .post {
	border-bottom: 0;
}

.home-middle-right .featuredpost h2 a {
	font-family: "Oswald", arial, serif;
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 5px;
}
input[type="button"]:hover, input[type="submit"]:hover {
	background-color: #5590CC;
}

input[type="button"]:hover, input[type="submit"]:hover {
	text-decoration: none;
	background-color: #5590CC;
	color: #FFF;
	border: 1px solid #0094D2;
}

input[type="button"], input[type="submit"] {
	background-color: #5590CC;
	font-family: "Droid Sans", sans-serif !important;
	padding: 5px;
	text-decoration: none;
	color: #eee;
	cursor: pointer;
	font-size: 13px;
	font-weight: normal;
	border: 1px solid #5590CC;
}

#home-middle .wrap {
    overflow: hidden;
    padding: 20px 10px 0;
}
#home-middle .border {
    border-bottom: medium none;
    overflow: hidden;
}

.sidebar .widget-wrap {
    border: medium none;
    overflow: hidden;
    padding: 20px 25px 10px;
}
.sidebar {
    font-size: 14px;
    line-height: 16px;
}
.featuredpage .page, .featuredpost .post {
    border-bottom: 0px dotted #dddddd;
    margin: 10px 0 0;
    overflow: hidden;
	font-size: 10px;
    line-height: 20px;
}

.post {
    margin: 0 0 0px;
}
#home-middle .wrap {
    overflow: hidden;
    padding: 10px 10px 10;
}
#home-middle .border {
    border-bottom: medium none;
    overflow: hidden;
}
.featuredpost img {
    margin: 0 10 10px;
}

.post {
    margin-bottom: 30px;
    border-bottom: solid;
        border-bottom-width: medium;
        border-bottom-style: solid;
        border-bottom-color: -moz-use-text-color;
    padding-bottom: 40px;
	border-color: #5590CC;

}
.wrap #nav li li a, #nav li li a:link, #nav li li a:visited{
   color:#fff;
   background:#5590cc;
   font-size:12px;
}
.sidebar .widget-wrap {
    border: medium none;
    overflow: hidden;
    padding: 20px 25px 10px;
}
.sidebar .widget-wrap {
    border-bottom: 4px solid #EEE;
    overflow: hidden;
    padding: 15px 20px 20px;
}

#home-top .border {
    overflow: hidden;
    border-bottom: 4px solid #EEE;
    padding: 15px 20px 20px;
}

.home.content-sidebar .home-middle-right .featuredpost .post, .home.content-sidebar #home-bottom .featuredpost .post {
    padding-bottom: 15px;

}
.home-middle-right .featuredpost h2, .home-middle-right h2 a, .sidebar .featuredpost h2, .sidebar .featuredpost h2 a {
    font-family: "Droid Sans",sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    margin: 0px 0px 5px;

	.featuredpost .post-info, .ui-tabs .post-info {
    color: #666;
    margin: 0px;
}
.post-info {
    font-size: 10px;
    margin: 0px 0px 15px;
}
.featuredpost img {
    margin: 0px 0px 0px;
}
.avatar, .entry-content img, .featuredpage img, .featuredpost img, .post-image, .ui-tabs img {
    background-color: #FFF;
    border: 4px solid #EEE;
    padding: 0px;
}

    Totally weirded out by it all.

    Thanks

  • Unknown's avatar
    5mutek · Member ·

    Hey there – I don’t have time this evening to look through all of your CSS but this should get you sorted out with regards to the hover. 

    .featuredpost h2 a:hover, .home-middle-right .featuredpost h2 a:hover {
    color: #5590CC;
}

    Wires definitely can start to get crossed when you keep sort of adding and adding.

    Let me know if this helps you out!

  • Unknown's avatar
    5mutek · Member ·

    ps – one thing that I think will help you (and I went against this in my own last post) would be to add a comment to every bit of CSS that you add to your theme.

    To add a comment you open with this – /* add your comment here, then close with this */

    Anything inside of those asterisk’s and slashes is a comment. This way, if things start to get crazy, you can look at each little bit of CSS and know why you put it there.

    So, by that logic – the little bit that I just wrote for you should be – 

    /* Adding hover state back to widget */

.featuredpost h2 a:hover, .home-middle-right .featuredpost h2 a:hover {
    color: #5590CC;
}

    But, it definitely would be good to go over all of your CSS – ideally you should not have to keep adding things to fix other things that broke when you added something to fix something else that…

    you know what I mean?

    That bit of code will get your hovers working again, and won’t affect anything else, but the best fix here would have been to remove or revise whatever it was that changed your hover state in the first place.

  • Unknown's avatar
    thesacredpath · Member ·

    @theonecoleman2014, it appears that you have gotten everything straightened out on your site and it is looking very good. Are there anymore problems you have that we can help you with?

    It has been quite a while since this thread was active, so I am going to mark it as resolved. If you have further questions or problems, please feel free to start a new thread.

    Thanks.

  • The topic ‘Some headers being a different font to the others? Please help :(’ is closed to new replies.