i am new to SMACSS. i am using sass and i want to import the shadowbox modal css using SMACSS.
I am a bit confused as where to put the shadowbox.css file.I mean in BASE or somewhere else.
I read the documentation but it still is quite confusing.
please support.
thanks.
Best way to add sub-class in MODULES for modal as you 'extend' parent module with extra features.
.modal-shadow {
box-shadow: 0 0 10px #000;
}
and use it in HTML like
<div class="modal modal-shadow">
something
</div>
Related
I need a component exactly like below picture.
image code is here but i need that codes for typescript.
and also copy codes not working!
any body can help with an example in https://codesandbox.io/.
thanks a lot
Recently I used react-multi-carousel with typescript.
Maybe that carousel's parent style is like this.
display: flex;
Carousel doesn't work with that style so you should change the parent style.
It's not a problem caused by Typescript
display: block or add this style.
min-width: 400px; max-width: 400px;
it works for me.
I need to place a block of HTML above the Megamenu. This block of HTML occupies the whole horizontal space above the Megamenu. I am using Joomla! 3.4.0 and the Purity_III template.
Anyone here can please tell how this can be done?
I have tried to modify the file:
public_html/site/templates/purity_iii/tpls/blocks/header.php
I added the following code after the code <div class='container'>:
<div style='margin-bottom: 10px; font-family: arial; color: #FFFFFF; font-size: 20px;'>
THINGS I WANT TO WRITE
</div>
Indeed, this writes above the megamenu, but then the megamenu starts appearing hover the text of the site.
Yes, I know I have to write CSS code. The question is I don't know what to write!
The file header.php is a custom file for the purity template. I didn't write it myself.
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
I don't have a lot of experience with Joomla and I'm sure how this will be a really simple question to someone who was work in Joomla before.
I'm working on existing project where I need to add inline css style to elements which are created on this way:
JHTML::_('grid.sort', $name[$id], 'a.'.$name[$id], $this->listDirn, $this->listOrder)
So I need something like this:
JHTML::_('grid.sort', $name[$id], 'a.'.$name[$id], $this->listDirn, $this->listOrder, 'style: height 500px; color: blue;')
Thanks in advance
Every kind of help will be appreciated
There is no way to pass styles to the sort element directly as you can see here in the code
https://github.com/joomla/joomla-cms/blob/staging/libraries/cms/html/grid.php#L74.
What you can do is to add the style on the document directly:
JFactory::getDocument()->addStyleDeclaration('#myelement {height 500px; color: blue;}');
perhaps you want to add !important to the style to enforce it.
I have problem with tooltips on my magento website, I need to have one tooltip on product page which will show a HTML UL List. I tried some plugins I found but had problems with JQuery as it was disabling other prototype pop up I have on product page.
Im really a newbie at All the types of javascript and hope you experts can help me with this please.
My trigger id for tooltips is #why-to-buy
and the tooltip class in CSS is .why-to-buy-tooltip
can anyone suggest me a prototype or scriptaculous driven simple tooltip which can show HTML please?
Any help is more than welcome.
Thanks in advance.
Typically this can be done in just CSS. To start with there needs to be an anchor;
<a id="why-to-buy" href="#" onclick="return false;">
Why To Buy?
<ul class="why-to-buy-tooltip">
<li>Reason #1</li>
<li>Reason #2</li>
</ul>
</a>
The onclick is to prevent it working as a hyperlink. An anchor is necessary for older IEs to respect the following hover;
#why-to-buy {
position: relative;
}
#why-to-buy .why-to-buy-tooltip {
display: none;
position: absolute;
width: 200px;
height: 200px;
z-index: 100;
}
#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip {
display: block;
}
If you need more info search for and read about "CSS popups". A nice touch is to add some CSS3 transitions - old browsers just ignore them and continue to work as normal.
This type of popup is limited because it is inside an anchor, and anchors cannot contain anchors. If the #why-to-buy element is of another type, such as a DIV, then IE doesn't pick up the :hover pseudoclass. For this special case a bit of JavaScript is needed after all.
$('why-to-buy').observe('mouseenter', function() {
this.addClassName('over');
}).observe('mouseleave', function() {
this.removeClassName('over');
});
Update the last stylesheet rule to include #why-to-buy.over .why-to-buy-tooltip. The bit of JavaScript is rarely needed and can go in /skin/frontend/base/default/js/ie6.js. Or you could encourage browser upgrades and choose not to support old IE at all.
A quick Google searched returned this one, and shows to support HTML:
http://www.nickstakenburg.com/projects/prototip/
It's prototype based so should work well with Magento.