WordPress.org

Ready to get started?Download WordPress

Forums

Problems with Text and Simple Simple Social Icons (8 posts)

  1. bfoken
    Member
    Posted 1 year ago #

    Website

    Howdy all. I'm having a devil of a time with the text area the header right widget area. I'm trying to have the text (phone number and tagline) right justified; however, if I include text-align:right the icons have a text overlay on them. How can I right justify the text yet not have any text of the social media icons? Any help is much appreciated! The section of code I'm referencing is below:

    #header .widget-area {
    	float: right;
    	padding: 15px 0 0;
    	width: 275px;
    }
  2. linux4me2
    Member
    Posted 1 year ago #

    Hmmm...

    I'm not seeing a text overlay when I use:

    #header .widget-area {
        color: #FFFFFF;
        padding: 0 0 5px;
        text-align: right;
        white-space: nowrap;
    }

    on line 218 of your style.css in Firefox 17.0.1.

    I used "white-space: nowrap" because different browsers will use different fonts depending on what they have set/installed, and the "nowrap" will keep the text on single lines and adjust the width, where a fixed-width will cause the long line to wrap on some browsers, like mine.)

  3. bfoken
    Member
    Posted 1 year ago #

    Thanks linux4me2, but that did not solve the problem. I tried both nowrap and normal for white-space, but neither changed the text overlay. The one thing I've noticed (while using FireBug) is that if I remove the "text-align: right" the overlay on the icons goes away, but then the tagline and phone number are in the wrong place. Any further ideas of how to keep the text in place and remove the overlay on the icons? Thanks again!

  4. linux4me2
    Member
    Posted 1 year ago #

    I may not be understanding what you mean by "text overlay." To me, text overlay would mean the text of your phone number and business name would be on top of your social-networking icons, but I'm not seeing that in my browser. The social-networking icons are below the text by the 5px you've set for the padding.

    Can you describe what you're seeing?

  5. bfoken
    Member
    Posted 1 year ago #

    Sorry for the ambiguity.

    What I mean by the text overlay is the 6 social media icons have text on top of the icon. For instance, the email icon shows "mail"; the facebook icon has "book", etc. etc. This show up on Firefox and Chrome. This link should show you what I'm seeing.

    So, whenever I have "text-align: right" in the code the text over the icons is there. When that is removed the text is gone, but then the phone number and tagline are no longer right justified. It's a catch-22! Let me know if that makes sense. Thanks!

  6. linux4me2
    Member
    Posted 1 year ago #

    Oh! Now I get it. I wasn't seeing that at all in my browser.

    Okay, try this. At the bottom of the style.css file for your theme, add the following:

    .header-widget-site-info {
        text-align: right;
        white-space: nowrap;
    }

    Then, in the text widget that has your phone number and business name, wrap the text in a div or span and add the class you created above:

    <div class="header-widget-site-info">
    (415)926-9370<br>
    Alameda County Real Estate Investments</div>

    What you're doing is creating a separate CSS class that only affects the text widget, and not all the widgets in the header.

    Note: You can name the class whatever you like as long as there are no spaces or special characters other than the hyphen or underscore. I just picked "header-widget-site-info" for the example. The main thing is to make sure the name you choose isn't used elsewhere in your CSS. I suggested you put it at the bottom of the file so it overrides any other alignment settings that apply to that area.

  7. bfoken
    Member
    Posted 1 year ago #

    Thank you for all your help. Finally got it to work. Have yourself a great day!

  8. linux4me2
    Member
    Posted 1 year ago #

    Glad you got it working. I forgot to mention, you'll need to remove the white-space and text-align from the #header .widget-area once you have it in the class for the site info.

Topic Closed

This topic has been closed to new replies.

About this Topic