I am using JHtml::tooltip to show my tooltips in component, but the problem is in image position. I tried to add bottom:0%, bottom:0px.
So here is what i have:
I need that image would be inline with text. Here is my code:
<div class="serch">
<div class="advanced_search">
<span id="advanced_search">Advanced Search</span>
<span>
Search:
<span id="advanced_search_by_branch"><b>By Branch</b></span> |
<span id="advanced_search_by_address">By Address</span> |
<span id="advanced_search_by_tel">By Telephone Number</span>
<?php echo JHTML::tooltip('This is a tooltip attached to text', 'Text Tooltip Title', 'tooltip.png');?>
</span>
</div>
</div>
Style included here are null. Here is also source from firebug:
You can try this
.hasTip img {vertical-align: baseline;}
You could try a simple .hasTip img { margin-top: 10px; } to move it down 10px, changing that to get it just right.
You can try inline css...
<img alt="Tooltip" src="/~nonamez/joomla/media/..../tooltip.png" style="margin-top:10px;">..
Related
I am working with a 3rd party support provider and am trying to work around some limitations around what can be customized. I would like to add an HTML element (a) below a label, but only have access to css and footer html. My current idea is to add a hidden anchor in the footer and then try to reposition it via the css. I guess this MIGHT be possible with flexboxes, but my css foo is not that strong. So I figured I would come here and see if there was any way around it.
Concretely, I have a multiline textbox where users will enter their support request, and I need to insert an href to what can be asked right above it. I already have a ::before in place for some basic helper text, but I know that you cannot insert markup using css...thus my current attempt.
Is this even possible without knowing the specific location of each item...only their respective identifiers?
Here is a jsfiddle that reproduces the page as minimized as I can get it.
Again, please note that I ONLY have the ability to add HTML to the bottom of the page (in the footer element), and a global css file (shown in the separate css). That means I cannot edit the html outside the footer - that would be too easy ;)
HTML
<html id="portal_html"><head>
</head>
<body>
<div id="container">
<portal>
<div data-id="ticketForm" id="layoutContainer">
<div>
<div>
<div><h2>Submit a ticket</h2></div>
<div id="field_description">
<label for="description"><!-- react-text: 1235 -->Description<!-- /react-text --></label>
<div>
<div>
<div data-id="description">
<div id="description"><iframe name="deskEditor_New"></iframe></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footerContainer"><div id="footerContainer"><div class="Footer__footerCopyrigt">
<div class="Footer__container2">
<span>Powered by </span>
<a rel="noopener noreferrer" href="supporturl" target="_blank" class="Footer__footerLink">Support Provider</a>
<span> | </span>
<a rel="noopener noreferrer" href="terms" target="_blank" class="Footer__footerLink">Terms of Service</a>
<span> | </span>
<a rel="noopener noreferrer" href="privacy" target="_blank" class="Footer__footerLink">Privacy Policy</a>
<a rel="noopener noreferrer" href="foo">target</a>
</div>
</div>
</div></footer></portal></div></body></html>
and current css:
.ticketDetail .ConversationForm__list+.ConversationForm__list { display:none; }
div[data-id="description"]::before {
content: "Some custom content";
font-size: smaller;
}
label[for="description"], a[href="foo"]{
order:-1;
}
body {
display:flex;
flex-direction:column;
}
UPDATE
I found this SO that sadly shows flexbox will not work because they are not in the same heirarchy :/
....so I believe the answer is that this is not possible :(
Can you use JS?
const textAreaWrapper = document.querySelector('.text')
const linky = document.querySelector('[href=linky]')
document.body.insertBefore(linky, textAreaWrapper)
.someclass {
display: block;
}
.rest {
display: block;
}
.text {
display: block;
}
<span class="someclass">
<label>foo</label>
</span>
<span class="text">
<textarea></textarea>
</span>
<label class="rest">more stuff</label>
<label class="rest">even more stuff</label>
Here is a link I want above the textarea
I'm using Wordpress and I want to remove author info from a box in the footer.
This is the HTML code of the box:
<footer class="entry-footer clearfix">
: :before
<span class="entry-cats">
<span class="entry-label">
<i class="fa fa-tag">
: :before
</i>
Categorie:
</span>
Quale scegliere
</span>
<!--End .entry-tags-->
<span class="entry-separator">
: :before
/
</span>
<a class="entry-comments" href="#">Nessuna risposta</a>
<span class="entry-separator">/</span>
di
<a class="entry-author" href="http://ec2-52-57-169-182.eu-central-1.compute.amazonaws.com/author/user/">Admin</a>
: :after
</footer>
This is the image of
Footer box
I just removed author name directly in CSS with:
.entry-author{
display:none !important;
}
Now I need to remove the slash between "Nessuna risposta" and also the word "di" (in English "by").
I don't know how to do because this is text and not a class.
Firefox Inspector show the text as #text
If you want to watch it directly on the website, go here and later go down on the page.
Thanks.
For the slash it's a.entry-comments + span.entry-separator: { display: none; }
For the word "di" it would be best to wrap it in a span and assign that a class, which you can hide with display: none;.
I am designing this for a phone gap application..i want to code this in html..
i have two questions..
Q1)how do i place a text on the image at different positions?
suc as text1,text2,text3,text4 in the image given here.
Q2) how to place it at the centre in the page.i had given
<img src="img/img1.png" style="margin-left:5px;" />
<img align="middle" />
but,this makes no difference.
guidance required.please help.
i have another doubt...after running the program....there is the extension part of the body after the footer...if you drag up....you can see thtat the body that is between the header and footer is extended. and it moves evento the right.
any mistake in the coding?
put them in a Div, then give this Div a background style ;)
the code should be like this:
<div id='container'>
<span> text 1 </span>
<span> text 2 </span>
<span> text 3 </span>
<span> text 4 </span>
</div>
in the css:
#container{background:url(path/to/img) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; height:...px; width:...px;}
#container span{width:50%; height:25%;display:block; overflow:hidden;float:left;}
you can add border to the spans, color etc...
You can do that by wrapping image with div and z-index. Your code should look like this:
<div style="position:fixed; top:10px; left:5px; z-index:250; width:ofimage; height:of image;">
<span style="display:block; width:30; height:20; margins if you need; float:left">text1</span>
<span style it accordingly and add float left>text2</span><br>
<spanstyle them as first two>text3</span>
<span>text4</span>
</div>
<img src="your image" style="if any">
I have:
name: james
but I want to be shown as:
name:
james
Here's a live example of this
HTML markup:
<p>
<span class="bla">name:</span>
<span class="bla">james</span>
</p>
CSS markup:
.bla {
display: inline-block;
}
Thanks in advance
inline-block isn't going to achieve what you are after, if you are wanting to do this by adding styles to the .bla class. Try changing it to display:block instead.
See my Example: http://jsfiddle.net/n1ck/NNpqq/1/
.bla {
display: block;
}
Or you can add some markup:
http://jsfiddle.net/n1ck/NNpqq/5/
<p>
<span class="bla">name:</span> <br />
<span class="bla">james</span>
</p>
How about
<p>
<span class="bla">name:</span><br/>
<span class="bla">james</span>
</p>
http://jsfiddle.net/luissanchezm86/NNpqq/
You can try
.bla {
display:block;
}
That's what breaks are for good sir.
<p>
name:<br/>james
</p>
http://jsfiddle.net/NNpqq/4/
Just put:
<p>name:<br/>James</p>
... and you can get rid of the CSS. If you need to adjust line-height, apply it on the "br" tag via CSS.
As a sidenote, don't repeat the "bla" class in your HTML markup (unless you have a specific reason to do so). You can reach it through the <p> parent to reduce markup and make your code cleaner:
CSS:
p.bla {}
p.bla span {}
HTML:
<p class="bla">
<span></span>
<span></span>
</p>
In my jQuery themebuilder built theme I have 5 different ui-icons_* files.
Two of them are in an orange shade corresponding to the highlight color.
I want to use an orange icon as a bullet.
My first attempt gives the icon on it's own row.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" ></span>
Meeting
</div>
My second attempt gives the icon but not aligned properly.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
Adding the following style makes the text align with the icon:
.heading { vertical-align: top; }
http://jsfiddle.net/rypyP/1/
The color i want is in the ui-state-active set, so if I add that state to the containing unit it gets the correct color, but with the whole enchilada (border, background color, text color) and I just want the bullet point orange.
<div class="heading ui-state-active">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
http://jsfiddle.net/MEXQV/1/
Can I get just the icon from a particular ui-state in a jQuery theme without rewriting the css?
If that is not possible, what way would you suggest and why?
SOLUTION
Stylesheet:
.heading
{
vertical-align: top;
}
Html:
<div class="heading">
<span class="ui-state-active" style="border: 0px">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block; border: 0px">
</span>
</span>
Meeting
</div>
http://jsfiddle.net/rypyP/4/
If you just want to get the icon of a particular ui-state, you can do this:
<div class="heading">
<span class="ui-state-active ui-icon ui-icon-triangle-1-e " style="display:inline-block"></span>
Meeting</div>
What it does is it will look the specified icon on jQuery's default theme icon set (it has four icon sets by default -- active, default, highlight, and error). If you want to remove the borders etc, you'll have to override the ui-state class in your own css, e.g: adding .ui-state-active { border: 0px; }
Thanks.