• Resolved sohowp

    (@sohowp)


    Hi, I was wondering how I can change the Sidebar headings (Follow, Home and More) to something else?
    Also, how can I enter other text where the heading (Home) is at, such as, phone number. Can I use CSS for that or must I edit some php files?

Viewing 9 replies - 1 through 9 (of 9 total)
  • I have also wondered how to change those sidebar headings.

    If you’re using a child theme (which I would recommend if you’re doing any customization) you have a couple of options:
    1. Copy the sidebar.php and sidebar-2.php files from the parent theme to your child theme and change the text in those files.
    2. Use the following function in your child theme functions.php file:

    /* --- Change Follow and More sidebar titles --------------------------------- */
    function my_sidebar_titles( $translated_text, $text, $domain ) {
    	switch ( $translated_text ) {
    		case 'Follow:' :
    			$translated_text = __( 'Left Sidebar', 'hueman' );
    			break;
    		case 'More' :
    			$translated_text = __( 'Right Sidebar', 'hueman' );
    			break;
    	}
    	return $translated_text;
    }
    add_filter( 'gettext', 'my_sidebar_titles', 20, 3 );

    You can also do it using css in a child theme style.css file, using the theme Custom CSS option, or using a plugin like Simple Custom CSS:

    /* remove the existing sidebar heading text */
    .s1 .sidebar-top p:first-child,
    .s2 .sidebar-top p:first-child {
      display: none;
    }
    /* new primary sidebar heading */
    .s1 .sidebar-top:before {
      content: "New Heading Left";
    }
    /* new secondary sidebar heading */
    .s2 .sidebar-top:before {
      content: "New Heading Right";
    }
    /* style the new headings */
    .s1 .sidebar-top:before,
    .s2 .sidebar-top:before {
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      padding: 2px 0;
    }
    /* adjust for secondary sidebar heading height */
    .s2 .sidebar-top:before {
      padding: 3px 0;
    }
    /* bring social links up into the sidebar heading */
    .s1 .sidebar-top .social-links {
      padding-top: 0;
      margin-top: -25px;
    }
    /* adjust new sidebar heading color to match social icons in mobile view */
    @media only screen and (max-width: 960px) and (min-width: 479px) {
      .s1 .sidebar-top:before {
        color: #666;
      }
    }
    @media only screen and (max-width: 1200px) and (min-width: 479px) {
      .s2 .sidebar-top:before {
        color: #666;
      }
    }

    @sohowp – where are you seeing “Home”?

    Thread Starter sohowp

    (@sohowp)

    bdbrown, thanks.

    Here is my website: http://www.brandonbadminton.com
    I guess I was mistaken to see the “home” sidebar. It’s actually the middle part between the two sidebars. Saying that, is there a way to put a phone number on the right side of the “Home” title where it will always stays there?

    That’s the page title. You could try this css in a child theme style.css file, or use the theme Custom Stylesheet option, or use a plugin like Simple Custom CSS:

    .page-title:after {
      content: "(800) 555-1212";
      float: right;
      margin-top: -23px;
    }
    Thread Starter sohowp

    (@sohowp)

    Hey that’s great! I use the Simple Custom CSS plugin and it is working.
    I don’t have a child theme but is it too late to configure a child theme?

    Never too late…;-) The theme author has even provided a pre-configured child theme:
    1. In Theme Options, click the Help tab in the upper right-hand corner.
    2. One of the options is to Download the sample child theme. This will download the child theme zip file to your local computer.
    3. Install the new theme in your Admin panel by selecting Add New > Upload Theme > Choose File, then select the zip file.
    4. Activate the Heuman Child theme.

    Doesn’t get much easier than that.

    Thread Starter sohowp

    (@sohowp)

    Oh wow, that’s good to know bdbrown!
    Btw, I noticed the text I put in are all in uppercase. Is there a way to change the font and color and not all in uppercase?
    Is there a way to input an image instead of text?

    Add to the css:

    /* change font family */
    font-family: "Times New Roman", Georgia, Serif;
    
    /* change text to red */
    color: #f00;
    
    /* not all caps */
    text-transform: capitalize;

    To use an image, replace the content attribute:

    /* use an image instead of text */
    content: url(image.jpg);

    Note: This is literally an image on the page like <img> would be. It could also be a gradient. Note that you cannot change the dimensions of the image when inserted this way. (from css-tricks.com)

    I was able to successfully change the column headings on both sidebars, and I also followed your instructions for downloading the child theme the author provided. You were a huge help, thanks very much for your detailed answers!

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

The topic ‘Change sidebars headings’ is closed to new replies.