As the sidebar has a fixed width, when you use related links, the 'Add' button gets cropped. The solution is pretty simple, I just needed to add a little snippet of CSS to make the sidebar wider:
width: 50% !important;
All I needed was a way is to inject the CSS, read on to learn how
You may never have noticed, but, whenever you add a third-party Umbraco package in the majority of situations, additional CSS is also injected. If you want to add custom CSS and JS, then all you need to do is follow the steps to create a custom Umbraco package.
First, create a folder within your App_Plugins folder. You can call it whatever you want, I'm calling mine 'CustomCSS':
In the folder, you will need to create two files, package.manifest - the package definition file - which will define where Umbraco will look for your custom stylesheet and JS and a stylesheet to add my custom style and the stylesheet itself.
Your manifest file will need to add the following config:
As you can probably tell within the manifest file you can add links to CSS and JS files. As I only needed to add CSS then I'm only linking to that. After adding my style I mentioned above into style.css and reloading my Umbraco backend. MY CSS is injected and now my doc type editor stops cropping the sidebar.
That's it... CSS injected.. simples
Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge