Concrete5: Possible to repeat multiple blocks in a specific layout? - block

I am creating a custom template for a page using Concrete5. I have three blocks, wrapped in a div class, that I want to repeat throughout one page. For example:
<div class="block-wrapper">
<div class="title"><?php $a = new Area('Title'); $a->display($c);?></div>
<div class="description"><?php $a = new Area('Description'); $a->display($c);?></div>
<div class="autonav"><?php $a = new Area('Autonav'); $a->display($c);?></div>
</div>
And the CSS for would be something like this:
.block-wrapper {
padding: 20px 5px 20px 5px;
border: 1px solid #e8e8e8;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.title {
float: left;
}
.description {
float: right;
}
What I want is to be able to repeat the block-wrapper with the 3 editable blocks inside. For example, the generated page would look like:
<div class="block-wrapper">
<div class="title">Steve</div>
<div class="description">Engineer</div>
<div class="autonav">Link A | Link B | Link C</div>
</div>
<div class="block-wrapper">
<div class="title">Betty</div>
<div class="description">Designer</div>
<div class="autonav">Link D | Link E | Link F</div>
</div>
...and so forth. I hope I am being clear enough. Is this possible? What are my options? Ideally, I'd have as much freedom to style the blocks and block-wrapper as possible.

Depending on what exactly your situation is, there are a few different solutions. The built-in Concrete5 approach is to use the setBlockWrapper methods on the Area object. For example:
<?php
$a = new Area('Main');
$a->setBlockWrapperStart('<div class="block-wrapper">');
$a->setBlockWrapperEnd('</div>');
$a->display($c);
?>
Note that the block wrapper is not displayed while in edit mode.
Another approach (as #BGundlach mentions) is to use the free Designer Content addon and create a custom blocktype with separate fields for each piece of data, and provide the appropriate wrapper HTML around each field. Looking at your example, though, I see you have one of those fields being an "autonav" of sorts... so I'm not sure how exactly this would be populated.
A third approach is the non-free Designer Content Pro addon, which lets you create custom blockstypes with repeating items (which might be good for your nav field... so users could choose any number of nav links if they wanted... but this would be more of a "manual nav" versus an "auto nav").
Disclaimer: I'm the author of both the Designer Content and Designer Content Pro addons (but they were created to solve this exact sort of problem so I think it's a good fit here).

If I understand you correctly a possible option is to programmatically create the three areas. For example you could create a new Page attribute with a handle number_of_bio_blocks and then something like this
<?php
$num = intval(Page::getCurrentPage()->getAttribute('number_of_bio_blocks'));
if ($num) {
while ($num--) {
?>
<div class="block-wrapper">
<div class="title"><?php $a = new Area('Title ' . $num); $a->display($c);?></div>
<div class="description"><?php $a = new Area('Description ' . $num); $a->display($c);?></div>
<div class="autonav"><?php $a = new Area('Autonav ' . $num); $a->display($c);?></div>
</div>
<?php
}
}
?>
Or possibly just set an arbitrary number of Areas like 10 as those that are not filed in will not be displayed. There is not, to my knowledge, a way to add Areas through the interface. Also, creating those Areas like that would populate the database with additional unused Areas. I'm not sure if that is a concern to you.
Designer Content was suggested, and there is now Designer Content Pro which allows you to add multiple repeating fields in a block. This wouldn't allow arbitrary blocks, but if you need things like rich text and images, that might be a good option.

Why not use one area and a repeating block type? Fewer areas allows for better sure performance.
I'm not sure there's an autonav option in Jordanlev's designer content block, but I'm sure it will do all this for you. http://www.concrete5.org/marketplace/addons/designer-content/ I've used this as the basis for many of my own blocks. It puts you in control of all the markup.
The description states:
Designer Content is an invaluable tool that allows designers to easily create custom block types. The purpose of this is to make content editing straightforward for your users, and to ensure that your styles are maintained -- without having to rely on the complicated and error-prone TinyMCE styles. For example, let's say some of the pages on your site will contain information about company employees, and each employee has a name, a bio image, and a brief description -- you can create a custom block with a textbox field for the name, an image selector for the bio image, and a wysiwyg editor for the description. You can also surround each element in html snippets (divs with classes, for example) to ensure that the content will be styled appropriately, without your users having to deal with the finicky TinyMCE toolbar.

Related

Trying to use the "text-align: center;", works on some text, and doesn't on others

As the title says I'm trying to use "text-align: center;", but it isn't working on a specific block of text. It works on others, so I'm confused about that. I'm a complete noob lol (have been learning HTML and CSS for about 5 days), and decided to use my knowledge to get an easy 100 on the project. Bear with me, please. It's that's causing the issue.
CSS:
p4 {
text-align: center;
}
HTML:
<p4>
Over here, we have an economy consisting<br> of mostly fishing, shipbuilding, wheat<br> growing, and fur trapping. There are<br> many different economic opportunities.
</p4>
(Sorry, I didn't know what to really put, so you should probably check out the complete code, it's near the bottom: https://codepen.io/fishstick_god_/pen/ZEWjLyX)
text-align: center aligns the text to the center of the element, in your case the p4 element isn't the full width of the page so its only centering to the width of the content. Easy fix is to add display: block to your p4
p4 isn't a valid HTML tag, so the browser isn't clear how to display it. You should just use p as the tag for all instances of paragraphs. If you want to style one of those paragraphs specifically and differently from the other paragraphs, then also include a class attribute with the tag, like this in the HTML:
<p class="special">
Then, in the CSS, you create a class selector, like this
.special { text-align: center; }
You can place that same HTML class on any text-containing tag (like p, h1, li, etc.) and it will center those.
Note that you can't text-align: center; any tags that don't have a default display of block, like an a tag or an img tag. Also, you can't center structural tags (like div, header, nav, etc.) with text-align: center; because, well, they aren't text. There are other choices you can make in the CSS to center those.
text-align works on so-called block level elements. Like div or p. See, e.g., https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
p4 does not qualify. Try plain p:
<p style='text-align: center'>Hello World!</p>

Bootstrap 3 - background color for row, but not the whole row

I am using bootstrap in a fairly straightforward way, and I have a color specified in my row divs, e.g. which colors the entire row with the danger color, but on the desktop, I am only populating about 6 col-md's worth of data, and the extra color extending past where the actual data is displayed, looks funny.
On mobiles its fine, because the actual data is taking up the full row.
So, I want to be able to apply the background color to only col-md-8 of my rows when the web page is displayed on a desktop.
I tried adding the background to the individual cells, but since each of the cells is not a uniform height that didn't work either.
I tried specifying the row as being only col-md-8, but then that affects the size of all the other columns.
Do I just have to accept that I will have to change the md column sizes to take into account that they are now in a col-md-8 row?
Is there an easy to accomplish what I want?
Here is a sample of the code:
<div class="container">
<div class="row bg-danger">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-2">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
There are only 7 columns of data, but the danger background is on the whole row.
Ah, now I see what you are after. Just take the target row and make it display:table; then you can get the equal height columns with display:table-cell;
jsFiddle here
.row {
display: table;
}
.row > div {
float: none;
display: table-cell;
}
Note: You can put this inside a media query if you only want the effect to happen at a certain screen size. (see this fiddle)
You could use your own CSS classes, to accomplish what you need.
Also, you could add the col-lg-6 class to the row.
Post your HTML code, otherwise it's really hard to help

In Bootstrap 3, is it possible to use col-*-* classes on definition terms with horizontal definition lists?

For the following markup:
<dl class="dl-horizontal">
<dt>A few words describing the term</dt>
<dd>The data associated with the term</dd>
</dl>
The dt term element is fixed width (at 180px) and cannot be changed with col- due to specificity of CSS. For example, the below does not work:
<dl class="dl-horizontal">
<dt class="col-sm-3">A few words describing the term</dt>
<dd class="col-sm-9">The data associated with the term</dd>
</dl>
Description lists are for name-value pairs and a fixed width is not suitable for some languages where the single word term is longer than 180px. Truncating is not possible (it truncates valuable meaning) and word-wrapping (using Stack Overflow overrides) is not readable.
Do I need to add extra classes or should I chase up with Twitter Bootstrap?
Edit
Given the lack of answers, I have opened an issue with bootstrap:
https://github.com/twbs/bootstrap/issues/14983
...you can always write overwrite code for the col-sm-3 and col-sm-9 classes (following the exact example), but I guess it would be easier to write your own classes using media queries and the same breakpoints you are using in your bootstrap file. You can also use this custom class to set a new minimum width.
#media (min-width:XXX) and (max-width:XXX) {
dt.col-sm-3 {
width:25%;
}
dt.col-sm-9 {
width:75%;
}
}

How do I select a particular dynamic div, using Selenium when I don't have a unique id or name?

Only the content of the div is unique. So, in the following dynamically generated html, only "My Article-1245" is unique:
<div class="col-md-4 article">
<h2>
My Article-1245
Delete
Edit
</h2>
<p>O ephemeral text! Here today, gone tomorrow. Not terribly important, but necessary</p>
</div>
How do I select the edit/delete link of this specific div, using Selenium? assertText/verifyText requires an element locator, but I do not have any unique id/name (out of my control). There will be many such div blocks, with other content text, all dynamically generated.
Any help would be appreciated.
If text 'My Article' appears each time, you may use following:
//For Delete
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Delete']"));
//For Edit
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Edit']"));
Hope it meets your requirement :)
Matching by text is always a bad automated testing concept. If you want to keep clean and reliable test scripts, then :
Contact your web dev to add unique identifiers to the elements
Suck it up, and create selectors based on what's there.
You are able to create a CSS selector based on what you want.
What you should do is create the selector using parent-child relationships:
driver.findElement(By.cssSelector("div.article:nth-child(X) a[href^='delete']"));
As I am ignorant of your appp, this is also assuming that all of your article classes are under the same parent. You would substitute X with the number of the div you want to refer to. e.g.:
<div id="someparent">
<div class="...article" />
<div class="...article" />
...
</div>

Bootstrap layout: 2 columns split 66/33% or 1 column 100% when the 2nd column hidden

I have a Bootstrap 3 layout like this
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
Normally this displays the first column as 66% and the second column as 33%
When I have no content for the second column, I want to be able to hide it and make the first column take up 100% width. I think it can be done with a mixins but while I'm trying to get that working, is there a better way?
If it's empty you can add the class .col-md-12 after col-md-8 and add class .hide to the col-md-4. I don't know how you're implementing your site. If it's a CMS, you can have a little checkbox to add these classes if col-md-4 == empty.
If you're hiding at different breakpoints, look at the responsive utilities section of the TWB docs.