CSS – Font Margins

  • Resolved dmpub

    (@dmpub)


    6 years, 4 months ago

    Hi – love your plug-in, many thanks for all the work you’ve put into it.

    I’m just now learning it. I am trying to add space above and below text, so I’ve created an entry in the Custom CSS (I’m using the latest WordPress and version of your plug-in, having just downloaded it today)

    .tablepress .date {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #ff0000;
	margin-bottom: 5px;
	margin-top: 35px;
}

    and then add a span statement around the text I wish to modify. For testing purposes, I’ve also changed the font size and color, to be sure that changes I make to the CSS are working through to the final table (the top table on the sample page).

    As you can see, I’ve set margin-top to a crazy-large number, but it is being ignored.

    How can I get this working? I should add that I know very very little about CSS, so please if you could provide as easy-to-follow answer as possible, it would be very much appreciated.

    Many thanks indeed

    David.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    The reason for this is that <span>s are in some way special, as they use a “display mode” that doesn’t “understand” margins. You can however change that, by also adding the command

    display: inline-block;

    to your CSS command.

    Regards,
    Tobias

    Thread Starter dmpub

    (@dmpub)

    Perfect, thank you, totally solved the issue. Thank you also for your lightning fast reply.

    May I ask one more semi-related question.

    I wish to add spacing to the text in all the cells between each paragraph.

    I have this in the Custom CSS

    .tablepress tbody td {
	
}

    but I don’t know what to put in the code. The margin-bottom doesn’t seem to work there, either.

    Should I add the display: inline-block parameter as well to that CSS?

    Many further thanks

    David.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi David,

    I’m not sure what you mean. Where exactly do you want extra spacing?

    Regards,
    Tobias

    Thread Starter dmpub

    (@dmpub)

    Hi, Tobias

    Sorry not to write clearly. It is surely frustrating for you to have to spend more time when a request/question isn’t clearly phrased.

    Please have a look at my sample page. Scroll down a little bit to Wednesday 5 June.

    There are three paragraphs in the right hand column. I have copied them here and put double carriage returns between them so you can clearly see them. In the table, I’ve just put single carriage returns because I don’t want a double space, just a moderate amount of space between each paragraph. But no extra space appears, and it looks for all the world like one big paragraph.

    (sample text follows)

    Today is going to be a relaxing and beautiful day of touring around the lovely Lake District.

    Maybe you’ll want to take an old steamer across Lake Windermere. Maybe you’ll want to visit some of the other lovely villages and towns. Maybe you’ll want to go hiking across some of the pathways in the area.

    We’ll be there to help you with whatever it is you wish to do.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for the explanation, now I see what you mean! I’m afraid that this is not directly possible like that. You will first have to add a HTML element around the individual sentences, to which we can apply the extra space.

    For example, wrap the sentences with HTML <p> tags, like

    <p>Today is going to be a relaxing and beautiful day of touring around the lovely Lake District.</p>

    Then, you can add this CSS to fix the spacing:

    .tablepress-id-1 .column-2 p {
  margin-bottom: -1em;
}

    (That value is indeed negative, as we need to take into account the line break between the paragraph – unless you remove that.)

    Regards,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS – Font Margins’ is closed to new replies.

Tags