I configured the right sidebar to show the standard 'latest posts' widget.
Is it possible to add a line break after the title (everything marked in blue)?
So just like it is on accident with the second post.
Here is the html code:
<div class="span3 right tc-sidebar no-widget-icons">
<div id="right" class="widget-area" role="complementary">
<aside id="recent-posts-4" class="widget widget_recent_entries"> <h3 class="widget-title">Aktuelles</h3> <ul>
<li>
Weihnachtsfeier des roten Flures am 22.12.2016
<span class="post-date">10. Januar 2017</span>
</li>
<li>
So sehen Sieger aus
<span class="post-date">13. Dezember 2016</span>
</li>
<li>
Wir sagen »dankeschön«
<span class="post-date">4. Februar 2016</span>
</li>
<li>
Altes Zahngold ermöglichte Kletterwand in MES
<span class="post-date">4. Februar 2016</span>
</li>
<li>
Sonnensegel für die heißen Tage
<span class="post-date">4. Februar 2016</span>
</li>
</ul>
</aside> </div><!-- //#left or //#right -->
</div><!--.tc-sidebar -->
</div><!--.row -->
Add this to your CSS code:
.widget_recent_entries span.post-date {
display: block;
}
Related
I'm trying to have it so my forum statistics addon is moved to the right side of the forum instead of the bottom.
I've tried using a float as well positioning fix.
Below is the whole small portion of the addon for my forum.
<xen:require css="pe_forum_stats.css" />
<div class="nodeList sectionMain" id="peStatsContainer">
<div class="peStatsBody">
<div class="categoryStrip">
<div class="categoryText">
<h3 class="nodeTitle">{xen:phrase forum_statistics}</h3>
</div>
</div>
<div class="peStatsContent">
<div class="peStatsMembersOnline">
<xen:if is="{$onlineUsers.records}">
<xen:if is="{$visitor.user_id}">
<xen:if hascontent="true">
<div class="peFollowedOnline">
<h4 class="minorHeading">{xen:phrase people_you_follow}:</h4>
<ul class="followedOnline">
<xen:contentcheck>
<xen:foreach loop="$onlineUsers.records" value="$user">
<xen:if is="{$user.followed}">
<li title="{$user.username}" class="Tooltip"><xen:avatar user="$user" size="s" img="true" class="_plainImage" /></li>
</xen:if>
</xen:foreach>
</xen:contentcheck>
</ul>
</div>
<h4 class="minorHeading">{xen:phrase members}:</h4>
</xen:if>
</xen:if>
<ol class="listInline">
<xen:foreach loop="$onlineUsers.records" value="$user" i="$i">
<xen:if is="{$i} <= {$onlineUsers.limit}">
<li>
<xen:if is="{$user.user_id}">
<a href="{xen:link members, $user}"
class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}"><xen:if is="{$xenOptions.peForumStatsRichUserName}">{xen:helper richUserName, $user}<xen:else />{$user.username}</xen:if></a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
<xen:else />
{xen:phrase guest}<xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
</xen:if>
</li>
</xen:if>
</xen:foreach>
<xen:if is="{$onlineUsers.recordsUnseen}">
<li class="moreLink">... {xen:phrase and_x_more, 'count={xen:number $onlineUsers.recordsUnseen}'}</li>
</xen:if>
</ol>
</xen:if>
<!-- <br /> Eh? -->
<div class="footnote">
{xen:phrase online_now_x_members_y_guests_z_robots_a, 'total={xen:number $onlineUsers.total}', 'members={xen:number $onlineUsers.members}', 'guests={xen:number $onlineUsers.guests}', 'robots={xen:number $onlineUsers.robots}'}
</div>
</div>
<xen:if is="{$xenOptions.peForumStatsLegend}">
<ul class="peUserGroupLegend">
<xen:if hascontent="true">
<xen:contentcheck>
<xen:foreach loop="$peForumStatsLegend" value="$peForumStatsLegend">
<li>
<span class="peGroups" style="{$peForumStatsLegend.usergroup.username_css}" title="{$peForumStatsLegend.usergroup.user_title}">{$peForumStatsLegend.usergroup.title}<span class="divider">|</span></span>
</li>
</xen:foreach>
</xen:contentcheck>
</xen:if>
</ul>
</xen:if>
</div>
<div id="peForumStats">
<ul class="sectionFooter peList_inline">
<li>{xen:phrase discussions}:</li> <span class="value">{xen:number $boardTotals.discussions}</span>
<li>{xen:phrase messages}:</li> <span class="value">{xen:number $boardTotals.messages}</span>
<li>{xen:phrase members_count}:</li> <span class="value">{xen:number $boardTotals.users}</span>
<li>{xen:phrase latest_member}:</li> <span class="value"><xen:username user="$boardTotals.latestUser" /></span>
</ul>
</div>
</div>
</div>
I'm hoping to have it appear at the right side of the forum and when I scroll down for it to not move at all.
I set :before property on my footer but I'm facing a repeating issue. I mean my image from :before property is repeated a lot of and I don't know why :/
See on my website it will be easier to understand :)
http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php
Here is my code
/*Insertion image TDB footer*/
div.footer-container ::before{
ontent:url("../img/Tonnerre/img_tdb_footer.png");
}
/*Fin insertion image*/
<div class="footer-container">
<footer id="footer" class="container" data-nb-cols="6">
<div class="container">
<!-- Block Newsletter module-->
<section id="newsletter_block_left">
<h4>Lettre d'informations</h4>
<div class="block_content">
<form action="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php" method="post">
<div class="form-group">
<input class="inputNew form-control newsletter-input placeholder" placeholder="Saisissez votre adresse e-mail" id="newsletter-input" type="text" name="email" size="18" value="">
<button type="submit" name="submitNewsletter" class="btn btn-default button button-small">
<span>ok</span>
</button>
<input type="hidden" name="action" value="0">
</div>
</form>
</div>
</section>
<!-- /Block Newsletter module-->
<section id="social_block" class="footer-block">
<h4 class="title_block">Nous suivre</h4>
<ul class="toggle-footer" style="">
<li class="facebook"><a class="_blank" href="https://www.facebook.com/tonnerredebelt/?fref=ts" target="_blank">Facebook</a></li>
</ul>
</section>
<!-- Block categories module -->
<section class="blockcategories_footer footer-block col-xs-12 col-sm-2">
<h4>Catégories</h4>
<div class="category_footer toggle-footer" style="">
<div class="list">
<ul class="tree dynamized" style="display: block;">
<li class="last">
<span class="grower CLOSE"> </span><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=8&controller=category&id_lang=1" title="">
Produits
</a>
<ul style="display: none;">
<li>
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=10&controller=category&id_lang=1" title="Ceintures en cuir, noires, Bicolores, fantaisistes… Retrouvez tout l'univers de la marque celio* à travers sa E-boutique.">
Boucles
</a>
</li>
<li>
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=9&controller=category&id_lang=1" title="LIVRAISON & RETOUR GRATUITS◅ Retrouvez les ceintures homme en ligne | Grand choix parmi plus de 1 500 marques sur...">
Bracelets
</a>
</li>
<li class="last">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=7&controller=category&id_lang=1" title="Ceintures : profitez de toutes nos offres du catalogue ceintures sur Galerieslafayette.com. N'hésitez pas vos achats sont satisfaits ou remboursés pendant 30 ...">
Ceintures
</a>
</li>
</ul>
</li>
</ul>
</div>
</div> <!-- .category_footer -->
</section>
<!-- /Block categories module -->
<!-- MODULE Block footer -->
<section class="footer-block col-xs-12 col-sm-2" id="block_various_links_footer">
<h4>Informations</h4>
<ul class="toggle-footer" style="">
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=prices-drop" title="Promotions">
Promotions
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=new-products" title="Nouveaux produits">
Nouveaux produits
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=best-sales" title="Meilleures ventes">
Meilleures ventes
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=contact" title="Contactez-nous">
Contactez-nous
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_cms=3&controller=cms&id_lang=1" title="Conditions d'utilisation">
Conditions d'utilisation
</a>
</li>
<li>
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=sitemap" title="sitemap">
sitemap
</a>
</li>
<li>
© 2014 <a class="_blank" href="http://www.prestashop.com" target="_blank">Logiciel e-commerce par PrestaShop™</a>
</li>
</ul>
</section>
<!-- /MODULE Block footer -->
<!-- Block myaccount module -->
<section class="footer-block col-xs-12 col-sm-4">
<h4>Mon compte</h4>
<div class="block_content toggle-footer" style="">
<ul class="bullet">
<li>Mes commandes</li>
<li>Mes avoirs</li>
<li>Mes adresses</li>
<li>Mes informations personnelles</li>
</ul>
</div>
</section>
<!-- /Block myaccount module -->
<!-- MODULE Block contact infos -->
<section id="block_contact_infos" class="footer-block col-xs-12 col-sm-4">
<div>
<h4>Informations sur votre boutique</h4>
<ul class="toggle-footer" style="">
<li>My Company, 42 avenue des Champs Elysées
75000 Paris
France </li>
<li>
<span>0123-456-789</span>
</li>
<li>
<span>sales#yourcompany.com</span>
</li>
</ul>
</div>
</section>
<!-- /MODULE Block contact infos -->
<div id="block_facebook_like" class="block jq_slide_toggle">
<h4>Facebook</h4>
<div class="facebook-fanbox">
<div class="fb-like-box fb_iframe_widget" data-href="https://www.facebook.com/tonnerredebelt/?fref=ts" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false" data-width="292" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=334341610034299&color_scheme=light&container_width=288&header=false&href=https%3A%2F%2Fwww.facebook.com%2Ftonnerredebelt%2F%3Ffref%3Dts&locale=en_US&sdk=joey&show_border=false&show_faces=true&stream=false&width=292"><span style="vertical-align: bottom; width: 292px; height: 214px;"><iframe name="f1cfcf364c" width="292px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/plugins/like_box.php?app_id=334341610034299&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df251877a6%26domain%3Diutdoua-webetu.univ-lyon1.fr%26origin%3Dhttp%253A%252F%252Fiutdoua-webetu.univ-lyon1.fr%252Ff3e4cbbb3%26relation%3Dparent.parent&color_scheme=light&container_width=288&header=false&href=https%3A%2F%2Fwww.facebook.com%2Ftonnerredebelt%2F%3Ffref%3Dts&locale=en_US&sdk=joey&show_border=false&show_faces=true&stream=false&width=292" class="" style="border: none; visibility: visible; width: 292px; height: 214px;"></iframe></span></div>
</div>
</div>
<!-- MODULE Block reinsurance -->
<div id="reinsurance_block" class="clearfix">
<ul class="width5">
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-2-1.jpg" alt="Échange en magasin"> <span>Échange en magasin</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-3-1.jpg" alt="Paiement à l'expédition."> <span>Paiement à l'expédition.</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-4-1.jpg" alt="Livraison gratuite"> <span>Livraison gratuite</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-5-1.jpg" alt="Paiement 100% sécurisé"> <span>Paiement 100% sécurisé</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/" alt="Satisfait ou remboursé"> <span>Satisfait ou remboursé</span></li>
</ul>
</div>
<!-- /MODULE Block reinsurance -->
<a id="logo_footer" href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/" title="Tonnerre De Belt">
<img class="logo" src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/img/tonnerre-de-belt-logo-1447323498.jpg" alt="Tonnerre De Belt" width="1681">
</a>
</div>
</footer>
</div>
Thanks for helping :)
Alexis
The problem may be in your selector. You are doing this way in your site:
.footer-container *::before
{
content:url("../img/Tonnerre/img_tdb_footer.png");
}
See that * in your selector? It means that you want all child elements of .footer-container to have that css applied. You probably don't want it to work like this, I think.
Maybe you can try .footer-container::before to apply just before the elements that contains the .footer-container class, which is just one element.
You should do a background-image and background-repeat properties in your footer
.footer-container ::before {
content: " ";
background-image: url("../../img/Tonnerre/img_tdb_footer.png");
background-repeat: no-repeat;
}
Do not forget to add height and width to your element in before:
.footer-container ::before {
content: " ";
background: url("../../img/Tonnerre/img_tdb_footer.png") no-repeat;
height:100px;
width:100px;
background-size:100%;
}
I'm trying to give a different background-color to my button when it is active. The HTML code is as below.
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
</div>
<div id="tab3" class="tab">
<!-- some content -->
</div>
<ul class="tab-links">
<li class="active">
<a href="#tab1"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
</li>
<li>
<a href="#tab2"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
<li>
<a href="#tab3"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
</ul>
</div>
</div>
I used both this codes in my CSS files and i didn't sow nothing happened:
This is the CSS code for my project:
.cmimet_ne_vite:active
{
background:#787878;
}
.cmimet_ne_vite.active
{
background:#787878;
}
So who knows were is the problem to help me resolve it?
You have no element with both classes "cmimet_ne_vite" and "active". Instead you have a .cmimet_ne_vite element which is a descendant of your .active element, so instead of .cmimet_ne_vite.active you'll need to use:
.active .cmimet_ne_vite {
background:#787878;
}
Furthermore, you cannot wrap two <p> elements within each other. The browser will render this as two separate elements. Change:
<p class="arrow-up">
<p class="cmimet_ne_vite">BUTTON</p>
</p>
To:
<p class="arrow-up">
<span class="cmimet_ne_vite">BUTTON</span>
</p>
Or something similar.
Finally, if this element is intended to be used as a button you'll need to give it a role attribute set to "button":
<span class="cmimet_ne_vite" role="button">BUTTON</span>
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
I was asking if the following is possible. I have a HTML5 article tag, with inside that a figure and figcaption tags. The caption is overlapping the image. The figure should be clickable, but I want some other links in the caption that linked to another page, like a categorie page.
How should my markup looks like.
Now I have the following, but than the a first a tag will be immediately closed after it's opening the a tag.
<li class="grid_12 blog-post">
<a href="#">
<figure class="post-thumb">
<img src="images/blog-thumb.png" alt="Post thumbnail">
<figcaption class="entry-post">
<span class="capitalize">Entry</span>
<h1 class="entry-title">
Fris. Responsive. Retina Ready.
</h1><!-- End h1 .entry-title -->
<ul class="entry-meta">
<li class="author">
By Casper Biemans
</li>
<li class="published">
On September 1, 2012
</li>
<li class="entry-categories">
In Digital Art
</li>
<li class="comment-count">
With 22 Comments
</li>
<li class="permalink">
<img src="images/permalink_icon.png" alt="Permalink post">Permalink
</li>
</ul><!-- End ul.entry-meta -->
</figcaption><!-- End figcaption.entry-post -->
</figure><!-- End figure.post-thumb -->
</a>
</li><!-- End li.grid_12 blog-post -->