I'm using Zurb Foundation, working on an accordion. The Zurb accordion comes with a CSS triangle that acts as a toggler, but I want to use two font-awesome icons instead, depending on whether the li has an active class or not. Right now I'm getting a placeholder for the icon image.
Would prefer to do this with CSS only, if possible.
Here's my CSS:
ul.accordion > li > div.title:after { content:"\f067"; display: block; width: 0;
height: 0; position: absolute; right: 20px; top: 8px;}
ul.accordion > li.active .title:after { content:"\f068"; display: block; width: 0;
height: 0; }
Here's the HTML:
<ul class="accordion">
<li class="active">
<div class="title">
<h5>Accordion Panel 1</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<div class="title">
<h5>Accordion Panel 1</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
</ul>
The CSS shown does not specify the font-family: FontAwesome;. Try adding that.
Looks like it's not a permission issue but in case others come along I am leaving the links.
For localhost changing permissions on the font itself could help: Icon font (#font-face) not rendering on localhost
Or possible cross domain issues with Firefox: http://www.red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default
Related
I have two long introductory articles on the home page. They are only necessary for first time visitors so I want to simply show a summary with the option to expand it.
My issue is that as the articles are long, the 'HIDE' option needs to be at the END of the article. This makes the radio/input option limited unless I can figure out a way to activate it from the end. Is there a way to trigger it using only css?
The site is CSS only. I am not concerned with outdated browsers but I would like it to be SEO friendly (readable) and not have any security triggers (hence no scripts).
I've read through everything I could find, but the options either require the same trigger to activate show/hide (not user friendly in my case as user would have to search for it within the article) or JS. I've tried playing with links and buttons to no avail. I've considered using a dialog box, but that also requires JS to activate. Modal pop-up is a possibility, but I am not sure how that reacts with pop-up blockers so I have it as a last resort.
The other responses are somewhat dated, so I was hoping that there are some techniques that now have wider support that could be considered.
Here is the jsfiddle.
/*OPTION 1*/
#More,#Art1 {display: none} /*hides checkbox and 2nd part of article */
#More:checked~#Art1 {
display: block;
}
/*Trying to get it to close: */
#Less {
display: none}
#Less:checked~#Art2 {
display: none;
}
/* OPTION 2 */
.option2 {
background-color: yellow;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.text2b {
background: #bbb;
border-radius: 5px;
width: 70%;
position: relative;
transition: all 5s ease-in-out;
}
.text2b .close {
transition: all 200ms;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #333;
}
<!--OPTION 1 -->
<p>OPTION 1. RADIO BUTTONS. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
</p><input type=checkbox id="More"><label for="More">MORE</label>
<div id="Art1">
<p>
Second part of Lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The End of Option 1.</p>
<input type=checkbox id="Less"><label for="Less">LESS</label>
</div>
<!--OPTION 2 -->
<div id="option2a" class="option2">
<p>OPTION 2. MODAL OPTION. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
</p>MORE
<div id="option2b" class="overlay">
<div class='text2b'>
<p>
Second part of of MODAL OPTION. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The end. </p>
<a class="close" href="#">CLOSE</a>
</div>
</div>
<p>
Other stuff... Meant only to check positioning of Modal.
</p>
The fiddle shows this option and a modal version I have been playing with. Other ideas that fit the prerequisites are welcome.
I had just about given up on this technique, but surprisingly, there is a solution.
Evidently you can tie multiple labels to one form control. So by simply adding a label (not input field) for "MORE" at the END of the article, it actually triggers the original input. No extra CSS required.
Works like a charm in FF and while I cannot see why there would be an issue in other browsers, I have not had an opportunity to verify.
Full credit for this brilliantly simple solution goes to Beverleyh at CSS-Tricks:
CSS-Tricks Forum
I hope this helps others. I was not really aware of this feature but could see many uses for it.
If I want override inline css i must use !important or javascript.
But if I want to override, for example, inline width without important I can use max-width or min-width
Is there some way to override inline
overflow:hidden
Using CSS
You can override the inline style using !important keyword like below. The inline style background green is override with other color through the class style using !important keyword.
.test {
background-color:#ff00ff !important;
}
<div class="test" style="background-color:green">
<h1>
Sample
</h1>
</div>
Using Javascript
The same you can achieve using JavaScript also.
document.getElementById('test').style.backgroundColor = '#fff000';
<div id="test" style="background-color:green">
<h1>
Sample
</h1>
</div>
You can override the inline style using !important keyword
.overwrite_css{
background-color: blue !important;
}
<div class="overwrite_css" style="background-color: red;font-size: 25px;">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</h2>
</div>
Still not able to override it then try this one
Note: Using !important ONLY will work here, but I've used overwrite_css[style]
selector to specifically select div having style attribute
The example uses [style] (the attribute selector) to show us that the CSS is targetting the div with the “style” attribute.
.overwrite_css[style]{
background-color: blue !important;
}
<div class="overwrite_css" style="background-color: red;font-size: 25px;">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</h2>
</div>
You can only override inline css with
!important
or you have to use javascript to do so.
If you want to change inline css you should use js, you can override through !important tag but it has high priority so it may affect other css style...
So it's good to use js instead of !important tag.
Please guide me to bring all the "add to basket buttons" in straight line. Currently they are not in proportion.
If anyone can help me with a quick code?
How to align "add to cart" buttons in a straight line in WooCommerce shop page?
The products names (or titles) are embedded in a tag this way:
<h2 class="woocommerce-loop-product__title">Product title</h2>
So you need to define a min-height css rule for that class choosing the biggest height of your product names. So if the biggest product name height is 96 pixels, you will set your rule this way (for example):
.woocommerce-loop-product__title {
min-height: 100px;
/* OR
min-height: 100px !important; */
}
You should add this css rule to the style.css file of your active child theme (or active theme).
You can use flexbox and then the magic margin-top: auto on the button. You can ignore the display: grid on the .items container. It's just for the columns.
.items{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
}
.item{
display: flex;
flex-direction: column;
}
.item button{
margin-top: auto;
}
<div class="items">
<div class="item">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<button>Add</button>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consetetur </p>
<button>Add</button>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet </p>
<button>Add</button>
</div>
</div>
More information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm working on a page right now which has blocks of text set in border boxes, and the text within these is styled.
Basically, the main problem I'm having is that within the styled <p> tag containing the border styling, when I try to break the text into another paragraph, the text after the </p> jumps outside of the box. I've tried adding the <p> in all kinds of different places but it just won't do what I want, and I can't find any tutorials on how to add extra paras within a paragraph styled with a border. Sample code below... this box was easy because there is only a single short paragraph. The rest of the page has multiple paragraphs that all need to fall within the border box.
Can anyone please help?
<p style="border: solid 3px #4D545E; padding: 6px;">
<strong style="color: #c01d21;">Book your Christmas party</strong>
on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.
<br>
<a style="text-transform: uppercase;line-height: 38px;text-align: center; " class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank">
<strong>Click to book a table</strong>
</a>
Or call <strong>#### ### ####</strong>
</p>
If i understand what you are saying, i have mad a snippet code for you here so that you can check it out, if it suites what you want, you can use it or try to explain more about what you want.
.wrapper{
border: solid 3px #4D545E; padding: 6px;
}
.center{
text-align:center;
}
<div class="wrapper">
<p><strong style="color: #c01d21;">Book your Christmas party</strong> on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.</p>
<p class="center">
<a style="text-transform: uppercase;line-height: 38px;text-align: center; "class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank"><strong>Click to book a table</strong></a></p>
<P class="center">
Or call <strong>#### ### ####</strong></p>
</div>
following up on Jerry's answer above, to add multiple paragraphs should be as simple as adding<p>tags (assuming this is what you are looking for).
code wise, it'll be (working off Jerry's solution)
.wrapper{
border: solid 3px #4D545E; padding: 6px;
}
.center{
text-align:center;
}
strong {
color: #c01d21;
}
a {
text-transform: uppercase;
line-height: 38px;
text-algin: center;
}
I moved all your styling to CSS. And the html would be (same as above) + more <p> or any other tag you choose to add.
<div class="wrapper">
<p><strong>Book your Christmas party</strong> on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.</p>
<p class="center">
<a class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank"><strong>Click to book a table</strong></a></p>
<P class="center">Or call <strong>#### ### ####</strong></p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p class="center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
Hope this helps.
p.one {
border-style: solid;
border-width: 5px;
}
<p class="one">Some text.</p>
http://www.w3schools.com/css/css_border.asp
Sorry guys, I'm really up against it here and I don't always get chance to jump back on and reply. There is an intern here at the moment who can answer some of my HTML questions, but thank you all for your input. No doubt I'll have more questions soon... :)
I'm quite new to Bootstrap, I'm struggling with the grid system while trying to reproduce the following template:
In this example I have 3 columns:
first columns holds some info/pictures. This column holds a lot of data.
second column holds 3 (but potentially n) contact info (email, address, phone number, ...)
third column holds some random info
I'd like to split the 2nd column into 3 rows, with equal height. What I need to do is to vertically center these 3 rows in the 2nd column, and possibly expand their heights to fill the parent (2nd column) height.
This is an example of what I've achieved till now:
<div class="row container">
<div class="col-md-4 first">
<p> ... VERY LONG CONTENT ... </p></div>
<div class="col-md-4 second">
<div class="row">
Telephone number
</div>
<div class="row">
Address
</div>
<div class="row">
email
</div>
</div>
<div class="col-md-4 third">
Something else, vertically centered
</div>
</div>
Find here a bootply with my code
As an alternative, instead of 3 subrows in the 2nd column, I would also be happy to use a <ul>.
How can I do this? Is there any bootstrap class that I can apply to all 3 rows in order to have them fullfill the parent height?
Thank you in advance
If you are open to use another css library along with bootstrap.You can go ahead with YAML CSS. Which has a good feature for grid system with customization.
What you want can be achieved as follows in yaml.
<div class="ym-grid ym-equalize" style="border:2px solid greenyellow;">
<div class="ym-g33 ym-gl">
<div class="ym-gbox-left" style="border:2px solid red;">
<h6>Left Grid Column</h6>
<p> ... VERY LONG CONTENT ... </p>
<p> ... VERY LONG CONTENT ... </p>
<p> ... VERY LONG CONTENT ... </p>
<p> ... VERY LONG CONTENT ... </p>
<p> ... VERY LONG CONTENT ... </p>
<p> ... VERY LONG CONTENT ... </p>
<p> ... VERY LONG CONTENT ... </p>
<p> ... VERY LONG CONTENT ... </p>
<p> ... VERY LONG CONTENT ... </p>
</div>
</div>
<div class="ym-g33 ym-gl">
<div class="ym-gbox-left" style="border:2px solid red;">
<div class="ym-grid" >
<div class="ym-gbox" style="border:2px solid orange;">
<br>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<br>
<br>
</div>
</div>
<div class="ym-grid" >
<div class="ym-gbox" style="border:2px solid orange;">
<br>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<br>
<br>
</div>
</div>
<div class="ym-grid" >
<div class="ym-gbox" style="border:2px solid orange;">
<br>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<br>
<br>
</div>
</div>
</div>
</div>
<div class="ym-g33 ym-gr">
<div class="ym-gbox-right" style="border:2px solid red;">
<h6>Right Grid Column</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
</div>
</div>
</div>
Excuse the inline styling ... used for reference. Hope this Helps :)
I have added css styles to hold columns in place as shown in this answer:
.row {
overflow: hidden;
}
[class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
To fullfill the middle column height I have added javascript which counts the left column height and redistributes it to the middle column rows:
$(".parent").each(function(){
var $children = $(this).children();
$children.height($(".height_parent").height() / $children.length - 2);
});
In HTML parent is class added to the middle column div and height_parent class added to the left column div.
Here is updated bootply.
Try this one
HTML
<div class="container">
<h6>parent row</h6>
<div class="row parent">
<div class="col-md-4 column">
<p style="padding-top: 260px;">Column one</p>
</div>
<div class="col-md-4 column">
<div class="row subRow">
<p>Subrow 1</p>
</div>
<div class="row subRow">
<p>Subrow 2</p>
</div>
<div class="row subRow">
<p>Subrow 3</p>
</div>
</div>
<div class="col-md-4 column">
<p style="padding-top: 260px;">Column Three</p>
</div>
</div>
CSS
.subRow {
color: orange;
border: 3px solid orange;
height: 100px;
padding-left: 5px;
}
.container .parent {
border: 3px solid green;
}
.container {
color: green;
}
.column {
border:3px solid red;
text-align: center;
color: red;
}
I hope it will help someone
/* used this code it's help */
.first{
background: yellow;
display: table-cell;
float:none;
}
.second{
background: white;
display: table-cell;
float:none;
}
.third{
background: orange;
display: table-cell;
float:none;
}
Live Demo