• 0

Header Social Icons in DMS


Question

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites

21 answers to this question

  • 0

Posted · Report post

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

4 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Thanks Danny for the guide. This is perfect.

 

:D

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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).

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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/pagelines/DMS/issues

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

 

 

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

@navigador 

Thanks for sharing that!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

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