WordPress.org

Ready to get started?Download WordPress

Forums

Blog Title color: will not change (15 posts)

  1. ArmaAnzon
    Member
    Posted 5 years ago #

    hi,

    The blog title color is refusing to change. I have tried using the header color editor through wp panel but it has no effect.

    I am using the K2 template (Kuburik v2)

    The code:

    Early in the style.css there is a header section:

    .columns-three #page {
    	width: 950px;
    	}
    
    #header {
    	position: relative;
    	height: 125px;
    	background: #e7e7de; /*- colour of background #e7e7de  */
    	background-position: top right;
    	}
    
    .content {
    	padding: 0 20px 10px;

    Then later on there is this:

    /*- Headings */
    
    h1 {
    	font-size: 3em;
           		}
    
    .blog-title {
    	font-size: 3em;
    	font-weight: bold;
           	padding: 10px 0px 6px; /*- middle number controls how far to the right */
    	}
    
    .blog-title a,
    #header .description {
    	text-decoration: none;
    	}
    
    .blog-title a:hover {
    	text-decoration: underline;
    	}
    
    #header .description { /* Description in header */
    	font-size: 1.5em;
    	font-weight: bold;
            padding: 0 0px 0px; /*- middle number controls how far to the right */
    	margin: 0 0px;
    	}
    
    h2 {
    	font-size: 2.5em;
    	}

    I tried inserting ' color: #000000; ' with the 'important!' tag in various places but still no effect on the color - it remains white.

    Help me change the color of the blog title.
    Blog: http://www.rawfoodbodybuilder.com

  2. 11worth
    Member
    Posted 5 years ago #

    Hi,

    Look in your header.php. Does this code show up towards the bottom?

    `<style type="text/css">

    #header .blog-title a,
    #header .description {
    color: #ffffff;
    }
    </style>`

    If so, edit the #ffffff to #000000, and you should be good to go. This code overrides your stylesheet.

  3. ArmaAnzon
    Member
    Posted 5 years ago #

    Hi,

    Thanks for the reply,

    There is no such code in the header.php file.

    What else could be the solution?

  4. 11worth
    Member
    Posted 5 years ago #

    Well, we had to check it out. Maybe the following two-step process may work.

    1.In your style.css, looking at this code:

    .blog-title a,
    #header .description {
    	text-decoration: none;
    	}

    You may have already tried this, but lets again make the following addition to the above again:

    .blog-title a,
    #header .description {
    	text-decoration: none;
             color: #000000 !important; /* this was added */
    	}

    2. I've never used K2, but have to ask this...does the K2 theme have some kind of a K2 Header Options interface in the WP Admin? I suspect that's where the internal styles in the <head> are generated (check the source code and you'll see it there). Is there a possibility that color: #ffffff is selected in the interface? Can you possibly clear the interface by leaving all values blank and submit, hopefully clearing the internal styles from the <head>? This may allow style.css to control the color.

  5. ArmaAnzon
    Member
    Posted 5 years ago #

    AHA! It worked!

    Yes, K2 does have a Header Options just as the default theme does (K2 is an advanced version of the default wp theme: kubrick - made by the same guy). I reset to the header options to original defaults then inserted the color instruction and viola, it worked!

    Thank you!

    side note: is there a way to have different color on a certain segment of the text? e.g. Header = Happy Birthday. Happy to display in yellow; Birthday to display in blue.

  6. 11worth
    Member
    Posted 5 years ago #

    Hey, glad it worked!

    As far as the multi-color text, you can add it to style.css, or use a local style. This can be applied to any segment of text, whether it be header or paragraph text. You'll use spans to achieve the effect.

    We'll use #header .description as an example:

    In the style.css

    #header .description {
      color: #000000;
    }
    
    .yellow {
      color: yellow;
    }
    
    .blue {
      color: blue;
    }

    In the code:

    <p class="description"><span class="yellow">Happy</span> <span class="blue">Birthday!</span></p>

    Another way to do it, especially if this is a "one-shot deal", and you don't want to mess with the stylesheet, is use local styles. You just edit the code only, then change it back, say, when the birthday has passed. Instead of specifying a class in the span tag, you apply the style directly.

    In the code:

    <p class="description"><span style="color: yellow;">Happy</span> <span style="color: blue;">Birthday!</span></p>

    Hyperlinked text (like the blog-title a) cam be done, but is complicated for the benefits achieved and I don't usually do it. Easier to have <h1 class='blog-title'> display as just text without the link (if your theme permits it), then apply the same as above.

    Have fun!

  7. ArmaAnzon
    Member
    Posted 5 years ago #

    Just to clarify:

    'In the code' are you referring to header.php file ?

  8. ArmaAnzon
    Member
    Posted 5 years ago #

    A Section of the style.css file:

    .blog-title {
    	font-size: 3em;
    	font-weight: bold;
           	padding: 10px 0px 6px; /*- middle number controls how far to the right */
    	}
    
    .blog-title a,
    #header .description {
    	text-decoration: none;
            color: #553300 !important; /*- color of dark greed:#9fc54e lightgreen:#c5e08b darkgrey:#272727  */
    	}
    
    <p class="description"><span class="Dgreen">Raw Food</span> <span class="Dbrown">Bodybuilder</span></p>
    
    .Dgreen {
      color: #9fc54e;
    }
    
    .Dbrown {
      color: #553300;
    }
    
    .blog-title a:hover {
    	text-decoration: underline;
    	}

    I am assuming this is incorrect. My hunch is to insert the 'code' part (span class) into where ever the entry for .blog-title (In my case: Raw Food Bodybuilder) is stored.

  9. 11worth
    Member
    Posted 5 years ago #

    Right, with this example, your style.css is okay, but take out the line:

    <p class="description"><span class="Dgreen">Raw Food</span> <span class="Dbrown">Bodybuilder</span></p>

    And place it in your header.php. Couple ways to try it:

    1. Go into the Header Options interface and try pasting this:

    <span class="Dgreen">Raw Food</span> <span class="Dbrown">Bodybuilder</span>

    ...where you enter the text to be displayed for "Description". That may do it. Your theme automatically enters it into header.php. If not...

    2. You have to manually alter the header.php. Make a backup copy first. Find the line that pertains to <p class="description">. There should be a function in between the p tags. Comment out the whole line like this <!-- <p class="description">function</p> --> with the brackets so you can go back to it when you want to. Insert your own line <p class="description"><span class="Dgreen">Raw Food</span> <span class="Dbrown">Bodybuilder</span></p>. That may do it.

  10. ArmaAnzon
    Member
    Posted 5 years ago #

    Hey, thanks for the reply.

    I can't locate the p class in the header file, am I missing something?

    <?php
    	// Prevent users from directly loading this theme file
    	defined( 'K2_CURRENT' ) or die ( 'Error: This file can not be loaded directly.' );
    
    	// Load localizatons
    	load_theme_textdomain('k2_domain');
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    
    <head profile="http://gmpg.org/xfn/11">
    	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    	<meta name="template" content="K2 <?php k2info('version'); ?>" />
    
    	<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    
    	<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url'); ?>/style.css" />
    
    	<?php if ( K2_CHILD_THEME ): /* Child Themes */ ?>
    	<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />
    	<?php endif; ?>
    
    	<?php if ( get_option('k2style') != '' ): /* K2 Styles */ ?>
    	<link rel="stylesheet" type="text/css" href="<?php k2info('style'); ?>" />
    	<?php endif; ?>
    
    	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
    
    	<?php if ( is_singular() ): ?>
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    	<?php endif; ?>
    
    	<?php wp_head(); ?>
    
    	<?php wp_get_archives('type=monthly&format=link'); ?>
    
    </head>
    
    <body class="<?php k2_body_class(); ?>">
    
    <?php /* K2 Hook */ do_action('template_body_top'); ?>
    
    <div id="skip">
    	<a href="#startcontent"><?php _e('Skip to content','k2_domain'); ?></a>
    </div>
    
    <div id="page">
    
    	<?php /* K2 Hook */ do_action('template_before_header'); ?>
    
    	<div id="header">
    
    		<?php locate_template( array('blocks/k2-header.php'), true ); ?>
    
    		<?php /* K2 Hook */ do_action('template_header'); ?>
    
    	</div> <!-- #header -->
    
    	<hr />
    
    	<?php /* K2 Hook */ do_action('template_before_content'); ?>
  11. 11worth
    Member
    Posted 5 years ago #

    Okay, scratch option 2. above. It's not correct. My apologies...

    If option 1. (using the Header Options interface) doesn't work, post what your header.php looks like between:

    <div id="header">
    
    </div> <!-- #header -->
  12. ArmaAnzon
    Member
    Posted 5 years ago #

    I really appreciate you helping me on this =)

    <div id="header">
    
    		<?php locate_template( array('blocks/k2-header.php'), true ); ?>
    
    		<?php /* K2 Hook */ do_action('template_header'); ?>
    
    	</div> <!-- #header -->

    Option 1 does not work as there is no option to insert code snippets. Just a simple GUI to select text color.

  13. ArmaAnzon
    Member
    Posted 5 years ago #

    ok, im guessing 'k2-header.php' contains all the relevant details:

    ?>
    
    <?php echo "<$block class='blog-title'>"; ?>
    	<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
    <?php echo "</$block>"; ?>
    
    <p class="description"><span class="Dgreen">Raw Food</span> <span class="Dbrown">Bodybuilder</span></p>
    
    <!--<p class="description"><?php bloginfo('description'); ?></p>-->
    
    <ul class="menu">
    	<li class="<?php if ( is_front_page() && !is_paged() ): ?>current_page_item<?php else: ?>page_item<?php endif; ?> blogtab">
    		<a href="<?php echo get_option('home'); ?>/" title="<?php echo attribute_escape( get_option('k2blogornoblog') ); ?>">
    			<?php echo get_option('k2blogornoblog'); ?>
    		</a>
    	</li>
    
    	<?php /* K2 Hook - do not remove */ do_action('template_header_menu'); ?>
    
    	<?php
    		// List pages
    		wp_list_pages( $list_args );
    	?>
    
    	<?php
    		// Display an Register tab if registration is enabled or an Admin tab if user is logged in
    		wp_register('<li class="admintab">','</li>');
    	?>
    </ul><!-- .menu -->

    I've inserted the span class as you suggested, this results in my original description underneath the blogtitle to be replaced with the actual blogtitle text, albiet colored (see: http://www.rawfoodbodybuilder.com)

    I assume I've overwritten the <p class... instruction for the description instead of the blogtitle which is the snippet of code just above where I entered the span class instruction. That, however contains no <p> bracket...hmm

  14. 11worth
    Member
    Posted 5 years ago #

    You did it! I figured there was more to the equation than just the header.php.

    Now, in k2-header.php, if you want to re-do the blog-title, I would comment out the following (just like you did before):

    <?php echo "<$block class='blog-title'>"; ?>
    	<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
    <?php echo "</$block>"; ?>

    This outputs your blog-title, colors, link, and all.

    And replace it with:

    <h1 class='blog-title'><a href="http://www.rawfoodbodybuilder.com/blog/" accesskey="1">Raw Food Bodybuilder</a>
    </h1>

    This gives you the same as before, but you have total control without having to use the interface. The style.css still controls the look.

    Here you can keep the <a href> link and text, or you can omit the link, just have text, and use the <span></span> like this between the <h1 class='blog-title'>Text <span class="yourcolor">mycolor</span></h1> to do the colored words there as well.

  15. ArmaAnzon
    Member
    Posted 5 years ago #

    Excellent, thanks for your help.

    I managed to get the color of the blogtitle and description changed from your helpful guideposts. Thanks! ;)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.