Jump to content

Archived

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

colbystream

Affecting individual textbox margins

Recommended Posts

colbystream    0
colbystream

Hi,

 

I can't figure out how to insert margin between two text boxes. Let me give you feedback and what I'm looking for.

 

I've given my text boxes a background with rounded edges, so that writing can appear on top of this. I'd like there to be a small white space between each of these spaces. I figured the way I can do this is by creating my own command under the Custom menu and then applying it to the text boxes I want in the "Styling Classes" section. The section I wrote was:

 

.margin {
  margin-bottom:20px;
}
 
It's not working. I notice that if I just leave it as "margin" (and not "margin-bottom") I get a large space between the text box and the top of the "column" section that it is within. What am I doing wrong? I've tried using Firebug to locate what I'm not doing right, but can't figure it out.
 
Help much appreciated.
 
~Colby

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Are you saying you wrote the following:

 

.margin {
  margin-bottom:20px;
}
 
in the Sections Styling classes field ? If so, that isn't correct and won't work, as the styling classes field is for classes and not CSS which is what you have wrote.
 
The styling classes field only works with class names, below is an example.
 
Lets say you want to have some sections have a blue background. You would add the following to your custom CSS.
 
.my-blue-bg {
background-color: #428BCA;
}
 
Then what you would add in all your section that require a blue background would be this:
 
my-blue-bg
 
You write nothing more than the class name.
 
To resolve your issue, I think the best thing would be to provide a link to the site in question so we can see first hand what it is you're trying to do. Also, remove that code you add to the styling classes field, as it isn't correct.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
colbystream    0
colbystream

Sorry for the confusion. No, I didn't write the CSS in the styling class field. Wrote it in the custom CSS section and then referenced "margin" in the styling classes field. I'm getting a result when I write

 

margin:20px;

 

(this creates a large space at the top of the textbox) but no result when I use

 

margin-bottom:20px;

 

You can see the page here: http://arcadianporch.com/building-great-teams/

 

I want spaces between each of those grey boxes. They are each an individual textbox. Some of them are with a "column" section and some aren't; I don't have a particular preference about whether it is or not (and don't know if it would even make a difference.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Basically, your code is being overwritten. Although I don't see your margin class on any of your sections.

What you will want to do is this, here is what I used:

 

.round-corners {
  .border-radius(6px);
}
.bg-blue {
  background-color: #428BCA;
}
.text-white {
  color: #FFFFFF;
}
 
section[id].twentymb {
  margin-bottom: 20px;
}
 
I then added the classes name to the sections I want to have this styling and boom, it worked.
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
colbystream    0
colbystream

Awesome! Thank you Danny!

 

Two other notes, if you don't mind real quick.

 

1. Where does the "section[id].twentymb" portion come from. I'd like to be able to understand and duplicate myself in the future.

 

2. Between this morning when I made that page live and this afternoon, some text from the second text box completely disappeared (I wrote the text two days ago). I've noticed this sort of problem before, where stuff will just disappear. Is there someone I can report these to?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

1. See here for explanation - http://www.w3schools.com/cssref/css_selectors.asp

 

2. Other people have brought this to out attention. However, when asked no one has been able to give any of our staff, exact steps to recreate the issue. I have tried hundreds of times to recreate it and not once have I been successful.


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?
    • balfred1345
      By balfred1345
      Hi,
      I've got a client on a DMS ver. 1.1.9.1 site. Using WP 4.5.2.
      The site is clean from malware. And I've replicated the below problem with all plugins off except for DMS Pro Tools
      Here's the page: http://choralartsensemble.org/support/sponsors/
      When a textbox or column with textbox on the page are deleted, upon save and refresh one or more textboxes in the header and footer loses its content. This is a repeatable occurrence. 
      Can you please tell me how to fix this so it does not happen again? 
    • John Olsson
      By John Olsson+
      I have a problem with the regular textbox in pl5, in this case, the text goes in that container, but it will hide som of the text, as if the container itself won't fit?
      Is this some kind of bug or have I done something stupid, never happend before with pl5 doh, can I do something smart about it?
      Version: Version 5.0.108
      Look here: www.gastronova.co56.se

×