In an express app I have a Jade file that looks like this
each tweet, index in tweetData
///some variable declarations
a( class="fancybox" rel="group" href=tweet.media_url tweetLink=tweetLink data-widgetIndex=widgetIndex title="default text" profile_image_url=tweet.profile_image_url)
img(src=tweet.media_url alt="" width="150" height="150")
div(id=widgetIndex, style="display:none")
div(style="min-height:200px") Hello world
div(style="float:left;width:52px;height:100%; display:inline;margin-right:5px")
a(href="#") //<---- this causes trouble!!!!!
img(src=tweet.profile_image_url, style="width:52px;height:48px;background:#bfb;")
div(style="height:48px;background:#bfb;") BALLS
If you look closely, a(class="fancy box ...) is interpreted multiple times for each time through the loop. (It should only be once per time through loop.)
<a class="fancybox" profile_image_url="http://pbs.twimg.com/profile_images/378800000365890826/c04bf726e47f3eda2116b5249e623a43_normal.jpeg" title="default text" data-widgetindex="widget0" tweetlink="http://twitter.com/Sjaakvdvoort/status/undefined" href="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png" rel="group">
<img width="150" height="150" alt="" src="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png"></img>
</a>
<div id="widget0" style="display:none">
<a class="fancybox" profile_image_url="http://pbs.twimg.com/profile_images/378800000365890826/c04bf726e47f3eda2116b5249e623a43_normal.jpeg" title="default text" data-widgetindex="widget0" tweetlink="http://twitter.com/Sjaakvdvoort/status/undefined" href="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png" rel="group"></a>
<div style="min-height:200px">
<a class="fancybox" profile_image_url="http://pbs.twimg.com/profile_images/378800000365890826/c04bf726e47f3eda2116b5249e623a43_normal.jpeg" title="default text" data-widgetindex="widget0" tweetlink="http://twitter.com/Sjaakvdvoort/status/undefined" href="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png" rel="group"></a>
<div style="float:left;width:52px;height:100%; display:inline;margin-right:5px">
<a class="fancybox" profile_image_url="http://pbs.twimg.com/profile_images/378800000365890826/c04bf726e47f3eda2116b5249e623a43_normal.jpeg" title="default text" data-widgetindex="widget0" tweetlink="http://twitter.com/Sjaakvdvoort/status/undefined" href="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png" rel="group"></a>
...
<div style="height:48px;background:#bfb;">
BALLS
</div>
</div>
</div>
</div>
If I comment out the a(href="#") then those extra a(class="fancy box") elements are not rendered. What gives?
I believe the underlying problem was I had an anchor tag within an anchor tag. I had set up this structure because I actually use jquery to grab the inner anchor tag and display it elsewhere (in a lightbox). If I make the inner anchor tag a cousin (not a descendent) of the outer anchor tag the Jade is interpreted by the outer.
Related
In Kentico, I am trying to put an image and an h3 tag inside an a tag in an Editable Text web part, but Kentico rewrites the code and splits the a tags, making 2 a tags, one around the image and one around the h3. How would I get this to stop?
Here is what I am trying to write:
<div class="brick">
<a href="/virtualvalley/studentresources.aspx">
<img alt="" class="img-responsive" src="/Virtual-Valley/document-library-(1)/images/default.jpg" />
<h3>Student Resources</h3>
</a>
</div>
And here is what Kentico rewrites it as:
<div class="brick">
<a href="/virtualvalley/studentresources.aspx">
<img alt="" class="img-responsive" src="/Virtual-Valley/document-library-(1)/images/default.jpg" />
</a>
<h3>
Student Resources
</h3>
</div>
In Bulma, how does one change text color for multiple items at once?
That is, being low-vision, I want to change all text on a navbar to be black rather than the fainter gray.
I'm new to Bulma and so far see I can use "has-text-black" helper but have to add them to every link.
<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item is-size-4 has-text-black" href="/">
<span class="icon is-large is-circle">
<i class="fas fa-cube has-text-primary fa-lg"></i>
</span>
My Site
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-black" href="/about/">
<span class="icon has-text-link">
<i class="fas fa-info-circle"></i>
</span>
About
</a>
....
I was hoping to add the helper just in one place in the class on one div or container containing the navbar link items but that doesn't seem to work.
I looked in the customization docs and tried setting $text: black; but that didn't work either.
Is there a way to set all the grayish text color in a section or container to black?
And, how does one set/customize the global or site-wide text color from grayish to black (or something else?
(Otherwise, is there detailed directions for all the color variables and how to revise them in the correct order?)
Thanks in advance.
Ralph
The key is to pay attention to documentation. Bulma provides SASS variables for all its components or elements to play around with for making your own customization. The objective is to write the custom CSS AS LESS AS POSSIBLE. Here's the link
https://bulma.io/documentation/components/navbar/#colors
In your project's global SCSS file, you can add these SCSS variables and add the colors of your choice:
$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;
If you are confused over the color combination, visit--> https://coolors.co
Cheers!! :)
I'm using the latest version of EE2 and a plugin called Exp:resso store.
I have products assigned to a category and for the most part all of this is working fine. Below is my code:
<div class="col-md-7">
{exp:channel:categories channel="products" style="linear"}
<section class="section accordion repeater">
<h3>
{category_name}
<div class="icon">
<img src="/assets/local/img/plus-icon.jpg" alt="">
</div>
</h3>
<div class="accordion-content">
{exp:store:search orderby="title" sort="asc" category="{category_id}"}
{exp:store:product entry_id="{entry_id}"}
<p class="accordion-download">
{title} - {price}
<span><img src="/assets/local/img/add-to-cart.jpg" alt="">Add to cart</span>
</p>
{/exp:store:product}
{/exp:store:search}
</div>
</section>
{/exp:channel:categories}
</div>
I'm trying to find a way to show a No products exist message if the category doesn't have anything inside of it. I've tried using {count}, {total_results} & {total_rows} to check if there aren't any products. Problem is everything I try is obviously wrong because nothing gets output :/
Thanks in advance
The store search tag is a wrapper for the channel entries tag pair so you would need to use the {if no_results} tag pair.
<div class="col-md-7">
{exp:channel:categories channel="products" style="linear"}
<section class="section accordion repeater">
<h3>
{category_name}
<div class="icon">
<img src="/assets/local/img/plus-icon.jpg" alt="">
</div>
</h3>
<div class="accordion-content">
{exp:store:search orderby="title" sort="asc" category="{category_id}"}
{exp:store:product entry_id="{entry_id}"}
<p class="accordion-download">
{title} - {price}
<span><img src="/assets/local/img/add-to-cart.jpg" alt="">Add to cart</span>
</p>
{/exp:store:product}
{if no_results}
There are no products
{/if}
{/exp:store:search}
</div>
</section>
{/exp:channel:categories}
</div>
Should also be mentioned if you are not creating a form for the to add the products to the cart you could use the {store_field_short_name:price} variable to reduce the number of queries on your page. Most store things such as sku, weight, measurements can all be access by using the field short name followed by :variable
I have the following code:
<xp:section id="section1" type="box" header="Left Text Right Text">
Section content
</xp:section>
I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM
Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi
Thanks in advance for any tips.
I am not sure how you would do it with xpages sections, but with bootstrap you can use this.
<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>
Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?
If you are looking to do something with bootstrap sections this is what I use.
Here is some css.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
And here is how I handled the div
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Section Header
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
</div>
Not sure if this is going to get you exactly where you want to be.
[edit]
Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.
There is a standard Pager component which renders below html structure:
<div class="xspPagerContainer">
<div class="xspPagerRight" id="view:_id1:pager1">
<span class="xspPagerNav xspFirst" id="view:_id1:pager1__First">
First
</span>
<span class="xspPagerNav xspPrevious" id="view:_id1:pager1__Previous">
Previous
</span>
<span class="xspPagerNav xspGroup" id="view:_id1:pager1__Group">
<span>
<span class="xspFirstItem xspCurrentItem">
1
</span>
<span>
<a>2</a>
</span>
<span class="xspLastItem">
<a>3</a>
</span>
</span>
</span>
</div>
</div>
I would like to add some extra html tags like into above structure:
<div class="xspPagerContainer">
<div class="xspPagerRight" id="">
<span id="NewSpan"></span>
<span class="xspPagerNav xspFirst" id="someId">
First
</span>
<span class="xspPagerNav xspPrevious" id="view:_id1:pager1__Previous">
Previous
</span>
I was trying to use renderer to do it but I was not able to add anything inside xspPagerContainer div. All I achieved was to add something before or after this div.
Is something like this possible? How can I add html tag to already existing component without javascript (jQuery etc.) ? Should I create own component and create own renderer ?
This is IBM variation of JSF used in Xpages.