Edit Buttons

[shick11sp]

I was having a bunch of trouble getting the edit buttons to line up properly with the content they were meant to edit. They were doing different things when I would edit the css, such as bunching up one over top of the other, making the buttons indistinguishable as to which content they were meant for.

I discovered a solution that makes it work for my usage, but if someone has a better way to achieve the same result, please inform me. First I made the content area position:relative, and then changed the nc-cms cp.css file:

Code: Select all

a.nc_edit
{
   font-size: 10px !important;
   text-decoration: none !important;
   text-transform: none !important;
   border: none !important;
   float:left !important;
   line-height: 12px !important;
   margin:7px -40px !important;
}

This allowed the edit button to go:

site.gif (55.46 KiB) Viewed 576 times

(please excuse the hideous design, the client wants what he wants )

which in my opinion seems to flow better with the editable content areas.

This seems to have turned from a suggestion into just me rambling, as I know this wouldn't be universally necessary in NC-CMS, however, I hope someone else can use this same solution if they are having similar issues.

Please tell me if there is a better solution to this issue...

Thanks Nathaniel! I've been searching for a CMS just like this for a long time, and I'm glad I finally found NC-CMS!

[shick11sp]

after moving on to my other pages, I realized this fix only worked on a page where both elements were floated to the left....

Does anyone else have any other suggestions for how they work around any edit button issues?

Feel free to move this post Nathaniel!

[Nathaniel Sabanski]

Greetings, shick11sp! Thank you for the compliments!

You're on the right track in terms of overriding the CSS code to get the results you want! Due to the inherit quirkyness and open endedness of website development, it is impossible to create a back-end system with perfect front-end usability for every website design by default.

We realize this, and for this reason, we keep the source code of this project universal, simple and open. Enabling any needed customizations such as your own above to be done easily on a per-project basis.

[shick11sp]

I really appreciate the reply Nathaniel.

I'm not sure if this would screw up the way that people already use the system or not, but what about fixing the "Edit" buttons to the upper right hand corner of the screen, such as underneath the NC-CMS menu bar, and then dynamically titling each of the "Edit" buttons based on the name of the area they each were meant to edit? It doesn't necessarily have to be part of the system, because I'm sure for a traditional layout, the current method works fine, just a thought on my part.

For example, on the picture I posted, say you could title the edit buttons 'Headlines' and 'Recap' so that each button had a specific purpose.

Does that make sense? Here's a sample of my idea on another site I'm testing NC on:



I'm not sure of the best way to achieve this. Being relatively new to even seeing php, it would probably be easily achieved to add a dynamic title based on the name of the file storing that areas content, but I wouldn't know how to start lol. If you could point me in the right direction, I'd be happy to try to make it work, but I may need a little help getting there.

Thanks again!

[shick11sp]

After looking around the system, I think I found what I needed in the system\modules\cms.php file.

On line 93 of this file, I changed the following from:

Code: Select all

if($nc_login_state) // Edit mode is on, load the editor
      $output .= '<a href="'.nc_get_cms_path_relative().'/index.php?action=edit_html&amp;name='.$name.'" class="nc_edit"><img src="'.nc_get_cms_path_relative().'/system/images/edit.png" alt="Log In" title="Log In" border="0"/></a>';

to this:

Code: Select all

if($nc_login_state) // Edit mode is on, load the editor
      $output .= '<a href="'.nc_get_cms_path_relative().'/index.php?action=edit_html&amp;name='.$name.'" class="nc_edit"><img src="'.nc_get_cms_path_relative().'/system/images/edit.png" alt="Log In" title="Log In" border="0"/></a><p>'.$name.'</p>';

This output the name of the specific editable area.

The problem I face now is how to get each edit button into the same place.

I tried doing this:

Code: Select all

if($nc_login_state) // Edit mode is on, load the editor
      $output .= '<div class="edit_buttons"><a href="'.nc_get_cms_path_relative().'/index.php?action=edit_html&amp;name='.$name.'" class="nc_edit"><img src="'.nc_get_cms_path_relative().'/system/images/edit.png" alt="Log In" title="Log In" border="0"/></a><p>'.$name.'</p></div>';

but as you know, this generates several of these divs, while what I want to do is to round all the edit buttons into one specified div where I can float them side by side as shown in the picture in my previous post.

I can't quite seem to wrap my head around a solution, as all the buttons are generated in separate parts of the documents. Let me know if I'm going the right way, or if i'm overlooking some simple solution.

Thanks!

[Nathaniel Sabanski]

I would recommend assigning a custom CSS style to the edit buttons and using CSS to position them to the top right.

Something like this:

Code: Select all

$output .= '<div class ="custom_editor_button"><a href="'.nc_get_cms_path_relative().'/index.php?action=edit_html&amp;name='.$name.'" class="nc_edit">'.$name.'</a></div>';

As for positioning in the upper corner using CSS, use something similar to the class "nc_cp" in system/css/cp.css. The important attributes are:

Code: Select all

position: fixed;
right: 0;
top: 0;

As a secondary option, you could use jQuery in order to reposition tags within the <body> that are assigned to a specific CSS class.

[shick11sp]

I understand the concept your describing, and it looks to be quite similar to what I figured it needs to be, unless I'm reading it incorrectly.

However that CSS would merely stack all the images into the top right corner on top of one another, correct? I'll have to look into that jquery solution!

I apologize if I'm over complicating something simple

[Nathaniel Sabanski]

I haven't tested it, but you're most likely correct about the stacking as that would make sense. Like you've mentioned, it may be best to simply fall back to the magic wand we call jQuery.