Jump to content
tecjaseplym

Header Social Icons in DMS

Recommended Posts

tecjaseplym    1
tecjaseplym

Hi we are looking to upgrade a clients website from Framework V2.4.4 to DMS but after testing the free version there does not appear to be a social icon section that we can place in the header. Is this possible. The coloured icons on Framework were perfect and need to be kept the same.

  • Like 1

Share this post


Link to post
Share on other sites
Rob    547
Rob

If you are using the free version of DMS,  there are limits about the sections available.  The paid versions have 40 or more sections available, including social media. 

 

You can also use our docs for support to get or add social media through custom coding.  http://docs.pagelines.com.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
tecjaseplym    1
tecjaseplym

Thanks for the reply. The missing sections are still shown in the free version are they not?  There doesn't to be a similar easy way as in Framework to display round coloured social icons.

 

I see there is a Business branding plugin but this does not display coloured social icons as before.

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

I'd like to call out that I made the same assumptions about DMS - that these sections were removed as they are not in the free version when there are other sections such as callout, pricing and others that say pro only. I took that to mean the handful of sections shown in the free version as available in pro as the only pro sections that come with DMS. 

 

This led to major disappointment, threads on how to recreate things and more. This is one more example of that.

 

There are those of us using the free DMS basic as the evaluation tool of whether or not we want to upgrade. Not seeing all of the sections available even if they are grayed out and only seeing a few grayed out implies that is all that is available. A UI/UX change you'll surely want to consider.

 

If I could suggest, it would be very helpful to have a complete list and even showcase of every section that is available in DMS pro. This will clear up confusion and no doubt increase your sales.

  • Like 2

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

Hi,

 

Business Branding still has the colored social icons like before and also uses the font awesome icons, you can choose which icons to show. Also, I plan to add the option to add your own icons and social network urls.

 

As for the old sections like Branding, BrandNav, Boxes, Banners, etc., my understanding is that those will be put together into a plugin called Pagelines Legacy Sections. Hopefully those should show up soon. If I hear anything I'll pass it along.

 

Ellen

  • Like 1

Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

Thank you Danny"] for putting together a tutorial. But I am still confused - would this only apply to DMS Basic or is there some solution in the Pro version? I am seeing conflicting information. @[member="Rob says above that not everything is in basic and pro has more than 40 sections available. I've also seen graphics such as these on Using Pagelines that show the branding section in DMS:

 

http://www.screencast.com/t/TAJJlYfLl

 

So which is it?

Share this post


Link to post
Share on other sites
tecjaseplym    1
tecjaseplym

Thanks Danny for the guide. This is perfect.

 

:D

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

Hi Danny,

  1. As regards v2/Framework free Branding section (and its social icons), and some other "old" sections being or not transposed in (free) DMS via a sort of "Lecacy Sections" plugin: no definitive answer from Pagelines as far I'm aware of.

    But if we refer to the topic I opened on this matter (http://forum.pagelines.com/topic/28216-banners-boxes-branding-features-sections/) and Rob's answers + other clues here and there including your great tutorial: increasing evidence any of those won't show up in DMS, for the plain and simple reason that (free) DMS provides improved equivalent sections, or better alternatives.

    Could you confirm this in order to clarify expectations (in this topic and/or the other one and/or in a separate announcement)?

     
  2. As regards the usage of MediaBox for branding in header, I'm struggling like many others with weird "height responsiveness" issues: of the image in the MediaBox, and even sometimes of the MediaBox in the header (see the thread I mentioned above or this other one for instance: http://forum.pagelines.com/topic/28208-not-able-to-change-height-in-sections-specifically-header/). Are you aware of this?

Best regards.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Thank you Danny"] for putting together a tutorial. But I am still confused - would this only apply to DMS Basic or is there some solution in the Pro version? I am seeing conflicting information. @[member="Rob says above that not everything is in basic and pro has more than 40 sections available. I've also seen graphics such as these on Using Pagelines that show the branding section in DMS:

 

http://www.screencast.com/t/TAJJlYfLl

 

So which is it?

 

Not sure what you're referring to, the guide applies to all versions of DMS, the only thing that you wouldn't be able to do is use the viewpoint animation if you're using the Open Source version of DMS.

 

 

Hi Danny,

  1. As regards v2/Framework free Branding section (and its social icons), and some other "old" sections being or not transposed in (free) DMS via a sort of "Lecacy Sections" plugin: no definitive answer from Pagelines as far I'm aware of.

    But if we refer to the topic I opened on this matter (http://forum.pagelines.com/topic/28216-banners-boxes-branding-features-sections/) and Rob's answers + other clues here and there including your great tutorial: increasing evidence any of those won't show up in DMS, for the plain and simple reason that (free) DMS provides improved equivalent sections, or better alternatives.

    Could you confirm this in order to clarify expectations (in this topic and/or the other one and/or in a separate announcement)?

     
  2. As regards the usage of MediaBox for branding in header, I'm struggling like many others with weird "height responsiveness" issues: of the image in the MediaBox, and even sometimes of the MediaBox in the header (see the thread I mentioned above or this other one for instance: http://forum.pagelines.com/topic/28208-not-able-to-change-height-in-sections-specifically-header/). Are you aware of this?

Best regards.

 

1. There is a legacy plugin which should be added to the store soon, this plugin contains all the old sections from PageLines Framework, such as Banners, Boxes, Branding, BrandNav etc.. Whether or not this will be available to users of the open source version I can't say, as I haven't been told anything. I will try to find this information out and reply here if and when I am told anything.

 

2. The MediaBox has a two options which will solve your issue. These are MediaBox Min Height (px) and Disable Media Vertical Centering?.

Min Height is self explanatory, whilst the vertical centering simply means that if you disable it, your image will now be positioned at the top of the box instead of the center.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

Not sure what you're referring to, the guide applies to all versions of DMS, the only thing that you wouldn't be able to do is use the viewpoint animation if you're using the Open Source version of DMS.

 

 

 

Hi Danny,

 

Just trying to understand if there is a Pagelines Branding section available for those on DMS Pro? I know it is not in the basic at this point.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

There is a legacy plugin as I mentioned above, that contains all the old sections from PageLines Framework, such as banners, boxes, Branding, BrandNav, Features etc.. This plugin as far as I know will be free and available to everyone, its just not been added to the store yet due to the issues we have with the server.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bfrye26    3
bfrye26

Wow, I did not know they would release a legacy plugin. This will give back many of the things DMS is missing! I must commend the Pagelines staff. Now if they cn get this out in short order I know I for one would be ecstatic!  

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Well with the amount of control you have imo, they aren't really needed. You can easily recreate a banner section with a MediaBox and TextBox inside a 2 Column section area.

The same goes for pretty much all other sections, the Branding section I have recreated in the doc I linked above (still draft).

But as far as I know, we will release this plugin so you have a greater choice.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

1. There is a legacy plugin which should be added to the store soon, this plugin contains all the old sections from PageLines Framework, such as Banners, Boxes, Branding, BrandNav etc.. Whether or not this will be available to users of the open source version I can't say, as I haven't been told anything. I will try to find this information out and reply here if and when I am told anything.


Thanks a lot, received loud and clear, I'll spread the word - quite sure many many ppl waited for this clear explanation  ;)
 

2. The MediaBox has a two options which will solve your issue. These are MediaBox Min Height (px) and Disable Media Vertical Centering?.


Min Height is self explanatory, whilst the vertical centering simply means that if you disable it, your image will now be positioned at the top of the box instead of the center.

 

Both options do what they're supposed to do.

But, quoting the frontend information, when you don't specifiy a min height "Required for "cover" mode", the mediabox is supposed to be "drawn at the height of the media": which is not the case or I really miss something  :(.

Here is a screenshot of what happens with neither of those options used: http://screencast.com/t/h0iJaizQ1qyY (green & red borders applied to .pl-section-pad, div.mediabox-wrap, div.the-media respectively, for demo purpose only).

  • Like 1

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

Thanks a lot, received loud and clear, I'll spread the word - quite sure many many ppl waited for this clear explanation  ;)
 

 

Both options do what they're supposed to do.

But, quoting the frontend information, when you don't specifiy a min height "Required for "cover" mode", the mediabox is supposed to be "drawn at the height of the media": which is not the case or I really miss something  :(.

Here is a screenshot of what happens with neither of those options used: http://screencast.com/t/h0iJaizQ1qyY (green & red borders applied to .pl-section-pad, div.mediabox-wrap, div.the-media respectively, for demo purpose only).

 

I can't get the media to resize correctly in the header either.

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

 

 

hmm, that could be a minor bug that. Would it be possible for you to post this on the DMS GitHub tracker please.

https://github.com/p...ines/DMS/issues

 

Done ("MediaBox is not height responsive to the media (image)").

Share this post


Link to post
Share on other sites
navigador+    6
navigador

Hi,

 

I am in the process of writing a tutorial doc, which will demonstrate the power of DMS and show you show to recreate the Branding section using nothing more than a 4 sections, a bit of LESS and some basic HTML.

You can find the page here, please be aware that this page is still in draft and not actually finalised yet.

 

http://docs.pagelines.com/tutorials/creating-a-branding-area

 

I tried this the day DMS came out and got a bit frustrated with the fixed height of the media box. I juts gave it another go with you docs suggestion. and the only way I could get the logo to be tight with a nav bar underneath is to use some custom css in the custom css box. My 329x56 logo now fits as tight as a glove:

 

http://tinypic.com/r/aowfi0/5

 

All I did was to use this code:

 

.pl-area-wrap {padding-top: 0px !important; padding-bottom: 0px !important;}
.mediabox-wrap {min-height: 0px !important;}
.pl-section-pad {margin-bottom: 0px !important;}
.alignleft {margin-bottom: 0em !important;}
.the-media-html p {margin-bottom: 0px !important; margin-top: 0px !important;}

Share this post


Link to post
Share on other sites
Rob    547
Rob

@navigador 

Thanks for sharing that!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

In the HTML in the tutorial is used the class "pull-right", but how can I easily find the usefull classes? I went to my theme folder, and inside the folder I searched in:

 

utilities.less (thought it would be listed here);

mixins.less.

 

But there are so many other files left, how to easily know what we can use?

 

This is the HTML:

<div class="social-bar pull-right">
    <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>

I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Both pull-left and pull-right can be found in icons.less.

 

I will update the HTML/CSS Utilities doc, to include these as well as the hide/show classes for desktop, tablet and phone.


Please search our forums, before posting!

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


  • Similar Content

    • MissT
      By MissT+
      The social icons within the Sitemap Footer section plugin are not longer showing on screen. Site details will be sent via email separately.
      WordPress - 4.7.2
      Pagelines Framework Version 5.0.97
      Platform 5 Version - 5.1.6
      Section Sitemap Footer version - 5.0.4.
       
      All other plugins deactivated.
    • jeomiland
      By jeomiland+
      In post 34871-sharebar-issues Danny suggests one can use any of the icons in font-awsome for social share icons. What's the best way to use other images?  Client asked me to implement the icons at http://www.wpbeginner.com/showcase/16-best-free-social-media-icon-sets-for-wordpress/  specifically #20 "20 Social Media Icons". Have downloaded the zip file containing those icons but where/how get them to show up on the site?
      So I am referring to both the icons to send visitors to the site owner social properties AND shar icons so people can Like, share ect.
      Upon further research, I see a discussion on problems with using social icons on SSL (https://...) sites since a warning message comes up complaining about mixed SSL and non-SSL content on the page? Since this site is a shoppingcart site, using Woocommerce, this could be a problem. What's the current wisdom on dealing with this?  Also, I read a while ago there can be a performance hit if one makes their whole site SSL, so since Wordpress and themes adds significant overhead, what's the current wisdom on this issue?  SSL for all pages or just for shoppingcart checkout/account info pages?
      Thanks
      site: http://verdanthomeproducts.com
       
    • pieterbartlema
      By pieterbartlema
      Dear All,
      Somehow the the social icons went missing in the site branding section. please help...
      www.buscafins.com
    • abuzzelli
      By abuzzelli+
      Trying to display social icons in the footer of http://brkichdesign.com/NewSite/. All are working but yelp. It's right after the pinterest icon, it's there but not showing up. Any ideas why?
    • lutz
      By lutz
      I'm using Pagelines for some years now and had to change to responsive webdesign recently (Site Options - Layout Editor - Layout Handling: "responsive with % width" now instead of the former "static with pixel width").
       
      In "Site Options - Header and Footer" - Branding Section: Social Icon Position" I set the distance from bottom to 35 and the distance from right to 1135 as it always has been.
       
      Now the problem is that the social icons move with the width of the browser (IE, Chrome, Opera, Firefox: all the same) and thus out of the window if the frame is too small. Please try out on http://mobiwatch.de
       
       
      I can't position social icons on the right side of the website because there are two sidebars with ads.
       
      And I can't change back to static pixel width design because of Google: they will ignore websites that do not have responsive web design!
       
      So I really, really hope you can help me fix that!!!
       
      Thanks in advance,
      Lutz
       
×