Archived

This topic is now archived and is closed to further replies.

  • 0

Brand Section - Phone Number and Message above Social Media Icons


Question

Posted · Report post

Hey Guys,

 

I have looked at some of the posts in the forum and I am still having trouble with putting a phone number with a message under the phone number (have not attempted the message part yet) and having both of these sections reside over the social media icons in the branding section.

 

I think I need to create two new "divs" to do this. However, I am not sure what the best route would be or how to actually create the divs via php. 

 

Currently, the .phoneRight section is inheriting the 24 x 24px status from the .section-branding .icons section. Wondering if I could get some help creating a separate div via php (if this is right course) for these sections. Any help for this newbie would be greatly appreciated.

 

Thank you!

 

http://newportavelandscaping.com/

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi,

 

The good news is the site's working now. Must have been a browser glitch or something.  phone number is clickable.

 

I think your HTML is a bit off.  See this: http://stackoverflow.com/questions/4572297/is-there-a-way-to-make-a-phone-number-clickable-on-an-iphone-or-android-phone-to

 

The method to add the additional line is to do something like:

// ADDS CONTACT DETAILS TO BRANDING ------- //
add_action( 'pagelines_branding_icons_start', 'brand_phone');
                  
function brand_phone(){ ?>
<h4 class="phoneRight"><a href="tel:5416178873">Call us: (541) 617-8873</a></h4>
<div class="phoneRighttext">your text content</div>
<?php
}

You then create CSS for the phoneRighttext class, setting up the style of the text as you'd like, such as color, font, font-weight, etc.

Share this post


Link to post
Share on other sites

Posted · Report post

How are you implementing the DIV right now? Can you please paste the code for it here?

Share this post


Link to post
Share on other sites

Posted · Report post

// ADDS CONTACT DETAILS TO BRANDING ------- //
add_action( 'pagelines_branding_icons_start', 'brand_phone');
                 
function brand_phone(){ ?>
<h4 class="phoneRight"><a href="tel:5416178873">Call us: (541) 617-8873</a></h4>
<?php
}

 

I grabbed this code from somewhere in the forums and pasted it in the customize plugin folder...

 

The CSS for the .phoneRight and branding icon sections are as follows...

 

.phoneRight {
      height: 40px; 
      position: relative; 
      margin-left: 161px; 
      top:10px; 
      padding-bottom:5px; 
      padding-right: 1px;
}

.section-branding .icons {
      height: 70px; 
      width: 40%;
}

.section-branding .icons .phoneRight {
      width: 210px;
}

.section-branding .icons .phoneRight a {
       width: 210px; 
       text-align:right; 
       float: right; 
       color:rgb(255, 0, 0);
}

.section-branding .icons .phoneRight element.style {
       opacity:1;
}

 

There is probably a more concise way to write the CSS. I have been tinkering with the CSS, trying to figure it out...

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

The site link you provided isn't working at present, so I can't see this to help more specifically.

 

Is the code provided first, above, in functions.php inside wp-content/plugins/pagelines-customize? Was the entire group added at the end of that file?

Share this post


Link to post
Share on other sites

Posted · Report post

Yep. The code was added to the customize plugin. The link was working for me... 

Share this post


Link to post
Share on other sites