Jump to content

Archived

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

pd4bh35em

branding social media icons in header going horizontally

Recommended Posts

pd4bh35em

I am trying to follow the directions given in the support area to show the social media icons.  The code given to paste is this:

 

<div class="social-bar pull-left">
    <ul class="zmt zmb">
        <li><a href="#" target="_blank"><i class="icon icon-dribbble"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-facebook"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-google-plus"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-instagram"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-linkedin"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-pinterest"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-twitter"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-youtube-play"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-rss"></i></a></li>
        <li><a href="mailto:hello@example.com"><i class="icon icon-envelope"></i></a></li>
    </ul>
</div>
 
This lists the social media icons on 10 lines, one social media icon per line.  It doesn't do what the tutorial shows, the social media icons going from left to right on on line.  What is the correct code to list the social media icons all on one line?

Share this post


Link to post
Share on other sites
Jake

Hi pd4bh35em - That is the correct code but you also need to style the icons in order to get them to line up and size appropriately. Follow the rest of the directions at http://docs.pagelines.com/tutorials/creating-a-branding-area and it will resolve the problem!


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
pd4bh35em

Thanks, I got it to work.  The directions were confusing for someone like me that hasn't used pagelines.  or the writer already knew how to use pagelines, but didn't take into consideration their audience readers.  What it didn't say was to add a text box section and click on edit.  from there, to paste the html code that listed the social media icons inside the text content.  Then i added the other two codes into the custom code -> custom less/css text box area.  clicked publish, refreshed, and it worked.  Also, make sure to choose the align right.  

 

Thanks for your help.

Share this post


Link to post
Share on other sites
Jake

Glad to hear we got it sorted out for you and my apologies that you found it confusing, I will pass your feedback along.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
KimAnn03

I have done everything that the document says and am having 2 problems still:

 

1. I added the code for the icons to align center on mobile devises (under the responsive css section) and it is not working. Do I just add the code just as it is into the global css?

 

2. I can not get the icons to align horizontally in my widget box. The code works in text boxes but when i enter the code in one of the widget options on my sidebar it shows up vertically.

 

Please advise.

 

Thanks,

Kim

Share this post


Link to post
Share on other sites
Danny

HI,

 

I have just followed those instructions and there is no issue whatsoever, that code has been used by a large of amount of users and they haven't encountered your issue either.

Therefore, the issue is how you have added the code.

 

Can you provide a link to your site please, so we can take a closer look. Also, can you provide screenshots of your settings, so we can see how you have implemented the code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03

my site is http://kimberleegorgo.com...see http://kimberleegorgo.com/about/ for the issue

 

Here is a screenshot of my settings in the sidebar:

http://kimberleegorgo.com/wp-content/uploads/2013/11/1.tiff

 

THis is my custom LESS/CSS...can't take a screenshot of whole thing:

    /* Social media color variables */
 
    @envelope: #08CF90;
    @facebook: #3B5998;
    @pinterest: #CB2027;
    @rss: #E5842F;
    @twitter: #00ACED;
      
.social-bar {
    a {
    margin-right: 0px; // Here in-case you wish to add margins
    padding: 0px; // Here in-case you wish to add padding
    }
    li {
    display: inline;
    }
    .icon {
    .border-radius(0px); // Here in-case you wish to add a radius
    margin-bottom: 5px;
    min-width: 50px;
    color: #FFF;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    &:hover { .transition(background 400ms linear); }
    }
    .icon-envelope {
    background-color: @envelope;
    &:hover { background-color: lighten(@envelope, 10%); }
    }
    .icon-facebook {
    background-color: @facebook;
    &:hover { background-color: lighten(@facebook, 10%); }
    }
    .icon-pinterest {
    background-color: @pinterest;
    &:hover { background-color: lighten(@pinterest, 10%); }
    }
    .icon-rss {
    background-color: @rss;
    &:hover { background-color: lighten(@rss, 10%); }
    }
    .icon-twitter {
    background-color: @twitter;
    &:hover { background-color: lighten(@twitter, 10%); }
    }
@media (max-width: 767px) {
    .social-bar {
    float: none;
    text-align: center;
    }
    }

 

 

Like I said- the problem is when i put hte code into a widget in the primary sidebar. If i add a text box to the sidebar it works but not in a widget in the sidebar. I know you say this has never been a problem but I must have done the code right becaue it works everywhere but in the sidebar widget...this is a widget issue.

 

Problem number 2 is that on my mobile device I can't get the icons to center. HERE is a snapshot of that.

 

 

Please advise,

Kim

Share this post


Link to post
Share on other sites
Danny

OK, the issue is here is that you have added it to a widget, by default widgets ul li styling will be in a list, therefore you need to add the following CSS for it to work in a widget. The example I used it was added a mediabox section.

 

.social-bar ul li {
display: inline-block;
}
.social-bar ul {
list-style: none;
}
 
Add the above code and this should resolve your issue.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03

Hi Danny,

 

Thanks for your response that makes sense now. Unfortunately the code you provided isn't working  :fpc: .

 

Also do you know why the responsive CSS isn't working to center the icons on my phone (see above).

 

Thanks again :P

 

Kim

Share this post


Link to post
Share on other sites
Danny

Kim, I tested the code before I pasted it here, it certainly does work.

Therefore, I am probably thinking its an entirely different issue, can you please provide a concept image of what you want to achieve and what it is currently doing that you do not like then I will be able to assist you further.

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03

My icons in the sidebar looks like this: (vertical) http://kimberleegorgo.com/wp-content/uploads/2013/11/2.tif

 

and I want them to look like this: (horizontal) http://kimberleegorgo.com/wp-content/uploads/2013/11/1.tif

 

And my phone looks like this: (right-justified) http://kimberleegorgo.com/wp-content/uploads/2013/11/IMG_4918.png

 

and I want the phone to center the icons. The css code provided in the pagelines docs didn't work. It was

  1. @media (max-width: 767px) {
  2. .social-bar {
  3. float: none;
  4. text-align: center;
  5. }
  6. }

 

Also for reference here is how my css looks so you can see that I did as you recommended:

 
    /* Social media color variables */
 
    @envelope: #08CF90;
    @facebook: #3B5998;
    @pinterest: #CB2027;
    @rss: #E5842F;
    @twitter: #00ACED;
      
.social-bar {
    a {
    margin-right: 0px; // Here in-case you wish to add margins
    padding: 0px; // Here in-case you wish to add padding
    }
    li {
    display: inline;
    }
    .icon {
    .border-radius(0px); // Here in-case you wish to add a radius
    margin-bottom: 5px;
    min-width: 50px;
    color: #FFF;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    &:hover { .transition(background 400ms linear); }
    }
    .icon-envelope {
    background-color: @envelope;
    &:hover { background-color: lighten(@envelope, 10%); }
    }
    .icon-facebook {
    background-color: @facebook;
    &:hover { background-color: lighten(@facebook, 10%); }
    }
    .icon-pinterest {
    background-color: @pinterest;
    &:hover { background-color: lighten(@pinterest, 10%); }
    }
    .icon-rss {
    background-color: @rss;
    &:hover { background-color: lighten(@rss, 10%); }
    }
    .icon-twitter {
    background-color: @twitter;
    &:hover { background-color: lighten(@twitter, 10%); }
    }
@media (max-width: 767px) {
    .social-bar {
    float: none;
    text-align: center;
    }
    }
  .social-bar ul li {
display: inline-block;
}
.social-bar ul {
list-style: none;
}

Share this post


Link to post
Share on other sites
Danny

OK, just added this to my test site and it is working. Also, I am able to see all the code I gave you on your site, the first snippet is missing from what I could tell.

 

#site .social-bar ul li {
display: inline-block;
}
#site .social-bar ul {
list-style: none;
}
 
@media (max-width: 767px) {
#site .social-bar ul li {
display: block;
}
}
 
If you're still having issues after using this code, then you're doing something wrong, as I have tested this several times in a textwidget.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03

Update: I found my error in the code and now the widget thingy is working. phew! thank you. Now I'm having trouble with mobile display but not done trying to fix it so fingers crossed.

Share this post


Link to post
Share on other sites
KimAnn03

got it! thanks for your persistance, Danny!

Share this post


Link to post
Share on other sites
Danny

Awesome and no problem, happy to help!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×