Jump to content

Archived

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

Audun MB

Recreating the Sitemap Footer with sections and widgets

By Audun MB+, in Platform 5

Recommended Posts

Audun MB+    17

Audun MB
Posted

Just for reference if someone else needs to do this. 

The Sitemap footer doesn't support nested menus, which makes it kind of pointless. Who doesn't have a nested site structure? Anyway, this allows for more finegrained control over the footer, while keeping the nice look. 

Anyway, I liked the style of the sitemap, so I recreated it with sections. Here's the setup.

5930750600282112.png?k=8AQSkYfV0p0dmwYpx

Add one main container. Too allow for styling, give this the additional class "footer". Add a text section with the two social buttons shortcodes ( [pl_facebook_like] [pl_twitter_follow] ), place it to the left (and left align the text). Add another for the copyright/privacy text (right align the text). 6 columns for each text section, and font size should be around 80%.

Add another container, place it above the two text sections. Give it the class "footer-border", and add a transparent bottom border to that class (see CSS below).

Add a widget section with the three menus (you probably need a custom sidebar, I'm using the Custom Sidebar plugin). Next to it add a container again. In this container add a text section for your adress (left-align text), and a Social links section. Give the social links section the class "footer-social", left-align the text, set padding to 0.0 and set font size to 150%. Somehow the social links section escapes the opacity I set for the rest of the footer and shows as much darker, so used the custom class to adjust that to make it look nice.  Below is my full CSS/LESS for footer-styling (I prefer menu items to be normal text color instead of link color, but wanted the mailto link in my linkcolor (@linkcolor is defined at the top of my Custom LESS/CSS, you need to define it as well or just ignore that part of the styling).  

/*footer styling*/
.footer{
  opacity: .95;
 a {
    color: inherit;
    
}
  a:hover{
    color: inherit;
    text-decoration: none;
    font-weight: bold;
  } 
  a[href^="mailto"]{
    color: @linkcolor;
  }
  .footer-social{
  opacity: 0.5;
  }
  .footer-border {
  border-bottom: solid 1px rgba(0,0,0,0.2);
   
  }
}

This is what it looks like:

4837760611909632.png?k=KTCd_oW15Qy4yFKCl 

 

Share this post

Link to post
Share on other sites

chrisayers+    100

chrisayers
Posted

Great Job Audun!!! Nice to see solutions as a topic.....:geek:

Share this post

Link to post
Share on other sites
Go To Topic Listing Platform 5

  • Similar Content

    • Aires
      Tutorial: Resize the fixed header and logo on scroll
      By Aires
      Hi, 
      The rewards of pounding javascript and jquery into my brain. The css and script is at the end for you copy and paste. Remember to change the section id in the css and the script.
      This site helped me out alot  http://overapi.com/ as well as Treehouse with a touch of Lynda.
       
      Here is the screencast  http://screencast.com/t/l2tscyN7
       
       
      http://i.imgur.com/O3Wwckm.png
       
       
      #naviu4c633 {   padding: 20px 0;   -webkit-transition: padding .55s; -moz-transition: padding .55s; -ms-transition: padding .55s; -o-transition: padding .55s; transition: padding .55s;   }  
       
      <script>   jQuery(document).ready(function() {     jQuery(window).scroll(function() {       if ( jQuery(window).width() > 768) {         if (jQuery(window).scrollTop() >= 100) {             jQuery('#naviu4c633').css('padding', '0');             jQuery("#naviu4c633 img").attr("src", "your url here for mini");              } else {             jQuery('#naviu4c633').css('padding', '20px 0');             jQuery("#naviu4c633 img").attr("src", "large logo url");              }       }     });  });    </script>  
       
      ~Aires
    • vytfla
      Documentation
      By vytfla
      I just inherited a site that is currently using a child theme of Platform Pro. Is there any sort of documentation to help me navigate the folders? It's not structured by what I am used to and there are a lot of files that I can't find or hooks that I have no idea where I can edit.
    • orpheus42
      Tutorial for creating DMS sections
      By orpheus42
      Is there a tutorial available for creating new DMS sections? I have some things I'd like to include for my own use, and possibly to release to the community later on if I find them useful and get the bugs worked out, but I'd appreciate not having to figure everything out by looking through the code.
       
      Thanks!
    • Olly
      Tutorial: Building a Pagelines Child Theme from Scratch
      By Olly
      [Note - I previously started this conversation in a separate thread but I want to open it up for more discussion so am reposting here.]
       
      I am new to Pagelines and am trying to understand how build a child theme from scratch. I have some basic HTML/CSS knowldege but I am currently a beginner when it comes to PHP & Javascript. I have built some Wordpress sites before but have only ever made basic CSS modifications to an existing theme. I have never built a theme or child theme before.
       
      I want to learn how to create/customise a child theme in Pagelines but I have no idea where to start, and can't find any documentation to help me.
       
      I just watched the PDET Video tutorials. They were a little out of date but still very helpful in understanding how to create Pagelines Sections, even for a beginner coder like me. The problem is there are no more video tutorials! Sections were covered, but where are the rest of the promised videos on Themes and Plugins? We need a series of tutorials (maybe as videos) taking us though the steps of building a Pagelines child theme from scratch (or from the base child theme), similar to the sections video tutorials. I have looked at the Theming page but it does make a lot of assumptions about our knowledge. I currently don't really understand how all the different components fit together in creating a child theme.
       
      Here are my questions:
      To build a child theme for Pagelines, do we need to know Wordpress theming already? If yes, are there any good tutorials out there to take us through the process? How do all the components of a child theme fit together? How do hooks and actions fit into the design? Do we need to learn LESS before we begin? Any good resources for this? Is there an example theme that uses bootstrap available? I want to understand how to use the grid. Is it easy to take an existing Wordpress theme and convert it into a Pagelines child theme? How do I do this? Would I even want to, or is it too long-winded? What are the best tools to use? How do you see what you are doing (CSS changes etc.)? Are their any video tutorials explaining how to create child themes for Pagelines?  I like Pagelines in principle, but these days very few of us would build a WP theme from scratch for a new website - we'd simply take an existing theme and customise it. Pagelines does not appear to have much choice in this regard, since there are currently very paid few child themes available. 
       
      Thanks in advance.
×