blog title multi colo,font style & size

  • Hi, I need help to make my blog title multi color,size & font
    my blog address is https://www.womenrich.com
    my blog tite is Womenrich.com (where i want to make “W” red color with different font and bigger font size, “en” gray color and “.com” with smaller font size in black color with others “om””rich”

    Tried <span> but no luck. Could someone help.

    [Code & CSS moderated as per the Forum Rules. Please use the pastebin]

Viewing 6 replies - 1 through 6 (of 6 total)

  • if you dont need it dynamic, you can hard code it into the header.php:

    and why not with spans?

    <div id="header">
        <h1><a href="https://www.womenrich.com/"><span class="big_w">w</span>om<span class="grey_4">en</span>rich.<span class="small_com">com</span></a></h1>
	<div class="description">World Of Merits, Enrichment & Novelty</div>
    </div>

    styles, added at the end of style.css of the theme:

    #header h1 a span.big_w { font-family: 'times new roman'; font-size: 200%; letter-spacing:-8px; color: red; }
#header h1 a span.grey_4 { color: #777; }
#header h1 a span.small_com { font-size: 70%;color: #000; }

    and then there is the option of using a graphic as title …

    Thread Starter ivwomen

    (@ivwomen)

    Thanks alchymyth.

    I tried your suggested solution and it works BUT now I have two header images/ title ?! one with old title and other with new title?!
    Also I wanted:
    1)the rest of title words “om”& “rich” to be in black color & font style “Time New Roman” and same for title description.
    2)“en” which is in gray should in same font size and style of “om” & “rich”
    3)I wanted “.com “ font style “Time New Roman” & all small , currently “C” is appearing as capital .

    Highly appreciate your help . Thanks

    Thread Starter ivwomen

    (@ivwomen)

    [Mod Note: Code segment removed. If you want to post large blocks of code, please use a pastebin (Alternate URL).]

    Thread Starter ivwomen

    (@ivwomen)

    Also i tried second opetion to add the blog title to header image and upload but it stell showing the old header image .

      <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
      <html xmlns=”https://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>
      <head profile=”https://gmpg.org/xfn/11″&gt;
      <?php

      $options = get_option(‘mc_options’);
      /* Default setting is One right sidebar layout */
      if(trim($options[‘mc_sidebar_layout’]) == “”) { $options[‘mc_sidebar_layout’] = ‘r’; }
      if($options[‘mc_sidebar_layout’] == ‘ll’ or $options[‘mc_sidebar_layout’] == ‘rr’ or $options[‘mc_sidebar_layout’] == ‘lr’) {

      /* Setting margins and dimensions for 2 sidebar layout */
      $contentmargin = “10px”;
      $sidebarmargin = “10px”;
      $contentwidth = “160px”;
      $sidebarwidth = “140px”;
      if($options[‘mc_sidebar_layout’] == ‘ll’ or $options[‘mc_sidebar_layout’] == ‘rr’) {
      /* If 2 left or right sidebars then overriding content dimensions to add some extra space to the content */
      $contentmarginright = “margin-right: 20px;”;
      $contentmarginleft = “margin-left: 20px;”;
      $contentwidth = “530px”;

      }
      } else if($options[‘mc_sidebar_layout’] == ‘l’ or $options[‘mc_sidebar_layout’] == ‘r’) {
      /* Setting margins and dimensions for 1 sidebar layout */
      $contentmargin = “30px”;
      $sidebarmargin = “30px”;
      $contentwidth = “680px”;
      $sidebarwidth = “300px”;

      } else {
      /* Setting margins and dimensions for NO sidebar layout */
      $contentmargin = “50px”;
      $sidebarmargin = “50px”;
      $contentwidth = “900px”;
      }
      ?>
      <link rel=”icon” href=”<?php bloginfo(‘siteurl’); ?>/favicon.ico” type=”image/x-icon” />
      <link rel=”shortcut icon” href=”<?php bloginfo(‘siteurl’); ?>/favicon.ico” type=”image/x-icon” />
      <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
      <!– Default Color Scheme Setting –>
      <?php if(trim($options[‘mc_colorscheme’]) == ”) { $options[‘mc_colorscheme’] = ‘brown’; } ?>
      <link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/style-<?php echo $options[‘mc_colorscheme’]; ?>.css” type=”text/css” media=”screen” />
      <!–[if IE]>
      <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’); ?>/style-ie.css” type=”text/css” media=”screen” />
      <![endif]–>
      <style type=”text/css”>
      #content { width: <?php echo $contentwidth; ?>; margin: 0 <?php echo $contentmargin; ?>; <?php echo $contentmarginright; ?> <?php echo $contentmarginleft; ?> }
      .sidebar { width: <?php echo $sidebarwidth; ?>; margin: 0 <?php echo $sidebarmargin; ?>; }
      </style>
      <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
      <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
      <?php load_theme_textdomain(‘multi-color’,get_bloginfo(‘template_url’).’/languages’);?>
      <?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>
      <?php wp_enqueue_script(“jquery”); ?>
      <?php wp_head(); ?>
      <script type=”text/javascript” src=”<?php echo get_bloginfo(‘template_url’); ?>/js/multi-color.js”></script>
      </head>
      <body>
      <div id=”wrapper”>
      <div id=”header”>
      <h1>/”><?php bloginfo(‘name’); ?></h1>
      <div class=”description”><?php bloginfo(‘description’); ?></div>
      </div>

      <?php if(trim($options[‘mc_menu’]) == “”) { $options[‘mc_menu’] = ‘pages’; } ?>
      <div class=”menu”>

        <?php if($options[‘mc_menu’] == ‘pages’) { ?><li id=”home”<?php if(!is_page()) {?> class=”current_page_item”<?php }?>>“><?php _e(‘Home’,’multi-color’); ?> <?php echo remove_title_attribute(wp_list_pages(‘depth=3&title_li=&echo=0’)); ?><?php } ?>
        <?php if($options[‘mc_menu’] == ‘categories’) { ?><li id=”home”<?php if(!is_page() && !is_category() ) {?> class=”current-cat”<?php }?>>“><?php _e(‘Home’,’multi-color’); ?> <?php echo remove_title_attribute(wp_list_categories(‘depth=3&title_li=&number=10’)); ?><?php } ?>

      <div class=”clear”></div>
      </div>

    to move the title and description off the header, you could add this to style.css of your theme:

    /* Header */
#header h1, #header .description { text-indent:-9999px; }
    Thread Starter ivwomen

    (@ivwomen)

    Thanks it worked out

    BUT the image quality is not as good as it is on my pc once it is uploaded to wp blog . The original one shows great font style, color and even the image “photo” look is much much better than how it is appearing in the blog “wordpress” .

    The image file is *.png file . I realy do not know why. Any idea

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘blog title multi colo,font style & size’ is closed to new replies.