Jump to content
Sign in to follow this  
glamfish

Blog and category pages full width?

Recommended Posts

johnathan
You might not need CSS. Try this out: Go to your Dashboard, then click on Posts. Select the Blog post you want to be full width and click Edit on it. Now, below the text you wrote for the post, there's a section called "Select Page Layout". Here you can select if it should be full width or include sidebar etc. You can also do down further and click on "Hide Sidebar" etc. Hope that helps :) If not, good luck!

Share this post


Link to post
Share on other sites
glamfish
Hi, no it doesn't help. I want everything to be aligned with the menu. Ah, sorry if I sound confused, but this whole theme wasn't as easy as I thought it would be. Here is how it looks now: http://sandofilm.com/category/showreel/ And here's the blog post itself: http://sandofilm.com/firoz-a-rock-n-roll-documentary-teaser/ I want it to stretch to the sides, like on this site: http://thereasonilove.com/blog/ Selecting full width doesn't do that. This whole thing is very confusing. I sat the width of the content area (no sidebars) to 800 px. All the videos are 800 px wide, so they should be aligned with the menu out to the sides after the CSS recipe I got from the other guy (don't know why I would need CSS for this. It's a drag and drop theme...). Still, the video had black stripes on top and bottom. It was squeezed. So, I tried to fiddle around with the theme and sat the width to 824px. And now the video is aligned! Like you can see here: http://sandofilm.com/ BUT! THE THEME IS NOT 824PX WIDE! I have measured, and it is about 796px wide. What's going on?? Very difficult to get what I want with this theme. I thought the point was to make all of this easy.

Share this post


Link to post
Share on other sites
Danny
Try adding this to your custom css please. [code].content-pad { padding: 0 !important; width: 800px !important; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glamfish
Thank you, but now it looks totally messed up: http://sandofilm.com/

Share this post


Link to post
Share on other sites
glamfish
This is in my CSS rules now: body{} .home .fullwidth #column-main .mcolumn-pad {padding-right: 0px !important;padding-left: 0px !important;} .home .hentry-pad {padding: 0 0px 25px !important;} .content-pad { padding: 0 !important; width: 800px !important; }

Share this post


Link to post
Share on other sites
catrina
You can take out the .content-pad CSS. In your layout settings, does the value continue to say 800px or does the value change?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
glamfish
Thanks, I realize I can take it out, and the front page is ok now, even though I've set the width to 824, while the video is 800. But, I want ALL THE BLOGS pages to look like the front page: http://sandofilm.com/ http://sandofilm.com/kosmetisk-kirurgi/ http://sandofilm.com/blog/ http://sandofilm.com/category/showreel/ http://sandofilm.com/test-page/ And so on... You see? They don't look like the first page. I want the images to stretch the whole length of the menu bar like on the Home page. I would also like to remove the 'BY ADMIN ON FEBRUARY 6, 2012 ?· LEAVE A COMMENT ?· IN DOCUMENTARY, SHOWREEL' part and preferably the 'Currently viewing the category: "Showreel"' part and replace that with only 'CATEGORY: SHOWREEL'. I can't find anywhere to modify that. I thought I found it, and removed some stuff, but it's still there. I want a clean site with aligned sides. [-O< Hope that is possible. :) Best, Harald

Share this post


Link to post
Share on other sites
Danny
Hi Harald, You have this code in your custom CSS: [code].home .fullwidth #column-main .mcolumn-pad { padding-right: 0px !important; padding-left: 0px !important; }[/code] Basically, due to the .home the CSS is only effecting your homepage. Therefore, if you replace the above code with the following, it should effect all pages, posts and categories. [code].fullwidth #column-main .mcolumn-pad { padding-right: 0px !important; padding-left: 0px !important; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glamfish
Hi, it still doesn't work. I want my page to look like THIS ONE: http://thereasonilove.com/blog/ They use Vimeo, and all their pages align with the menu bar at the top. How to I get that? When you look at mine now, it's obviously not that: http://sandofilm.com/ I can't see why this should be so difficult. :-/ Best, Harald

Share this post


Link to post
Share on other sites
Rob
Harald, on the subject of the Meta bar (By Admin... etc.), you simply need to go to Dashboard > PageLines > Settings > Blog and Posts and go to "Full Width Post Meta" and in the line there, remove everything you do not want. As I look at your site, I see it, you need to add this to your CSS: [code].content-pad { padding: 0; }[/code] I tested this in your CSS live and it brings the width of the post to the full width of the content pad. It lines up exactly with the menu. If you want the video or images to right to the edge, you need to add this: [code].hentry-pad { padding: 0 0 25px; }[/code] Your website uses a different system than the one you cited first in this topic. You're using a canvas mode, which shows a background color that offsets the view and makes any padding stand out. Now, if you add those two snippets, you should see the image and post text to go right to the edge, as seen here: http://sandofilm.com/blog/ All other settings should be customized via Dashboard > PageLines > Settings, including the width of the site.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
glamfish
WOW, thank you, thank you, thank you! Finally! Someone who understood what I wanted. :-)) The only thing that is left is to get the logo 'sand?? film' left aligned... Anyone? And when it comes to the metabar, I have removed everything in that field, but it still shows up.

Share this post


Link to post
Share on other sites
Rob
Harald, you really need to get Firebug. This is so easy. The code below will move the branding logo flush left with everything else. [code].fixed_width #branding .content-pad { padding: 0; }[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
glamfish
Thanks, but it also got squeezed up, as you can see. Wrong height distance. http://sandofilm.com/ How will firebug make this easier as I have no idea what codes to write...?

Share this post


Link to post
Share on other sites
catrina
For more insight on how Firebug can help you, please see this documentation: http://www.pagelines.com/wiki/Custom_CSS#How_to_use_CSS_Inspection_Tools

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Rob
Catrina's link is your best bet for learning the basics of Firebug. Meanwhile, here's a replacement: [code].fixed_width #branding .content-pad { padding: 40px 0 5px; }[/code] The 40px may be changed (affects the top space over the branding image, making more white space above. The 0 is the left alignment and the 5px puts a small space between the branding and the menu. You can adjust the 40 and 5 as much as you, wish but I'd recommend leaving the 0 alone as that was the trick to get the alignment straight on the left.

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

Sign in to follow this  

×