Jump to content

Archived

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

Claude203

WHP6: Size/margins of post clips in Magazine Layout Mode

Recommended Posts

Claude203

Is it possible to control the size and margins of the post clips in Magazine Layout Mode? The CSS for Post Clips seems to be the same as in the Full Width Posts, but actually I would like to force the Post Clips to be square (or a standard shape) so that they fall nicely next to one another, and therefore I also would like to change the margins for only those (but not the Full Width Posts).

 

Thank you.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Danny

HI,

 

Can you provide a link to the site in question so we can see first hand what it is you're referring too please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Claude203

Hi Danny, actually I am doing this on our local MAMP server so it's hard to give a link, but here is the screen shot.

 

https://drive.google.com/file/d/0B7KYcnlvUDOLNVBZbzRUZGJiWGc/edit?usp=sharing

 

I'm just trying to nudge the Post Clips closer to one another, and make them uniform in size/dimensions.

 

Thank you.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Danny

In order to do that, you're going to need to target each one of the magazine clips and add a negative margin. This isn't something I would recommend doing as it will screw up your responsive layout and require extensive CSS to fix.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Claude203

Got it. But in any can I would still like to know how to target the magazine clips without changing the full width posts?


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Danny

Well they don't actually have a unique class between them so that you can target a specific one, thats the problem. So the only thing you can try (untested my me) is to use the :nth pseudo class. For more information on how to use these pseudo classes see here - http://www.w3schools.com/cssref/sel_nth-child.asp

 

Please be aware that this is considered extensive customization and we will not be able to assist you further.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Claude203

OK, thanks. I took your advice and avoided the nth-child class. Instead I took care of it a different way. I removed the box shadows and focused on the clip box container:

 

#site .clip_box {
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 20px 0px 10px;
border:1px solid #888888;
}
 
With the result that there is a little more uniformity and less random boxes.
 
 
Again, thank you very much! (I'm slowly getting better at this but far from "ninja" status!

Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Danny

HAHA, no problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • 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,
      Perry
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
    • janpeeters
      By janpeeters
      I've searched the forum but couldn't find any other reports.
      When I enlarge the margin-top in the editor of a text box also margin-left gets enlarged. I would think that's an unwanted behaviour. You can see this here:
      https://goo.gl/OzMA7Z
      Jan
    • Mats
      By Mats
      Hi,
       
      I have used the following code in the customize plugin style.css to adjust my typography however there seems to be a lot of padding on top and below my headings as you can see in the link below and attached screenshot.
       
      h1 {
      padding:0;
      margin-bottom: 0px;
      margin-top: 0px;
      line-height: 1;
        !important;

       
      h2 {
      padding:0;
      margin-bottom: 0px;
      margin-top: 0px;
      line-height: 1,2;
       !important;
        }
       
      h3 {
      padding:0;
      margin-bottom: 0px;
      margin-top: 0px;
      line-height: 1,2;
       !important;
        }
       
      However there still seems to be a lot of padding on the top and the bottom of my headings. See webpage and attached screenshot.
       
      http://www.stallhultman.se/traningskoncept/
       
       
       
       
       
×