SportsEngine Community Forum
Register Latest Topics
 
 
 


Reply
  Author   Comment  
jasondeanny

Junior Member
Registered:
Posts: 6
Reply with quote  #1 
I have a section on our home page labeled "Quick Links"  and there are five Links stacked on top of each other. I wanted to tighten up the space so there wasn't as much null space around each link.

Is there a way to change the pitch between links? links.png

gwipper

Junior Member
Registered:
Posts: 9
Reply with quote  #2 
Great question and would love to know this as well.   It would be also handy for the space between titles and text elements.
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #3 
I think this is probably do-able, but since each link comes in as a separate page element, this becomes pretty tricky. Each page element would have to be identified in the page's code, and then the spacing between those specific page elements would have to be manipulated. 

Well above my skill level, but I'm curious if anyone has a solution for this as well.
kpetersatl

Junior Member
Registered:
Posts: 1
Reply with quote  #4 
In case you haven't managed a solution for this yet...

To reduce the invisible/blank/white space between each link, modify the top and bottom margins of the containing div element (currently at 15px). 

Code:

 <style>
.pageElement.linkElement {
    margin: 10px 0px;
}
</style>

Or

Code:

<style>
.pageElement.linkElement {
    margin: 10px 0px 10px 0px;
}
</style>

Or

Code:

<style>
.pageElement.linkElement {
    margin-top: 10px;
    margin-bottom: 10px;
}
</style>

If you're referring to the orange color, you'll want to modify the padding of the a element (though doing so will just create even more white space between links).

Code:

<style>
.linkElement h4 a {
    padding-top: 5px;
    padding-bottom: 5px;
}
</style>

The modified styling will most likely be applied to any other Link page element, though there are currently no others that I could see. If that's a problem there are ways around it (specifying parent containers, etc.), but this was the easiest/simplest fix I could come up with given the example.
docnzok

Moderator
Registered:
Posts: 45
Reply with quote  #5 
Excellent work kpetersatl.

I would add the following.


If you add the style code to the cascading <head> code option (in page options) you will apply that style to that and every page underneath it in the menu system.

If you only want to apply it to a single page, use the section above that called Single Page <head> Code

So if you see something in the pages under that page, try just modifying the head code for that page and see if it fixes it.

Otherwise kpetersatl's CSS code is great and works!

Let either one of us know if we can help further.

Mark
jasondeanny

Junior Member
Registered:
Posts: 6
Reply with quote  #6 
I tried all of the code snippets above by copying and pasting into the Single Page <HEAD> Code section. Unfortunately none appeared to modify the space surrounding the LINK elements I have that are stacked on each other. I can only guess something else is overriding this code.

Best guess is there is padding around all elements which is global to the site and won't allow specific elements to be modified. The pitch between the links appears consistent between all elements on the page.

Any other suggestions?
______________________________
6/20/17

OK Forget everything above this line... I came back to it and tried it again and it works! kpetersatl you're a genius! I'm trying to work on some other minor tweaks on the two sites I manage and using this post as a template. I owe you a drink!
Previous Topic | Next Topic
Print
Reply

Quick Navigation: