I am loading a long text from a database into a Django template. This string contains a url https://yyyyyy as part of the text. I use django's urlize in order to display the url as actual links, however adding urlize is causing the entire text including the link to change color to blue. Removing the urlize leaves the text as black. I only want the text to be black. How can I stop this color from changing to blue while using urlize?
Here is my implementation :
<p style="font-size: 15px; color: black" class="tm-pt-30">
{{ value.description | safe | urlize }}
</p>
The class tm-pt-30 is only responsible for padding.
#raphael was right. My problem is I had wrapped the entire card containing the code in the question with <a></a> in order to make the whole card clickable. The fix for this was only wrapping the appropriate elements.
Related
I have a set of popovers that show supplemental info upon hovering. They display, but only the first word of the string.
template:
<a data-toggle="popover" data-trigger="hover" data-content={{std.Description}} > <i class="fa fa-question"></i></a>
...
$("[data-toggle=popover]").popover();
The field in question is a Django TextField:
Description = models.TextField(blank=True)
Behavior:
This description had several words, but all after the first were cut off.
The solution is the same as for Contain form within a bootstrap popover? , though the title of the post may be misleading. The issue is that there need to be quotes containing the desired variable:
data-content="{{std.Description}}"
Additionally, if you want to include html in the popover (lists, <br>, etc.), include data-html="true".
I've been try to add the background image of a div to a value from Sitecore (8.0) in C# MVC using the code
<div style="background-image: url({Model.MyImage.Src})>
Where MyImage is of type Image as returned by GlassView
This is returning html such as
<div style="background-image: url(/~/media/myFolders/myImage.ashx)">
This image isnt being displayed when the page is rendered- although the url resolves when entered into the browser's address bar so it must be an issue with the .ashx extension as a background image for a div.
I also tried using Sitecore.Resources.Media.MediaManager.GetMediaUrl(mediaItem) but this also returned me the ashx which couldn't be resolved!
Try background-image: url('#Model.Image.Src'). While your example doesn't show it, you most likely have spaces in your folder or file name, which requires single or double quotes.
Add single quotes around it.
url('{Model.MyImage.Src}')
Should make this
url('/~/media/myFolders/myImage.ashx')
for my case sitecore 8.2 stop working below code because of style attribute
I have replaced style attribute with img tag and start working
<span><img src="#item.GetImageUrl("MyImage")" alt="" class="icon" /></span>
i am using foundation for my first project right now and i really love the functionality it provides out of the box, but i am having trouble with my custom radio boxes.
The idea is to not only have text inside of the radio buttons label, but also an image and some bold text.
As soon as i start using either an img or a bold tag inside of the label, the radio button selection via the labels text is broken.
The code i am using is this
<label for="radio2">
<img src="img/nho_musicians_flute.png">
<input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED>
<span class="custom radio checked"></span>
<b>Radio</b> Button 1
</label>
With this it is only possible to select a radio box by clicking on it DIRECTLY, clicking the text or the image results in erratic selections, it seems that the foundation JS selectors didn't account for extra tags inside of a label.
Is there a way to make this work with foundation, or do i have to resort to workarounds (making the whole text bold and put the image outside of the label)?
Good question, I had the same issues as you when I needed to create custom forms through F4's custom form implementations.
If you look in the implementation (custom.forms.scss) you can see that they use the :before and content: "" in order to be able to achieve this. I suspect that's why you can't add any tags after the <span class="custom radio"></span>
Now what you CAN do as a workaround is to place your custom elements etc inside the <span> element. This will work just fine, but will look wierd as the width and height is very small. But from then on its just a matter of styling it until you get it to look as you want. Here is a really simple example using absolute positioning:
<span class="custom radio">
<span style="position: absolute; top: 0; left: 0; width: 500px; margin-left: 30px;">
<b>test</b> foo
</span>
</span>
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.
I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:
<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first">Question</li>
<li class="qtab-1">Lead</li>
<li class="qtab-2">Board</li>
<li class="qtab-3 last">Ready</li>
</ul>
</div>
I have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed.
Here is my CSS so far:
ul.quicktabs_tabs li {display:inline; }
#quicktabs-2 li.active a {
background-image:url(question-active.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:135px;
padding-right:5px;
}
#quicktabs-2 li.qtab-1 a {
background-image:url(lead-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
background-image:url(board.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-3 a {
background-image:url(ready-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden.
I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.
Any help would be very much appreciated.
Thank you
Sincere
- Mestika
If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement
Edit: Here is a Reference provided by #Faust
It sounds like your main concern is to replace the text in the link (no?).
If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,
Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:
<li class="qtab-0 active first"><span>Question<span></li>
...then you can hide the text with this CSS:
#quicktabs-2 a span {display:none;}
Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:
#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}