I use tt_news plugin for displaying news. There is such list template
<!-- ###TEMPLATE_LIST### begin -->
<div class="col-md-9">
<!-- ###CONTENT### begin -->
<!-- ###NEWS### begin -->
<div class="single-post-item wow fadeInLeft" style="visibility: visible; animation-name: fadeInLeft;">
<div class="row mt-4">
<div class="col-6">
<h5><span class="border-btm">###NEWS_AUTHOR###</span></h5>
</div>
<div class="col-6 text-right">
<span class="exclu fw-700 text-uppercase bg-red text-white">Exklusiv</span>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="post-contents">
<h2 class="mb-4">###NEWS_TITLE###</h2>
<div class="row">
<div class="col-md-6"><!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###--></div>
<div class="col-md-6">
<p class="m-0 mt-3 mt-md-0">###NEWS_SUBHEADER###
<!--###LINK_ITEM###-->mehr...<!--###LINK_ITEM###-->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ###NEWS### end-->
<!-- ###CONTENT### end -->
###BROWSE_LINKS###
</div>
<!-- ###TEMPLATE_LIST### end -->
I need to have a different design for the first list element and forth as an example. But there is no loop there and I can't check the number of iterations. Any ideas how can I do it? TYPO3 8.7, thx in advance
Have a look into the manual and search for alternatingLayouts:
Indicates how many alternating designs the news-script should expect in the html-template.
Example:
If you define a subpart like:
"<!--###NEWS###--> ... <!--###NEWS###-->"
this is used all the time.
If you define a similar subpart:
"<!--###NEWS_1###--> ... <!--###NEWS_1###-->"
which might show another set of colors, this is used every second time instead of the default! This is because "alternateLayouts" is set to 2.
If you define a similar subpart
"<!--###NEWS_2###--> ... <!--###NEWS_2###-->" ...
this will be used every third time IF (!) "alternateLayouts" is set to 3. If you do not set it to 3, the first two aternating designs will be used only.
tt_news manual
If you want a different template not for each n-th news, but only for the first/second/..., then have also a look at altLayoutsOptionSplit:
OptionSplit for template parts (altLayoutsOptionSplit) allows you to directly access certain template parts in a template. Contrary to the good old “alternatingLayouts” feature the current template part is not determined by a simple counter but by an optionsplitted value.
Blockquote
tt_news Documentation - changes in tt_news 3.0.0
Related
I am trying to make the footer of my website. I want to change the style.
1) Can I create a custom stylesheet and include it into the footer file?
If yes, Do I need to create a new div for any element I want to choose or can use the class provide by Bootstrap?
For example, above I created a div and than in the style file I added #mydiv?
Or there is a better solution?
<div id="mydiv">
<footer class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/img/footer_logo.png"></div>
</div>
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/img/ico.png"></div>
</div>
<div class="row">
<div class="col-md-4">
xx
xxx
xxx
xxx[enter image description here][1]
</div>
</div>
<div class="row">
<div class="col-md-4">2004-2017. All
rights reserved.</div>
</div>
</footer>
</div>
In addition to Bootstrap classes you can apply your own like
<footer class="container-fluid my-custom-class" style="margin-top: 30px;">
Then just select this class in CSS and apply the styling you need. Be careful, as some attributes (like width ) can be overwritten by Bootstrap.
Hope this helps.
I've used cycle2 a number of times, but am trying to do something a little different with HTML than what I normally would do. Please see my code below. Am I doing the right thing with the "data-cycle-slides" value?
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-speed="700"
data-cycle-timeout="3600"
data-cycle-slides="> section > div.is-left">
<section id="is-top">
<?php foreach ($array as $key => $value) { ?>
<div class="is-left ic">
<div class="in">
<!-- more html -->
</div>
</div>
<?php } ?>
<div id="other-stuff">
<p>yo!</p>
</div>
<div id="more-stuff">
<p>hey!</p>
</div>
</section>
</div>
It looks ok to me, and when I view the page source, nothing seems amiss. But when I have a look in Firebug or the Firefox developer tools, things appear to be out of order. If there are two items in the array, I see something like this...
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" <!-- et cetera -- >>
<div class="is-left ic">
<div class="in">
<!-- more html -->
</div>
</div>
<section id="is-top">
<div id="other-stuff">
<p>yo!</p>
</div>
<div id="more-stuff">
<p>hey!</p>
</div>
</section>
<div class="is-left ic">
<div class="in">
<!-- more html -->
</div>
</div>
<div class="is-left ic">
<div class="in">
<!-- more html -->
</div>
</div>
</div>
Note that items that should appear inside of #is-top are appearing outside of that section. Also, there are somehow three .is-left items in firebug, when there should be two.
I don't know if this is a case where firebug is making a mistake and causing me some confusion, or if I'm taking the wrong approach with cycle2.
I've been trying for a couple of hours and can't get my XPath to select the right text. Here's the structure:
<!-- (some divs that don't need to be selected) -->
<div class="main">
<div>
<div>
<div class="select">
<div class="child">
<div class="divwithtext">
</div>
</div>
<div class="child">
<div class="divwithtext">
</div>
</div>
<div class="child">
<div class="divwithtext">
</div>
</div>
<div class="dontselect">
<div class="divwithtext">
</div>
</div>
<div/>
</div>
</div>
</div>
Basically I want to select all the children of class="select" which is a child of class="main", but I don't need the text of class="dontselect".
Note: I am using XPath 1.0 due to php DOMXPath only supporting 1.0.
Edit:
Problem was my PHP code not returning all results that XPath gave me.
One possible way :
//div[#class='main']//div[#class='select']/div[not(#class='dontselect')]
Unfortunately I won't be able to describe my issue without a visit to my site. DadGab.com.
I have a 'featured slider' col-md-8 with a sidebar to the right. It appears there is some padding or spacing set somewhere and I am unable to find it. I've checked all theme files, style.php. All I am trying to do is move the sidebar on the right side to the top of the page. The empty space did used to be a col-md-4 container which the coding has since been removed.
If I remove the featured slider code from the main page, the 'latest' posts as well as the menu do move to the top of the screen without the padding issue.
Any help would be greatly appreciated.
you have the following structure
<div class="col-md-8"></div>
<div class="clear"></div>
<div class="col-md-8"></div>
<div class="col-md-4"></div>
if i understand you corectly you should have
<div class="col-md-8"></div>
<div class="col-md-4"></div>
so join the code from both .col-md-8 containers, remove the div with class "clear" and it should be OK. This is all done in template homepage.php
You have some problems in your layout logic. You need to think about the way columns and rows work.
You should have a left column (col-md-8) and a sidebar column (col-md-4) and they should be adjacent. The left column should contain ALL of the left content.
Here's what you have:
<div class="row">
<div class="col-md-8">
<!-- featured -->
</div>
<div class="clear"><!-- SEPARATION --></div>
<div class="col-md-8">
<!-- REAST OF LEFT COLUMN -->
</div>
<div class="col-md-4">
<!--
SIDEBAR
You want this next to the left column.
But it's not adjacent!
-->
</div>
</div>
Here's what you want
<div class="row">
<div class="col-md-8">
<!-- FEATURED -->
<!-- REST OF LEFT COLUMN -->
</div>
<div class="col-md-4">
<!-- RIGHT SIDEBAR -->
</div>
</div>
Your current scenario is following
<div class="col-md-8">
featured slider
</div>
<div class="col-md-8">
content
</div>
<div class="col-md-4">
sidebar
</div>
Change it to following
<div class="col-md-8">
featured slider
content
</div>
<div class="col-md-4">
sidebar
</div>
Please let me know if issue is still there :)
After your div "col-md-8" is coming a clearfix. Just creat a "col-md-4" after "col-md-8".
I already tested here, just do it.
Inside the tags
<div class="container"><div class="row">
rearrange the order, from:
<div class="col-md-8"> ... </div>
<div class="clear"></div>
<div class="col-md-8"> ... </div>
<div class="col-md-4"> ... </div>
to:
<div class="col-md-8"> ... </div>
<div class="col-md-4"> ... </div>
<div class="clear"></div>
<div class="col-md-8"> ... </div>
In addition, consider if you really want to keep the div that clears out your floats:
<div class="clear"></div>
If not, comment it out, like so:
<!-- <div class="clear"></div> -->
This indeed moves up your sidebar to the position you want. However, I suspect you will want the last div (of class col-md-8) to be positioned higher. If so, it sounds as if you will need to create two columns inside the row (the div of class row).
Is there a bootstrap class that will fill however many columns have not already been taken?
for example i have this div tag that might be there and it might not if it isnt i want the second div to take up 12 columns, but if it is there only take up 8 columns. like this
<div class="row">
<?php if(something){ ?>
<div class="col-md-4">
<div> </div>
</div>
<?php } ?>
<div class="col-md-fill">
<div> </div>
</div>
</div>
other than using
<div class="col-md-<?php
if($count > 5){
echo "8";
} else {
echo '12';
}
?>">
Sometimes I try something very stupid, but this time my stupidity surprises me...
I've seen than if we append to a div.row a div without any class, this no-class div fills herself the empty space....
Fiddle : http://jsfiddle.net/bhgme789/1/
HTML:
<div class="container">
<div class="row">
<div class="col-md-4 bleu">bleu</div>
<div class="rouge">rouge</div>
</div>
<div class="row">
<div class="col-md-1 bleu">bleu</div>
<div class="rouge">rouge</div>
</div>
<div class="row">
<div class="col-md-9 bleu">bleu</div>
<div class="rouge">rouge</div>
</div>
</div>
You're on the right track. Just finish your if statement with an else. One way, it uses a 4 and 8, the other it uses a 12 and takes up the whole row.
<div class="row">
<?php if(something){ ?>
<div class="col-md-4">
<div> </div>
</div>
<div class="col-md-8">
<div> </div>
</div>
<?php } else { ?>
<div class="col-md-12">
<div> </div>
</div>
<?php } ?>
</div>
When using Bootstrap v4 and v5 you should make use of the 'equal-width' column class col:
.col{
flex: 1 0 0%;
}
I needed this for edge cases where the last column was pushed to the next line caused by rounding errors when the browser calculates the with in pixes using the percentage based column styles. So in some situations my last column with col-2 was pushed down, using just col solved it.
A fiddle like the earlier given example with blue and red cells: http://jsfiddle.net/o14qh386/
I would do it like that, to keep code dry
<div class="row">
<div class="<?php if($something){echo 'col-md-push-4 col-md-8'}else{echo 'col-md-12'}">
</div>
</div>
I now noticed that you might want to put something if is in 4. in this case this might not be useful. If you just want to fulfil the space this is your solution