I have this bit of code:
<div class="kt-portlet__head">
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="la la-user"></i>
</span>
<h3 class="kt-portlet__head-title">
Edit User
</h3>
</div>
</div>
</div>
The content changes across the project, ie, everything within the div with the class kt-portlet__head-label
I need to remove the duplicate wrapper div (i.e, you will see there are two div tags with class kt-portlet__head).
To my knowledge:
I cannot do a search and replace because searching for just the two open wrapper tags and replacing with one will leave two div close tags instead of one.
I cannot do a search and replace on the whole thing because the content changes as stipulated above
I can use 'code wrap/unwrap' on an open document - but this is manual and i might as well just delete the two lines individually.
Isn't there a way to do a kind of 'code unwrap' + search and replace to get this achieved?
Related
I need to truncate the amount of characters that is returned from the title of each product but the file where this change needs to be applied has a set of double brackets wrapped around the specific element that needs truncating (see code)
<div class="boost-pfs-filter-product-bottom">
<a href="[[itemUrl]]" class="boost-pfs-filter-product-item-title">
<h4 class="cl-product-card-name">[[itemTitle]]</h4>
</a>
<div class="cl-product-card-price">[[itemPrice]]</div>
<button class="quick-add-btn" [[quickAddAttr]] onclick='window.blubolt.quickadd.open("[[productHandle]]", {"stockMap": "{}" })'>
[[quickAddText]]
</button>
</div>
The element that needs truncating is [[itemTitle]] on line 3, but i am not sure how to go about this as the double square brackets is causing issues. Any ideas what is needed to be done here? If any more info is needed feel free to ask
This should work:
<div class="boost-pfs-filter-product-bottom">
<a href="[[itemUrl]]" class="boost-pfs-filter-product-item-title">
<h4 class="cl-product-card-name" aria-label="[[itemTitle]]" title="[[itemTitle]]">[[itemTitle | truncate: 20]]</h4>
</a>
<div class="cl-product-card-price">[[itemPrice]]</div>
<button class="quick-add-btn" [[quickAddAttr]] onclick='window.blubolt.quickadd.open("[[productHandle]]", {"stockMap": "{}" })' aria-label="[[quickAddText]] [[itemTitle]]">
[[quickAddText]]
</button>
</div>
Anything with a pipe | inside a variable will apply a filter, in this case the truncate filter. Filters are functions available in the Liquid language that allow transforming the variable value.
In my example, please note also
aria-label is still including the full title because it will render the very important heading and link outline more helpful for people with disabilities. CSS truncation would render this unnecessary.
title also includes the full title, which gives mouse users a way to expand the title by hovering on it.
aria-label for the button is helpful for screen reader users who navigate by means of tab. Otherwise, all Quick Add buttons have the same accessible name.
Ok, I've been trying to figure this out for a while, and not quite sure it's possible in pure CSS.
I'm trying to create a bit of custom styling on a page of FileRun links that I send to clients. Sending a bunch of subfolders of large TIFF images (I split them up to make the download manageable). Most clients can figure out that they should go into each subfolder and download them individually. However, the "download all" button appears on the main page of the link, and plenty of not so tech-savvy clients send me angry emails complaining that they hit the "download all" button, and can't open or download the 5GB zip file that FileRun creates of the entire main folder link.
An example of a page is here:
https://demo.filerun.co/wl/?id=T2Gv5oGiGMxO3welkXbaqs92fZ6meJmU
The main limitation is that FileRun is encoded in IonCube, so I only have access to the CSS file, so no way I can add javascript or PHP code.
I've been trying to find a way to write CSS to hide the DOWNLOAD ALL button <a class="actionBtn"> by changing the CSS to .actionBtn {display:none;} in the main link page, but not any subfolders. I have found you can tell when you are in a subfolder page when there is a 2+ level breadcrumb containing a carat.
e.g. in the 'elf' subfolder, this can be detected by the presence of the > in the breadcrumb, and the presence of <span class="bcSep">></span>
Is there any way to change the attribute of actionBtn or right div on the right, depending on the presence of the <span class="bcSep">></span> or number of elements in the breadcrumb?
The nesting order in the header div on the root page is:
<div class="left">
<a class="breadCrumb">xxx</a>
</div>
<div class="right">
<a class="actionBtn">DOWNLOAD ALL</a>
</div>
On any subfolders it is:
<div class="left">
<a class="breadCrumb">xxx</a>
<span class="bcSep">></span>
<a class="breadCrumb">xxx</a>
...
</div>
<div class="right">
<a class="actionBtn">DOWNLOAD ALL</a>
</div>
I've tried child selectors, but can't find a way to target the actionBtn or right element from the breadCrumb or left element... Any ideas or am I asking for the impossible from pure CSS?
Since all three of your products (colored, samba and skaven) as well as the DOWNLOAD ALL anchor link have unique URLS, you can just use the href attribute value to only select the anchor tag on the homepage using a css attribute selector like this:
a[href="http://someUniqueURL.com/"].actionBtn {
display:none;
}
Check and run the following Code Snippet for a practical example of the above approach:
/* CSS */
a[href="https://demo.filerun.co/?module=weblinks§ion=public&multidownload=1&id=T2Gv5oGiGMxO3welkXbaqs92fZ6meJmU"].actionBtn {
display:none;
}
<!-- HTML -->
<p>Homepage Link</p>
Download All
<hr/>
<p>Product 1</p>
Product 1
<hr/>
<p>Product 2</p>
Product 2
<hr/>
<p>Product 3</p>
Product 3
<hr/>
I am using Expression Engine to develop a site. I have created the page I want in a template file and now I am making use of EE's tags to make the content dynamic.
{exp:channel:entries channel="test123"}
{test123}
<div class="panel" style="margin-bottom:10px;">
<div class="paneldiv" style="background-color: red;">
hello there
</div>
</div>
{/test123}
{/exp:channel:entries}
The above code makes my DIV disappear. But if I remove the tags, the DIV shows up.
Its also worth noting that when the tags are in and I click "view rendered template" the DIV shows up.
Very strange! I've been bashing my head all day!
I believe you are using the {test123} tag incorrectly. First, I'm assuming that {test123} refers to a Channel Field within the 'test123' Channel. If so, then you simply need to remove the {/test123} ending tag, as data field tags are usually single-variable tags.
The reason your div content is disappearing is that EE is failing to process {test123} as a variable pair, and therefore it doesn't show the content within.
I have a section of HTML that I would like to be editable with CKEditor but in 2 different pieces.
Ideally I would want my HTML to look like:
<div class="page-header">
<h1>
<span>Heading</span>
<small>Subheading</small>
</h1>
</div>
where the subheading would be displayed on the same line as the heading and each are editable separately. This looks fine without CKEditor enabled.
One attempt was to hack the editor to enable span and small tags: (Enable CKEditor4 inline on span and other inline tags)
CKEDITOR.disableAutoInline = true;
CKEDITOR.dtd.$editable.span = 1;
CKEDITOR.dtd.$editable.small = 1;
$("[data-allowed-formating='all']").ckeditor();
http://jsfiddle.net/OzzieOrca/PCH9z/1/
This mostly works but if you double click the Header (to select everything) and start typing, it deletes the subheading and you can't get it back until you refresh the page
I tried using <div style="display: inline"> instead of the small and span but when CKEditor is instantiated, it changes the styling of the div and the subheader drops below the header.
I will try see if there is anything else I can do with CKEditor or see if I have any other HTML layout or styling ideas but any suggestions would be appreciated.
(I had the same issue with TinyMCE so I tried CKEditor and I think I like it better so I decided to keep using it but I still have this same problem)
Edit:
I finally tried this:
<div class="page-header">
<h1 class="pull-left">Header</h1>
<h1 class="pull-left">
<small class="padding-left">Subheader</small>
</h1>
<div class="clearfix"></div>
</div>
but then realized that this wouldn't wrap the subheader but just moves it to a new line if it is too long. I submitted this bug report: http://www.tinymce.com/develop/bugtracker_view.php?id=6354 which includes this example of what I want to do and what is not working http://jsfiddle.net/OzzieOrca/jKmZ7/
First, make sure the editor doesn't attach itself to the <h1> element.
If that works correctly, then I suggest to wrap the elements that you want to edit in a block element during edit and restore the DOM when editing stops.
I don't know why CKEeditor might distinguish between inline and block elements but it's quite possible that it never occurred to the author that someone might want to edit only part of a block.
I'm using context to print blocks into a region. However, I'd like to have the region print wrapper DIVs around the blocks of the given area. I know this is possible with region.tpl.php in Drupal 7. I can't seem to figure out the best way in Drupal 6.
<div class="{region classes i.e. sidebarleft}">
<div class="{block 1}"></div>
<div class="{block 2}"></div>
<div class="{block 3}"></div>
<div class="{block 4}"></div>
</div>
However, currently it prints like this:
<a id="context-block-region-right" class="context-block-region">Right Sidebar</a>
// the previous anchor tags is hidden
<div id="block-block-82" class="clear-block block block-block">
<h2>Community Navigation Block</h2>
<div class="content">
<div id="community-landing-navigation-menu">
<div class="joinCommunityBox">
<div class="community-landing-pagePanelWrapperSideBar">
<div class="community-landing-pagePanelWrapperSideBar">
<a id="context-block-block-82" class="context-block editable edit-community_contexts"></a>
</div>
</div>
I wish it would print a region wrapper tag around ALL of that...
Also, I want to keep my page.tpl.php clean of extra wrapper tags. It would be better if we could preprocess regions to print a wrapper tag.
I figured it out... The answer is actually borrowed from zen. If you click the link below, several 'preprocess functions' are rendering a new region template. Then, blocks are collected into that region, and printed.
http://www.drupal.org/node/223440#comment-5304866
It works great, and is going to go production soon.