Jump to content
Sign in to follow this  
cybersphere

CSS Code request for paragraph spacing in Page

Recommended Posts

cybersphere

Hi, Please take a look at the below screen shot. Please note the WordPress page behind the screen shot also. Z6tfH.jpg I would like to adjust the spacing between

and

headings (indicated with green box). I want to have a bit more of a gap between them. If I use the
html code OR press Enter one more time, it places a huge gap and that is too much space for me. Secondly, I would like to reduce the gap between all the bullet points (indicated with red box). If you are good with CSS, I would appreciate you sharing your knowledge with me. Thanks, Paul

Share this post


Link to post
Share on other sites
Andrew
Hey Paul, Just use Chrome inpector tools to inspect them.. you can actually edit the css rules right there in your browser and test changes.. Im guessing you should be able to fix with: [code].hentry ul li{ rule } .hentry h1{ rule}[/code]

Share this post


Link to post
Share on other sites
cybersphere
Hi arpowers - Thanks for your reply. I have a little problem... I don't want to modify the php as that means when PageLines is updated to a newer version, that php page will need to be modified and the issue will keep on surfacing. Therefore my preference for CSS codes... unfortunately, I have no idea how to write them. This is why I am now living on this support forum! :) [IMG]http://i.imgur.com/MdsXv.jpg[/IMG] As you can see, I have located the .hentry li you mentioned. And I was able to adjust the height for the bullet points BUT I don't know how to make this happen with CSS codes. As for the gap between

and

, I was not even able to find the code that adjusted the gap. The site address is: http://justitia.com.au/web/products Many thanks for your support! Paul

Share this post


Link to post
Share on other sites
Rob
Paul, if you copy the CSS element you see in Firebug, put it into a temporary Notepad file, do the editing you want, then just copy it again (edited) and go to Dashboard > PageLines > Settings > Custom Code. There's a text box there for "CSS Rules". Paste the code there. Save it. The CSS Rules section will dynamically override CSS found in any other .css file, often including ones added by plugins. If you look at some of the elements in your page, you'll see on the right hand Firebug box "dynamic.css" and some element may have strike through text. That happens when the dynamic nature of the CSS Rules area overrides the basic styling and implements your preference. I hope this helps you. It's a very nice site you're building.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
This might be the element for the unordered list. Keep in mind, CSS is not my better skill. [code].hentry ul, .hentry ol { margin: 1.7em 0 1.7em 16px; }[/code] You might want to change the 1.7 to 1.2 to see how that goes (both instances) as I think that's the top and bottom, but don't quote me on that.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
cybersphere
@rangelone - Wow! You have just opened my eyes!! Thanks a million!! With your guidance, I tried what you suggested in your 2nd last post (ignoring the last post) just to see if I got what you were saying. I opened up Firebug in Firefox and located the code on the right-hand side. I messed around with couple of variables until I got the look just the way I like it. Then, I copied the code and stuck it in the CSS Code. /* Adjusts gap between bullet point text */ .hentry li { margin: 0.1em 0; } This above code fixed the bullet point spacing. Unfortunately, I was not able to figure out the gap between

and

- the green gap in my original post. I tried placing a blank line between the two headings now and trying to figure it out. This one might be a different story as there is no code that just applies to the gap. Whatever I change here, it will change all the headings. Paul PS. Thank you for your kind words re: website.

Share this post


Link to post
Share on other sites
cybersphere
In regards to the gap between headings... I found something interesting. Please note the below image... when I select 'Our Products' (h1), it is only as tall as the text. [IMG]http://i.imgur.com/3b8is.jpg[/IMG] Now note the next one... all I did in the 'Product' page was to press [Return] key once and added a blank line. When you see that in Firebug, you can clearly see the yellow padding surrounding the invisible text (  or &no-break-space). [IMG]http://i.imgur.com/3gOpo.jpg[/IMG] And for comparison, I have clicked on a heading 'Contracts' (h3) and that is same as H1 and there are no padding above and below the line. So, where is this padding coming from? [IMG]http://i.imgur.com/HTSwh.jpg[/IMG] Can anyone help me find the source code for that yellow padding? I want to get rid of that yellow padding to zero! Thank you! Paul

Share this post


Link to post
Share on other sites
Rob
Paul, It was a pleasure! I'm glad I was able to help. Now as for that big gap between "Our Products" and "Contracts", As I see it, when you press "Return" key, it's acting as a carriage return and adding a line. You see this in Firebug as [code]

[/code] If you return to the edit field where you typed Products and click at the very end of the word, click the delete key. Don't hit return again. Instead, move your cursor to Update and click there. I think that should get rid of the extra line. Meanwhile, I'll look into the extra "yellow" padding.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
I think it's something with one of these two. Remember, CSS is not my better skill. However, if I use Firebug on the empty line (the carriage return and non-breaking space), I see this in the CSS on the right. [code]p { orphans: 4; } p, .p, .hentry ul, .hentry ol { margin: 1.71429em 0; }[/code] I suspect it may be the 1.71429em... But I'm not absolutely sure. Please forgive my lack of expertise in this field. I'm much better at broad picture issues having been a management consultant for 3 decades.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
cybersphere
For someone who is not good at 'small' stuff, you are pretty good at it. I can only imagine you will be a 'gun' at 'big' stuff consulting stuff! :) Good news and a bad news. Good news is, the gap has reduced. The bad news is, it broke the bullet point alignment (it is now sticking into the left margin). The site address is: http://justitia.com.au/web/products

Share this post


Link to post
Share on other sites
Jenny
What css have you used so far? Could you paste it please?

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
cybersphere
Hi Guru_Mama! Here it it. /* Adjusts gap between bullet point text */ .hentry li { margin: 0.1em 0; } /* Adjusts gap above and below blank text lines */ p { orphans: 4; } p, .p, .hentry ul, .hentry ol { margin: 0em 0; } First CSS was fine... bullets lined up properly. The 2nd one killed the bullet margin. Paul

Share this post


Link to post
Share on other sites
Jenny
haha! Okay.. remove ALL of the CSS above from your custom code (I have updated/included it below) and use the following: [code]/* Adjusts gap between bullet point text */ .hentry li { margin: 0.1em 0 !important; } /* Adjusts gap above and below blank text lines */ p, .p, .hentry ul, .hentry ol { margin: 0 !important; } /* Adjusts gap above and to the left of bulelts */ .hentry ul, .hentry ol { margin: 20px 0 0 25px !important; }[/code] You have a blank line after your bullet-ed list so make sure you do that from now on or you won't have a gap underneath. :)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
cybersphere
...and that is why I call you Guru_Mama! Thank you very much!! Your codes are your super powers!! :)

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  

×