I am trying to create a one page website that is similar this example :
http://themeforest.net/theme_previews/6622929-glissando-creative-minimal-onepage-psd-template?index=1&url_name=glissando-creative-minimal-onepage-psd-template
I thought I could use the transform css property but It's not giving me exactly what I want. Does anyone have any insight into this? I'm really new to coding!
Thanks!
html:
<div class="about">
<div class="aboutcontent">
</div>
</div>
scss:
.about {
width: 100%;
background: white;
transform: skewY(-5deg);
padding: 150px;
.aboutcontent {
transform: skewY(5deg);
}
}
I figured out the answer! My above code was actually correct. To make my website look like the example you should put a background image on the body and then you can position the skewY divs appropriately!
Related
Exporting gantt with dhtmlx works fine, but I wondered if there is a way to hide or remove the sentence in watermark (footer):
This document is created with dhtmlx library: http://dhtmlx.com
This sentence is generated when export to pdf or png at the bottom of the doc (even below footer)
The footer (watermark) will be there if you use the export for free.
It's only removed if you buy a paid version of dhtmlxGantt, here are the conditions:
https://dhtmlx.com/docs/products/dhtmlxGantt/export.shtml#:~:text=Free%20Online%20Export%20Service
If you already have the paid version of the component, you can contact dhtmlx sales regarding it.
They remove the watermark by whitelisting the domain where your app is hosted (from where the export is called), so it doesn't happen automatically when you buy the license, you have to request it.
It's also possible to deploy the export locally, the local version doesn't add watermarks. You get the local install with more expensive licenses, or you can buy it separately
I found a way to hide for free the watermark by using the footer using position: absolute. This example will use background red but you can use another color.
Based on the dhtmlx ExporttoPDF we can easily modify the css by using a <style> element, so I did something like this:
HTML FOR EXPORT TO PDF:
<input type="button" onclick='gantt.exportToPDF({
footer:`<style>
#footer-container{ position:relative; }
h4{ width:100%; background: red; position: absolute; top:-10px; }
</style>
<div id="footer-container">
<h4>Bottom Line</h4>
</div>`
})'>
CSS included in HTML above FOR EXPORT TO PDF:
#footer-container{
position:relative;
}
h4{
position: absolute;
top:-10px;
width:100%;
background: red;
}
HTML FOR EXPORT TO PNG:
<input type="button" onclick='gantt.exportToPNG({
footer:`<style>
#footer-container{ position:relative; }
h4{ width:100%; background: red; position: absolute; top:-10px; }
</style>
<div id="footer-container">
<h4>Bottom Line</h4>
</div>`
})'>
CSS included in HTML above FOR EXPORT TO PNG:
#footer-container{
position:relative;
}
h4{
position: absolute;
top:-10px;
width:100%;
background: red;
}
Output:
I've been working on a website that was built in WordPress using bootstrap templates. This website was not originally built by me, so I have troubles with it from time to time when implementing changes. The website uses yarn to build a 'dist' folder from node.js modules and elements contained within the theme folder. The stylesheets are scss files. After the build process finishes, it has created a 'dist' folder that is to be uploaded to the theme folder, which contains all the combined stylesheets, images, etc.
I'm having issues with a form that is created via contact form 7 and I'm not sure if this is an issue relating to the build process using yarn or something else. The issue is with a checkbox that I've added to the form. It works as expected on desktop displays, but when the site is viewed on an iPhone (via Chrome, Safari and Google browser apps) the checkbox tick doesn't appear on click.
Just for clarification, the last few websites I have built myself, that have included a form with a checkbox or checkboxes, are working perfectly across desktop and IOS devices. I use css stylesheets rather than scss, but I have used all the same styles on both the websites that are working fine and the one that is not working on IOS, so I really can't see why the checkbox is not working on mobile. I have also tried applying a couple of other fixes that have also not helped resolve the issue.
Please see below for the html code and scss code for the checkbox section of the website:
<div class="af-field af-field-type-checkbox af-field-checkbox acf-field acf-field-checkbox">
<div class="af-label acf-label">
<label for="brochure-pack-checkbox">Please send me a Giraffe Equity Release brochure pack</label>
</div>
<div class="af-input acf-input">
<div class="acf-input-wrap">
<span class="wpcf7-form-control-wrap brochure-pack"><span class="wpcf7-form-control wpcf7-checkbox" id="brochure-pack-checkbox"><span class="wpcf7-list-item first last"><label><input type="checkbox" name="brochure-pack[]" value="Please send me a Giraffe Equity Release brochure pack"><span class="wpcf7-list-item-label">Please send me a Giraffe Equity Release brochure pack</span></label></span></span></span>
</div>
<p></p></div>
<p></p></div>
.acf-field-checkbox {
.wpcf7-list-item {
position: relative;
margin-left: 0;
width: 100%;
display: block;
}
.wpcf7-list-item-label {
font-size: 2rem;
font-weight: 600;
line-height: 1.5em;
margin-left: 35px;
display: block;
cursor: pointer;
}
.wpcf7-list-item-label:before {
position: absolute;
left: 0;
width: 28px;
height: 28px;
border: 1px solid #b79c68;
border-radius: .25rem;
display: block;
}
.wpcf7-list-item-label:after {
position: absolute;
content: '\1F5F8';
font-size: 30px;
color: #b79c68;
width: 0px;
height: 0px;
top: 2px;
left: 2px;
opacity: 0;
}
input[type=checkbox] {
display: none;
-webkit-appearance: checkbox;
}
input[type=checkbox]:checked {
+ span.wpcf7-list-item-label:after {
opacity: 1;
}
}
label {
margin-bottom: 0;
cursor: pointer;
display: block;
}
}
I appreciate there may be some styles applied that are not needed, but they are not affecting the checkbox functionality. Once I have found the right solution to get this working for this specific website, I will clean up the styles applied and remove any that aren't necessary.
If anyone has any idea why the checkbox could be not working on this website, when they work fine on the others I have built, I would really be grateful for any hints or advice you could give.
Thanks in advance, if you need anymore information about the issue, then please ask and I'm sure I can clear up anything needed.
For anyone that is interested or has a similar issue, the cause of this problem was this:
.wpcf7-list-item-label:after {
content: '\1F5F8';
}
For some reason that code rendered a tick on desktop but not IOS. Changed to another tick code and resolved the issue.
Is it just me or did the last release of polymer trim the mustache ? I'd swear this code snippet (http://jsbin.com/eRimiJo/10/edit) worked perfectly last week, and now it's useless as the mustache magic seems to be non functional any more :
<script src="http://www.polymer-project.org/polymer.min.js"></script>
<polymer-element name="test-attr" attributes="width" noscript>
<template>
<style>
#host {
:scope {
display: block;
width: {{width}}px;
height: 100px;
background-color: black;
}
}
</style>
<content></content>
</template>
</polymer-element>
<test-attr width="100">Hello</test-attr>
EDIT : edited to remove obvious typos
There are a couple of things that need changing in your example:
<content> needs to be within the outer </template>
You're binding 100px as the width attribute value. Drop the "px", otherwise the binding output becomes width: 100pxpx; within the <style>.
With the changes: http://jsbin.com/ODEGika/3/edit
That said, this is only working for me in Chrome Canary. It looks like a regression with the polyfills. Filed here: https://github.com/Polymer/polymer/issues/270
I'm trying to change places of ofbiz components like application bar and main container places, I know that maybe can be changes from /common/widget/CommonScreens.xml or something like that (such as another xml file), I tired without luck to find what the file responsible to render "app-navigation" and just I lost my way.
So I hope find my answer here, I want to change layout,
The default interface is look like this:
What I want is (I made this using firebug) :
How I can do that?? or in another word from where I can start to do that?
leave the CSS and HTML side for me, I just want the point to start with, to edit theme layout to be like what I explained in previous screenshot.
Sorry If I cant give you what I want clearly my English didn't help me today :) but you can ask me in comment about anything if not clear yet.
take a look at the other themes in OFBiz. The bizness_time theme is already using a similar layout.
Cheers
I solved my issue, there was a little mistake from my side, and I did some modification;
In CSS file:
#app-navigation {
...
/* border-top: 0.1em solid #3E5A71; */ /*Removed*/
...
width: 200px; /*Added*/
float: left; /*Added*/
}
...
#app-navigation ul li ul li {
...
/* float: left;
display: inline; */ /*Removed*/
...
}
/*Added*/
#container:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
In templates :
At appbar.ftl , or appbarOpen.ftl :
<div id="container"> <!-- This is the Line that I Added -->
<#if userLogin?has_content>
...
And in footer.ftl :
</div> <!-- This is the Line that I Added -->
<div id="footer">
...
Simply :)
<img src="/images/home-1a.png" id ="tab66" alt="home" />
#tab66 {
margin-left:0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
This is my code of png image in ie6 but still it does not show transparency
Try this jQuery plugin:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
That said you should avoid having to use this hack in the first place.
Use .GIF's unless you really have to use PNG
body{ background: #0D657B;}
.png_hack {
margin:0 auto;
width:400px;
height:100px;
background-image: url(Img/png.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Img/png.png');
}
it's works
http://www.newstyleonline.net/post/ie6-png-hack.html
That is because AlphaImageLoader works like background-image, showing behind the image inside the img tag - the most common trick here is replacing src="/images/home-1a.png" with a 1x1 pixels transparent gif.
A quicker solution for you here would be:
<div id="tab66"></div>
#tab66 {
margin-left:0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
width: Xpx;
height: Ypx;
}
if you want to automate this, I'd recommend instead DD_belatedPNG.