Jump to content
colintsui

Change Width for Specific Page Template

Recommended Posts

colintsui    0
colintsui

Hi,

I love the site layout feature which i can set the site width to my preference. 920px with 600 content and 320 sidebar.

However, when I have some content on full width pages, 920px width makes it hard to read from left to right. I wonder how can I change the width for specific page templay, say "epsilon" (template #5)?

I tried the following css but it doesn't work, it made the entire content align to the left of the browser.


.epsilon {

max-width: 700px;

}

Thanks in advance for helping out.

Colin

Share this post


Link to post
Share on other sites
colintsui    0
colintsui

it changed the width to 700px though, but the entire page aligned to the left

Share this post


Link to post
Share on other sites
colintsui    0
colintsui

also is it possible to use another image as logo and align it center? Because I want to make it more like a "landing page". Thanks a lot!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, the text seems to be displaying fine on your link. Can you do a screenshot of how it is aligned and how you'd like it aligned so we can see the differences and try to target the css for you.

You can change the branding at the top of the page using this plugin http://www.pagelines.com/store/sections/featured-branding/

Otherwise you'll need to put in a full width sidebar and enter the branding logo with html into a text widget. Then hide the main site branding off the page using the meta settings.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
colintsui    0
colintsui

Hello James,

Thanks for your reply and suggestion on how to change the logo.

here is the link to the page which everything aligned left (http://roughdiet.com/fat-loss-101/), this page is using template #5 (epsilon) and I have the above css code inside custom code section.

Colin

Share this post


Link to post
Share on other sites
colintsui    0
colintsui

Hello,

just an update, I have figured this out by changing the css code to the following:


.epsilon .content-pad,

.epsilon .texture

{

max-width: 700px;

margin-left: auto;

margin-left: auto;

}

Thanks!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Excellent! I will mark this resolved for you.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

The topic was marked as resolved.


Former PageLines Moderator, Food Expert and Raconteur

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

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      http://becauze.xyz/home-five
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      http://becauze.xyz/home-four/
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      http://becauze.xyz/
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      http://www.sinclairaia.com/
      http://www.kristihanson.com/
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      Joanne
      (Longtime Pagelines-lover.)


    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Jared Smith
      By Jared Smith+
      I haven't figured out how to get the "Sync Loaded Item" option in templates menu of Platform 5 to stay checked. It doesn't give me an option to save settings when I select it, and when I select it then click off the editor, it unselects. Also if I select it before loading a template, it doesn't stay checked there either.  Whats going on?
×