function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Paul AllsoppPaul Allsopp 

Lightning look

I have created a replacement page for the Account home page object, but have an issue with it matching the current Account home page. Does anyone know what the design component objects used there are?

One issue I have is: the page seems to have a border(margins) around it (see pics) which I just cannot clear.

User-added image
See how there is a marging around the content?


Also on this image 
User-added image

If you compare this with an original lightning page
User-added image

See how in that last image, the card or whatever component it is, butts right up to the navigator?
That's what I'm trying to get...a replacement page that looks like the original, design-wise.

Thank for any help.
Paul
 
Best Answer chosen by Paul Allsopp
James LoghryJames Loghry
If you cntrl+click or right+click on the div, you'll find all sorts of information about the element and how it relates to the DOM of your page.  You'll want to pay close attention to the margin and padding, as this is likely the culprit of the spacing on your Account page.  You can also use the inspection to figure out how the buttons in your first example are configured and what css classes, etc are used for styling them.

When you are inspecting the DOM, you can tweak the margins and padding directly in Chrome (as an example).  One you have the right values, you can then apply them to your Visualforce page or Lightning component.

All Answers

James LoghryJames Loghry
If you cntrl+click or right+click on the div, you'll find all sorts of information about the element and how it relates to the DOM of your page.  You'll want to pay close attention to the margin and padding, as this is likely the culprit of the spacing on your Account page.  You can also use the inspection to figure out how the buttons in your first example are configured and what css classes, etc are used for styling them.

When you are inspecting the DOM, you can tweak the margins and padding directly in Chrome (as an example).  One you have the right values, you can then apply them to your Visualforce page or Lightning component.
This was selected as the best answer
Paul AllsoppPaul Allsopp
Thanks for the info, I'll take a look at it