WordPress.org

Ready to get started?Download WordPress

Forums

Coller
Phone number in header (22 posts)

  1. ganz0018
    Member
    Posted 6 months ago #

    I would like to put a phone number up with the social icons on the header. How do i do this. Thank you!

  2. CrouchingBruin
    Member
    Posted 6 months ago #

    Try adding this to the Custom CSS field under Coller Settings > Basic Settings:

    #social_icons:after {
       content: '888-555-1212';
       display: block;
       margin-left: 20px;
    }

    You can adjust the value for margin-left depending upon how much you want to move the phone number under the icons. You can also add other formatting properties, like font-size.

  3. capsprings
    Member
    Posted 6 months ago #

    This works great for one line of text--is there a way to add more than one line of text to the header social icon area? I'd like to put our organization's mailing and email address. It would look nice next to our logo on the left. Thank you!

  4. CrouchingBruin
    Member
    Posted 6 months ago #

    Use this CSS instead:

    #social_icons:after {
       content: "888-555-1212 \\00000a 640 Main Street \\00000a El Segundo, CA 90245";
       white-space: pre;
       display: block;
       margin-left: 20px;
    }

    Note that the CSS editor that Coller uses will change the first backslash to a funny looking character after you Save the options. That's OK, it will still display properly on your site, but you have to remember to change that funny character back into a backslash next time you go in to make a change to the CSS.

  5. capsprings
    Member
    Posted 6 months ago #

    Thank you, your instructions worked perfectly.

    One last question: any tricks for getting our email address in this area under our mailing address? I've tried different methods, but it won't appear. I really appreciate your knowledge and helpfulness.

  6. CrouchingBruin
    Member
    Posted 6 months ago #

    Can't you just add your e-mail address to the end? The \\00000a separator is the key, it's the code for a line break.

    #social_icons:after {
       content: "888-555-1212 \\00000a 640 Main Street \\00000a El Segundo, CA 90245 \\00000a E-mail: huggybear@example.com";
       white-space: pre;
       display: block;
       margin-left: 20px;
    }
  7. ganz0018
    Member
    Posted 6 months ago #

    What if i wanted the email to "mailto" and the phone number to be clickable on mobile?

  8. Andrew
    Forum Moderator
    Posted 6 months ago #

    You'd have to ditch the CSS "content" style and write it in HTML instead. It's probably better if you write in in HTML for everyone anyway.

  9. CrouchingBruin
    Member
    Posted 6 months ago #

    You'd have to ditch the CSS "content" style and write it in HTML instead. It's probably better if you write in in HTML for everyone anyway.

    Yes, I agree. A child theme can be created and a copy of header.php can be modified. Or if you are lazy like me, you can install a script-enabling plugin like Header and Footer and add the following JQuery:
    <script>
    jQuery(document).ready(function($){
       $("#social_icons").append('<div id="ContactInfo">888-555-1212<br />640 Main Street<br />El Segundo, CA 90245<br /><a href="mailto:huggybear@example.com">huggybear@example.com</a>');
    });
    </script>

    This adds a child DIV to the end of the social media DIV with the contact info. It has a class of ContactInfo in case you want to add styling to it via CSS.

  10. thriveology
    Member
    Posted 6 months ago #

    This was SO useful @CrouchingBruin, thank you.
    If you don't mind can you assit me a bit more with putting the contact info under the social media buttons using Coller?

    My site is: http://www.thriveology123.com

    Using your code I was able to get the contact info exactly where I wanted it. Then, when I uploaded my slider images, it no longer went in that area.

    I have no idea how to code. Would you mind letting me know how you would code the contact under the social media buttons with the slider images below.

    Thanks! Justina

  11. CrouchingBruin
    Member
    Posted 6 months ago #

    Hi, Justina. OK, whenever you make a change to the theme options (like creating a slider), the CSS editor that comes with the theme makes goofy changes to the special escape characters in the Custom CSS field, so you have to re-copy in the original code before you save whatever other changes you are making.

    So what you should do is:
    1. Copy the code again from above and paste it into a plain text editor, like Notepad.
    2. Make the changes you need to customize it to your own site.
    3. Save the file so you can use it again if necessary (i.e, when you make another theme option change).
    4. Copy & paste your new code into the Custom CSS field.
    5. Save changes.

    Note: if you use the JQuery/Javascript option that I posted above, you won't have to worry about this because that method isn't affected by the quirky CSS editor.

  12. thriveology
    Member
    Posted 6 months ago #

    CrouchingBruin, this WORKED! Wow, thank you so much!!! I am so impressed I could hug you! I have questions regarding other details that I'll post in the forum. I'd love to hear tips from you is possible. Thanks! :)

    Thanks Again,

    Justina

  13. Dilopo
    Member
    Posted 6 months ago #

    I copied the jQuery lines into the installed Header and Footer plugin. But where and in which plugin file? And where in thre file?

    I havent't made a child theme, but this isn't necessary I guess when using the Header and Footer plugin.

    Thanks in advance!

  14. Dilopo
    Member
    Posted 6 months ago #

    In addiction, copy it in one of the plugin files didn't make it work..

  15. CrouchingBruin
    Member
    Posted 6 months ago #

    Hi, Dilopo, yes, you do not need to create a child theme. After you install the Header & Footer plugin, go to Settings > Header and Footer from your WordPress dashboard.

    Copy the code above into the field that is labeled Code to be added on HEAD section of every page and click the Save button.

  16. Dilopo
    Member
    Posted 6 months ago #

    It worked! Thanks for all the help, improved my website a lot!

  17. emonttinen
    Member
    Posted 5 months ago #

    any advice on adding text to the center of the header? And in larger font than contact info? (I want to add the company name and slogan in large font)
    I installed the header and footer plugin but am clueless with coding.

    http://www.amillionmeals.org

  18. CrouchingBruin
    Member
    Posted 5 months ago #

    @emonttinen, did you add the contact information under the social media buttons through Header and Footer, or did you add it through Coller's Custom CSS field?

  19. CrouchingBruin
    Member
    Posted 5 months ago #

    Nevermind, I see that you used Header & Footer. OK, give me a few minutes to work something up.

  20. CrouchingBruin
    Member
    Posted 5 months ago #

    OK, the first thing you want to do is move your code to a different field in the Header and Footer plugin. You might have noticed that if you go to a different page on the site, the contact information doesn't show up. That's because you put the code into the field labeled Code to be added on HEAD section of the home. That means the code will only execute on the home page. Move the code to one of the other two fields instead, although my preference is for the bottom field, Code to be added before the end of the page, because it will help (in a very small way) decrease your load time.

    Once you've done that, modify the code so it looks like this:

    <script>
    
    jQuery(document).ready(function($){
    
    $("#social_icons").append('<div id="ContactInfo">888-555-1212<br />640 Main Street<br />El Segundo, CA 90245<br /><a href="mailto:huggybear@example.com">huggybear@example.com</a>');
    $('<div id="banner"><div id="banner-title">Childhood Food Solutions</div><div id="banner-tag">Helping fill the Hunger Gap</div>').insertAfter($(".site-branding"));
    
    });
    </script>

    The only difference between this code and the one way up above is that I added one more line to the code, just after the line which adds the contact info after the social icons. This line creates a DIV (a container) with the ID of banner. Inside this DIV are two other DIV containers, one with an ID of banner-title and the other with an ID of banner-tag. Inside each of these DIVs are the text for the site title and the site tagline.

    Once you save the changes, you can take a look, and you'll see that the basic information is there, but it just needs to be styled. That's where some CSS will come into play. Try starting off by copying this into the theme's Custom CSS field (Appearance > Coller Settings > Basic Settings > Custom CSS):

    .site-branding {
       width: 25%;
    }
    #banner {
       display: inline-block;
       float: left;
       padding: 45px 0;
       text-align: center;
       margin-left: auto;
       margin-right: auto;
    }
    #banner-title {
       font-size: 36px;
    }
    #banner-tag {
       font-size: 25px;
    }

    The first rule adjust the spacing between the logo on the left and the new titles. Increase or decrease this value to adjust the spacing.

    The second rule, for the #banner DIV, sets up some general properties. padding is how much empty space there is inside the edges of the container. 45px 0 means 45px of space at the top & bottom, no extra space on the sides. Adjust the first value to adjust how high or low you want the text to be positioned.

    The last two rules set the font size of the title and tag line. Adjust the values as you see fit. You can also add other properties like font color or font weight.

  21. emonttinen
    Member
    Posted 5 months ago #

    @crouchingbruin
    THANK YOU!!!!
    I really appreciate you taking the time to help me out. I couldn't find anyone I knew who could write code and you saved me! (I'm more a print gal venturing into the digital design world, finally)
    Now, the rest of your message about how to change size and weight is a bit over my head. And I want to figure out how to change the font, too.
    Any advice on where to learn coding on the fly or websites to check out to educate myself?
    Thanks again!!

  22. CrouchingBruin
    Member
    Posted 4 months ago #

    Now, the rest of your message about how to change size and weight is a bit over my head.

    In these rules:

    #banner-title {
       font-size: 36px;
    }
    #banner-tag {
       font-size: 25px;
    }

    The font-size property specifies how large the font is. px is short for "pixels," which is the size of the really small dots on the screen that make up an image. So right now the banner title is set to 36 pixels (36px) and the tag line is set to 25px. If you want to make the tag line bigger, you can bump it up to 30px, for example.

    The font-weight property refers to the "thickness" of the font. If you add font-weight: bold as one of the properties, the font will be thicker. You can also use a number in the format n00, where n is a number from 1 to 9 (so 100, 200, ... 900). A value of 400 is normal thickness, 700 would be bolder, 200 would be thinner.

    And I want to figure out how to change the font, too.

    It looks like you figured that one out, congratulations! The only thing to worry about is to make sure you use a web safe font. That is, I've had questions about why, when a font is picked that they can see on their Mac, that it doesn't look the same when the site is viewed on a friend's PC. The reason is that not all fonts are available to every system, especially the fancier ones. The "web safe" fonts are those which are very basic, and should be available on all systems.

    However, there is a way of using "fancier" fonts that are downloaded from a web site. Google Fonts is a very popular way to use fancier fonts in a way that can be viewed on all browsers. For example, if you wanted to use the Sniglet font for your site title, then all you would have to do is paste a line like this:

    <link href='http://fonts.googleapis.com/css?family=Sniglet' rel='stylesheet' type='text/css'>

    Into the Header & Footerplugin (in the Code to be added on HEAD section of every page field), then you could add something like this to your CSS:

    #banner-title {
       font-family: 'Sniglet', cursive;
    }

    Any advice on where to learn coding on the fly or websites to check out to educate myself?

    The W3 Schools site has some excellent tutorials. I would first start with:

    1. HTML Tutorial. HTML forms the basis of the web page. It defines the content of what you see. You may not be writing HTML when you create your WordPress pages, but you should have a basic understanding of what the different tags mean so you can style them with CSS.
    2. CSS Tutorial. CSS allows you to change the appearance of the content that's produced by the HTML. That is, it affects how you see things on a web page. For most users, 90% of what they want done can be accomplished by making changes to the CSS, so this is a very important skill to learn. As you've already learned, you can change things like the font size, weight, and family. You can also change the font color, the background color, use a background image for an element, make rounded corners on rectangular elements, etc. You can also add sections of CSS called media queries that makes changes to the appearance based on the screen size. For example, if someone is viewing your site on a smartphone, maybe you want to make the font size of the site title smaller.

    While learning JavaScript and jQuery can be useful (the code that I had you add to the Header & Footer plugin is jQuery, for example), it is very seldom used, it would more of an advanced topic. The PHP tutorial would also be a more advanced topic, if you wanted to take the step into becoming a "real" web developer and learn how to modify the theme you're using by creating a child theme.

Reply

You must log in to post.

About this Theme

About this Topic