Jump to content
Sign in to follow this  
mwest

Brand Section - Phone Number and Message above Social Media Icons

Recommended Posts

mwest    0
mwest

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
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mwest    0
mwest
// 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
Rob    547
Rob

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?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mwest    0
mwest

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×