Quickedit link postion

372 Posts

briggsys Reply #1, 21 years, 1 month ago

I seem to have a problem with where the link for quick edit is placed. Seems to always be at the same height on the page, ot at the bottem of the text.

How do I change this?

a.QuickEditLink{
float:right;
clear:right;
display:block;
margin:0;
padding:1px 5px;
whitespace:nowrap;
color: #808080;
font-size:0.8em;
font-weight:normal;
text-decoration:underline;
}

[img]http://www.emanz.ac.nz/assets/images/logo/emanz-icon_16x16.gif[/img] Emergency Management Academy of New Zealand [br] http://www.emanz.ac.nz[br][br]MODx Sandbox Login: sandbox Password: castle [br]
Admin Sandbox Login: sandbox Password: castle

680 Posts

aNoble Reply #2, 21 years, 1 month ago

Quote from: briggsys at Sep 11, 2005, 10:40 PM

I seem to have a problem with where the link for quick edit is placed. Seems to always be at the same height on the page, ot at the bottem of the text.

How do I change this?
a.QuickEditLink{
float:right;
clear:right;
display:block;
margin:0;
padding:1px 5px;
whitespace:nowrap;
color: #808080;
font-size:0.8em;
font-weight:normal;
text-decoration:underline;
}

It looks to me like the clear:right; is forcing the link down below your right floated image. I’d try removing the "clear" line and see how how it looks.

Also, if you could try this instead

a.QuickEditLink{
display:block;
position:absolute;
z-index:100;
top:0;
right:0;
padding:1px 5px;
color: #808080;
font-size:0.8em;
font-weight:normal;
text-decoration:underline;
}

This will force the link to the top right corner and will ovelay anything else that happens to be there. The trick is that the parent element needs to have a position:absolute; or position:relative; otherwise it will end up in the top rigth of the whole screen.

For example:

<div style="position:relative;">
[*#content*]
</div>

I’m just doing this off of the top of my head so I might be missing something but that’s the jist of it anyway.

Adam Crownoble: obleDesign.com | [email protected] | [email protected] (Google Talk)

372 Posts

briggsys Reply #3, 21 years, 1 month ago

I ended up solving it by using <quickedit:content /> as i couldn’t get it to go in the right place with CSS. I got it to sit at the top of the content, but when I managed to get it to the botom, it moved the entire content down aprox 6 lines.

<div id="content">
      <div class="minhieght"></div>      
         [*content*]
         <quickedit:content />
      <div class="minhieghtend"></div>
   </div>

Also where do you edit the text "edit content’? searched all the files but couldnt find the words, I must have missed soemthing.

[EDIT] Solved, found it in "output.class.inc.php" line 133

<a onclick="javascript: openEditor({$pageId}, '{$cv->id}', {$moduleId});" onmouseover="javascript: highlightContent(this);" onmouseout="javascript: unhighlightContent(this);" title="Edit {$cv->description}" class="QuickEditLink">« edit {$cv->name}</a>

[img]http://www.emanz.ac.nz/assets/images/logo/emanz-icon_16x16.gif[/img] Emergency Management Academy of New Zealand [br] http://www.emanz.ac.nz[br][br]MODx Sandbox Login: sandbox Password: castle [br]
Admin Sandbox Login: sandbox Password: castle

680 Posts

aNoble Reply #4, 21 years, 1 month ago

Quote from: briggsys at Sep 12, 2005, 06:50 PM

I ended up solving it by using <quickedit:content /> as i couldn’t get it to go in the right place with CSS.

That works too.

Quote from: briggsys at Sep 12, 2005, 06:50 PM

Also where do you edit the text "edit content’? searched all the files but couldnt find the words, I must have missed soemthing.

You can hack it to change it but there really isn’t a simple place to change it. Basically what it does is it just put the word edit in front of the Template Variable’s caption. With Template Variables you can always edit the caption but with built in content like pagetitle, longtitle and content it’s basically hard wired in. I believe that we’ll be making content just another Template Variable in the future so at that point you’ll be able to change it.

Adam Crownoble: obleDesign.com | [email protected] | [email protected] (Google Talk)

372 Posts

briggsys Reply #5, 21 years, 1 month ago

Thanks aNoble, I managed to replace the text with an image. It’s not exactly a reveloution for you gurus but I’d thought I’d post it for other newbies like me

Had to use CSS as I couldn’t get <img src="edit.gif"> to work in the code itself.

First edit line 133 of "output.class.inc.php" which is in \assets\modules\quick_edit and remove "« edit {$cv->name}", I also changed title="Edit {$cv->description}" to title="Edit {$cv->name}" as I prefer the pop up to say "edit content" rather than "edit standard content"

So line 133 now looks like this:

<a onclick="javascript: openEditor({$pageId}, '{$cv->id}', {$moduleId});" onmouseover="javascript: highlightContent(this);" onmouseout="javascript: unhighlightContent(this);" title="Edit {$cv->name}" class="QuickEditLink"></a>

I then created the following in the CSS; either "output.css" or your own

a.QuickEditLink{
	display: block;
	background: url("edit.gif") no-repeat;
	background-position: top right;
	z-index: 1;
	height: 17px;
	margin:0;
	padding: 0;

The height command is required or the image wont show, also this is based on using the <quickedit:content /> method, which works better for me. It should work for other methods as well.

[img]http://www.emanz.ac.nz/assets/images/logo/emanz-icon_16x16.gif[/img] Emergency Management Academy of New Zealand [br] http://www.emanz.ac.nz[br][br]MODx Sandbox Login: sandbox Password: castle [br]
Admin Sandbox Login: sandbox Password: castle

3,250 Posts

MARKSVIRTUALDESK Reply #6, 21 years, 1 month ago

Quote from: briggsys at Sep 12, 2005, 10:29 PM

I also changed title="Edit {$cv->description}" to title="Edit {$cv->name}" as I prefer the pop up to say "edit content" rather than "edit standard content"

Try {$cv->caption} since that is what is displayed in the manager.

680 Posts

aNoble Reply #7, 21 years, 1 month ago

Quote from: briggsys at Sep 12, 2005, 10:29 PM

I managed to replace the text with an image.

That looks pretty nice. I had considered going with a edit icon like you are using, I’ve seen others do it that way, TYPO3 I think. But it was a bit concerned that it might be to confusing if you were to have a lot of editable content in a small area. I’ll see if I can some sort of ability to optionally specify an icon.

Adam Crownoble: obleDesign.com | [email protected] | [email protected] (Google Talk)

372 Posts

briggsys Reply #8, 20 years, 10 months ago

Quote from: aNoble at Sep 12, 2005, 11:34 PM

Quote from: briggsys at Sep 12, 2005, 10:29 PM

I managed to replace the text with an image.

That looks pretty nice. I had considered going with a edit icon like you are using, I’ve seen others do it that way, TYPO3 I think. But it was a bit concerned that it might be to confusing if you were to have a lot of editable content in a small area. I’ll see if I can some sort of ability to optionally specify an icon.

Did you ever mange to get an option to change the icon? Just installed 0.9.0 after cople of months of being away form this project and didn’t see it the option anywhere.

Cheers.

[img]http://www.emanz.ac.nz/assets/images/logo/emanz-icon_16x16.gif[/img] Emergency Management Academy of New Zealand [br] http://www.emanz.ac.nz[br][br]MODx Sandbox Login: sandbox Password: castle [br]
Admin Sandbox Login: sandbox Password: castle

680 Posts

aNoble Reply #9, 20 years, 10 months ago

Welcome back!

No, I havn’t gotten it done yet. I’m working on some QuickEdit stuff now, including being able to set a few options, I’ll see if I can get that into 0.9.1.

Adam Crownoble: obleDesign.com | [email protected] | [email protected] (Google Talk)

372 Posts

briggsys Reply #10, 20 years, 10 months ago

Thanks, came back and MODx as been steaming along, good to see.. only now I have to catch up

No stress, I’ll change it manually in the mean time.

Cheers.

[img]http://www.emanz.ac.nz/assets/images/logo/emanz-icon_16x16.gif[/img] Emergency Management Academy of New Zealand [br] http://www.emanz.ac.nz[br][br]MODx Sandbox Login: sandbox Password: castle [br]
Admin Sandbox Login: sandbox Password: castle