Recent
Categories
View Replies (8)

Can I overlap two images in TinyMCE

0
Votes
Undo
  1. Agabby
    Agabby
  2. Sherlock Holmes
  3. Commercial Templates
  4. Thursday, 24 April 2014
  5.  Subscribe via email
Hello,

I decided to ask here as I might get a quicker response than my hours of searching on Joomla or website for CSS Code.. I'm hoping I can over lap a button on an image using TinyMCE Editor. I'm hoping I do not have to create two different html modules to perform this task.. one for the button and the other for the image.. Please advise if you can help.. I appreciate it greatly..

April
Responses (8)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi April

Would you have a URL to a page with the button and image you wish to overlap?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Agabby
Agabby
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Ciaran,

Unfortunately not.. I am working within TinyMCE editor.. Here are examples of CSS Code I have researched but I can't seem to make this happen in editor but the overlapping does not work for me with uploaded images.. Of course I replace the source of my images..

<img id="png1" src="use your own sourcehttp://http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png"; />
<img id="png2" src="http://upload.wikimedia.org/wikipedia/commons/5/5c/Torchlight_help.png"; />
position:absolute;
z-index:0 top:0;
left:0;
;
}
#png1 {

#png2 {
position:absolute;
top:100px;
left:100px;
z-index:1;
}
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Agabby
Agabby
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Ciaran,

Now I can make it easy and just create the image, then upload to Media Mgr.. but I want to be able to assign a link to the button not the whole image. Thanks again

April
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi April

For abolute positioning to work correctly you will need to surround your images in a div with position relative set. Something like the following..


<div style"position:relative;">

	<img id="png1" src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png" />

	<img id="png2" src="http://upload.wikimedia.org/wikipedia/commons/5/5c/Torchlight_help.png" />

</div>


The CSS you can then add to the Custom CSS field of your templates parameters...


#png1 {

	position:absolute;

	z-index:0;

	top:0;

	left:0;

}

#png2 {

	position:absolute;

	top:100px;

	left:100px;

	z-index:1;

}


Ensure to use the CodeMirror editor when adding the code to an article/module.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Agabby
Agabby
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Ciaran,

Well.. no matter what editor I use code shows up as text. I thought < > meant to open and close the code. I don't understand why it appears as text? Thanks again

April
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Agabby
Agabby
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

I was able to use CodeMirror Editor and got the code below to work opposed to the other one.. the only issue now is it does not fit into or in front of the module position which is bottom -1a. How can I get it in front of the module position instead of in back of it.

<html>
<head>
<s-tyle type="text/css">
.under
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
left:40px;
top:10px;
z-index:-1;
}
</style>
</head>

<body>
<img src="my image location" width="305" height="365" class="under" />
<img src="my image location" width="118" height="34" class="over" />

</body>
</html>

Will I have to use Code Mirror as my default editor? If so I might have to find another way to install my button over static image and use TinyMCE.. Oh btw, I lost my option to view TinyMCE in English.. I have no idea what I did wrong. Thanks again for your patience.. and help

April
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi April

Any time you wish to edit this article/module it would be best to use the CodeMirror editor as other WYSIWYG editor tend to 'clean' the content on save, editing your code.

To change the order try changing the z-index setting the back image to z-index:1; and the front image to z-index:2;

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Agabby
Agabby
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for the info.. I will try this.. I'm finding that with the code the images will not appear in front of the template perimeter. This coding works behind but when I code to move into the module position

<div class="classname">
<jdoc:include type="modules" name="bottom-1a" />
</div>

it loses the coding and the image appears below the other image within the module position. Maybe my coding is incorrect.. just tried to guess..

This leads me to another question which I will post working with the template perimeters in Privilege. Thanks again for your patience and time..

April
  1. more than a month ago
  2. Commercial Templates
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok