Jump to content


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

Jared Smith

Making a border around the "Whole Site"

Recommended Posts

Jared Smith

I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:

So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage


Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  


So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.

#site {
 border:1px solid #ccc;
  margin: 100px 5% 5% 50px;

anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!

Share this post

Link to post
Share on other sites
Jared Smith

Okay, I found a way to do it. Not exactly sure WHY it works, but it does seem to.

I have the Landingpage, which is just a page (and I don't want wrapped in the border as it's a fullscreen image), which is one section of Pagelines Section Content, set to Full Width, Unwrapped. I have several other pages, which are I want wrapped in the sitewide border. On one of the wrapped pages, I went to edit, and selected "All of Type: Page".  Then I created a container, and put the pagelines content section, menu section, and a text section for header inside the container. 

I then selected 'Templates' from the pagelines dropdown at the top of the wordpress dashboard menu bar, and at the bottom under save new template, I typed in page_with_border, and hit save. And then under the dropdown 'edit' option for that container (back on the regular editor page) I took the unique section ID, and applied css border to it.  And Voila...it shows up on all the pages I wanted to have it, but not on the ONE page I didn't. 

I have no idea why, I can only surmise that it has something to do with that page's scope being set to "current page only" and that is overwriting the other pages which are set to "All of Type: Page".  Anyway, figured I'd post it here in case anyone else comes across a similar thing.


Share this post

Link to post
Share on other sites
Jared Smith

@Andrew Thanks!  So how exactly does the "Current Page Only" and "All of Type: Page" operate with each other?  Does the editor remember for each page which is selected, and apply edits based on that?  Or does it not matter which one is selected when choosing which edits to apply?

For example, on our landing page, it was set to Current Page Only, and had a specific background picture and some settings.  Later, on a different page, I selected "All of Type: Page" and changed the settings to add a container with a solid border around it.  And then SAVED that as a "template", the moment I saved it as a template, the container was applied to ALL my pages that had "AOTP" selected on their editor settings, but none of the pages that had CPO selected.

This seems somewhat unclear to me. If the AOTP doesn't actually apply it's edits to all pages, but only to pages that have AOTP selected, then isn't this more like a template? Except I can't rename it, or create multiples, and I have one "template" (AOTP setting), or just plain edit this page separately (CPO).

I'm not sure how the "real templates" work into this either. If I go create a new page, and set it to AOTP, then it loads the "real template" with it, even though I didn't go to pagelines dashboard menu, select templates, and hit the load button next to that template.  It's there by default.  I'm sure this is just my not understanding your system.

Share this post

Link to post
Share on other sites

IN WP you have different post types, and for each page or post type you can select to either set the template for just that 'post' or set it to be the same as the rest of that post type. 

For example, setting to post type scope is how you can have all your blog post layouts be the same. 

As for real templates im not sure what you're referring to.. Have you tried making some test pages and playing around with these concepts? 

Share this post

Link to post
Share on other sites

  • Similar Content

    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
      Thank you for any help,
    • FRevi
      By FRevi+
      I am trying to achieve a gallery (Envira Gallery plugin) that spans the full width of a page, within Platform 5 theme. Can't figure it out.
      The page should look roughly like this: www.frankrevi.photography/envira/favorites-2 (maybe minus the title, that's another story). This is a standalone gallery page and not part of my site. Nothing links to it.
      But instead it is this on the real page: www.frankrevi.photography/favorites.
      Currently I have the gallery in a Pagelines Framework Content section. My framework content wrap is set to unwrapped full width. I'm using all 12 columns. In Pagelines Settings, my Layout/Nav Content Width is set to 100%.
      How can I get the gallery on the real page URL to be the full page width please?
    • micstepl
      By micstepl+
      the %-setting fo "content width"  (in "Settings" > "Content With")
      is incorrect (differs) on different screen size on mobile it looks eben significant   see a screen size comparison
      I made the test with 90% (simple screenshots) all section settings - set to default see attachment  

    • janpeeters
      By janpeeters
      First let me say that I think PL5 is a great innovation. The speed is ridiculous, love it. Works on all browsers, terrific. Pages are 'clean', no lines in between sections/columns etc, great! Usability is good but I had to get used to it a bit after being on DMS1/2 for quite a while. But this is understandable with so much changes and a changed editor orientation.
      I didn't have a quite the fluent transition path from DMS2 to PL5. I thought to have read that Andrew mentioned on the forums somewhere that DMS2 would be upgradable but I guess that idea was not sustainable with all the changes. Lot's of sections disappeared from the pages when transitioning to PL5. 
      So I'm now in the proces of recreating my site from https://janpeeters.nl to https://janpeeters.nl/jms/
      My main question is this: Is there still a boxed modus available? I did find sidebar options besides 'Full width' under 'Select Layout' but no boxed mode. I've tried to set a 'Content Width' in 'Settings' and tried to enter a 'Column Basis Width' for '%main'. To no avail. I can see the Content Width setting change the width of the content but sections like Flipper still behave as full width. 
      I first thought that my Background Manager plugin might cause the problems, but it's the same when activated or deactivated. So I reactivated it.
      Some other wishes and observations:
      I would love image previews and search in the media picker. Text for images is not so great.  I have erratic behaviour in 'content height/width' fields when entering numbers. Values I enter get overwritten and I can't change them by placing the cursor in the number. I have to 'select all' the value and reenter it. I see this in Chrome. There is a 1 px shift with the overlay of Flipper. (very detaily detail) it's 1px too much to the right. Future wishes:
      More granular typography control. E.g. being able to set a different font size for flipper post-titel and date. I can do this with a child theme so no real problem, but I see my need for child themes become less with PL5 so if I could skip it why not? I was wondering if Google Font and Typekit API's would provide a way to transport their font-names into PL5 so that you can choose the linked fonts and their weights in font menu's.   Thanks for all the great work.
    • zetanet
      By zetanet+
      Look the Google tour iframe in this page:
      Is it possible to see this iframe not boxed (as you see) but in full width?