I'm a little stuck on this section. I've only added ACF php in html when the background image was located in the html. Now I have 2 shapes in my css with pseudo elements. How would I add the php so it works on wordpress?
HTML
<section class="main-content-section home">
<section class="hero-section" style="background-image: url(images/home-hero#2x.jpg);"></section></section>
CSS
.hero-section:before,.home .hero-section:after{position: absolute; left: 0; top: 0; content: ""; background-image: url(../svgs/Rectangle.svg); background-position: left top; background-size: contain; background-repeat: no-repeat; width: 64.25%; height: 100%; z-index: -1;}
.home .hero-section:after{background-image: url(../svgs/Rectangle-Copy.svg); background-position: right bottom; left: auto; top: auto; right: 0; bottom: -46%; width: 63.125%;}
The easiest way to do this would probably include inline <style> tags in your template, using the image from the ACF field, as you cannot use an inline style on a pseudo selector in the HTML directly.
Ie:
<style type="text/css">
.home .hero-section:after {
background-image: url('<?= get_field('your_acf_image_field')['url'] ?>');
}
</style>
Related
I have an iframe fullscreen, how can I make a div that is on that iframe?
I'm trying to do something like the Netflix player, just more static WITHOUT javascript
so there is the iframe,
then there is a div with some buttons and functions in php but the div has a background cutted, on top of the iframe.
Is it doable?
LIKE THIS IMAGE CHECK PLS
Here is a possible solution :
<div class="iframe_container">
<iframe width="100%" height="700px"></iframe>
<div class="custom_functions"></div>
</div>
<style type="text/css">
div.iframe_container {position: relative; width: 100%; height: 700px; background-color: #F0F;}
div.custom_functions {position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 1; background-color: #FF0; height: 200px;}
</style>
update the values as needed and make it fit your needs
I am using dompdf to generate letters which I want to brand with various different companies branded paper. To do this I'm getting a background image via css. See example image at bottom. I then set appropriate margins to fit the content I want to write out into the white space. However I just want this letterhead to display on the first page only. At present it is repeating onto each page. My css looks like:
<html>
<head>
<meta charset="utf-8">
<title>{$pdf.title}</title>
<style type="text/css">
#page {
size: A4;
margin:0;
padding: 0;
}
body {
padding: {$branding.page_margin_top}cm {$branding.page_margin_right}cm {$branding.page_margin_bottom}cm {$branding.page_margin_left}cm;
font-size: 7pt;
font-family: helvetica !important;
background-image: url('{$base_url}pd-direct.png');
background-position: center center;
background-repeat: no-repeat;
font-size: 10pt;
}
#postal-address {
margin: 0cm;
margin-left: {$branding.address_offset_left}cm;
margin-top: {$branding.address_offset_top}cm;
margin-bottom: {$branding.address_offset_bottom}cm;
font-size: 10pt;
}
#date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="page-body">
<div id="content">
{if $pdf.postal_address}
<div id="postal-address">
{$pdf.postal_address|nl2br}
</div>
{/if}
{$pdf.main_body}
</div>
</div>
</body>
</html>
How can I change this so the background image is only displayed on the first page output by dompdf?
See current html being rendered at: http://eclecticgeek.com/dompdf/debug.php?identifier=ccfb2785f8a8ba3e1e459cbd283ad015
You can put the letterhead as the background image in an div that overlaps the main content div and use z-index to organise the stacking order of the divs, so that background image will appears at the back.
This way, the background image will only show on the first page when you convert it to PDF using DOMPDF.
The CSS below works for A4#150dpi.
CSS
#page {
size: A4;
margin-top:0.5cm;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding: 0;
}
body {
font-family: helvetica !important;
font-size: 10pt;
position: relative;
}
#overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('http://www.showhousesoftware.com/pd-direct.png');
background-position: center top;
background-repeat: no-repeat;
z-index: -1;
}
#content{
padding: 3.5cm 0.50cm 5.00cm 0.50cm;
}
#postal-address {
margin: 0cm;
margin-left: 1.50cm;
margin-top: 0.00cm;
margin-bottom: 1.00cm;
font-size: 10pt;
}
#date {
font-weight: bold;
}
HTML
<body>
<div id="page-body">
<div id="overlay">
</div>
<div id="content">
......
</div>
</div>
</body>
I have a searchbar in my header, which I need centered horizontally and just a little bit above the bottom of the header. I was able to achieve this by using
display: flex;
justify-content: center;
align-items: center;
The problem I am having now is that although it is responsive when you make the window smaller horizontally, It is a total mess when you resize the window vertically. I am pretty sure it's because I used margin-top: 350px; to set the vertical position. I also would much rather not use flex display because it isn't supported by much yet. Below is a screenshot of how it looks normaly, and one of how it looks when the view is altered vertically. Also the code pertaining to it. If anyone could help me figure out how to get the searchbar to be responsive vertically, that would be great!
How it is normally:
How it looks when you change the screen size vertically (the searchbar is behind the images):
HTML:
<div class="outcont">
<div id="top" class="header">
<div class="wrap">
<div class="col1"><img class="logoi" src="<?php bloginfo('stylesheet_directory'); ?>/images/main-logo.png" alt="<?php bloginfo('name'); ?> Logo" /></div>
<div class="col2"><?php wp_nav_menu(array('menu' => 'global-nav', 'container' => '')); ?></div>
</div>
<?php get_search_form(); ?>
</div>
CSS:
#searchform div {
shadow: 4px 7px 4px #000000;
margin-top: 350px;
display: flex;
justify-content: center;
align-items: center;
}
#searchform .text {
font-family: 'Merriweather';
padding-left: 35px;
height: 75px;
width: 600px;
font-size: 220%;
color: #B7B7B7;
border-radius: 50px;
background: white url('images/search-img.png') no-repeat;
background-position: 96% center;
}
#searchform .text:focus {
background-image: none;
}
#searchform .text img {
margin-right: 25px;
}
Check out this Fiddle I have made for you.
I have my main div with a background-image and the input inside of that div with the css like so:
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
margin-bottom: 0px;
right: 0;
}
#hero input {
position: absolute;
width: 200px;
height: 34px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 5px 10px;
border-radius: 50px;
outline: none;
}
This way the textbox will always stay in the center of the image no matter how the browser is scaled. In order for this to work the textbox must have a defined width and height.
So in your case replace your css for the searchbox with the css I have for #hero input and set the parent divs position to relative with position: relative;.
Please let me know how this works out for you.
Hope this helps!
I'm trying to create an image rollover button to place within a php file. The css is below...now what php script would I use to display the button?
#quotebutton {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
#quotebutton a:hover {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
background-repeat: none;
}
Why are you attempting to place this in a PHP file?
A couple of things off the bat tho:
You don't need the quotes in your CSS url("") tag. It can just be url(http://imagehere.com/sup.png)
The hover scope does not need to have every attribute re-defined. For example, you can just do this:
#quotebutton a:hover {
background-image: url(urlhere)");
}
Edit: Nikola has a more appropriate answer for implementation. I created an example for you of what Nikola's talking about however:
http://jsfiddle.net/XAtGP/
Cheers. :)
You can use html code, or php script that outputs the html code:
<a id="quotebutton" href="#">Quote</a>
In CSS, # stands for ID of some element.
If you are planning to use more than one such button on a single page, you should change #quotebutton to .quotebutton (with dot at the beginning) and use it like this:
<a class="quotebutton" href="#">Quote</a>
where . in CSS stands for CLASS of an element.
HTML classes can be used by many elements while ID is the unique identifier of the element and can't be used 2 times on the same page.
css: if anchor tag is nested within #quotebutton
#quotebutton>a{
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
#quotebutton>a:hover {
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
}
html example:
<div id="quotebutton">
<a herf="#"></a>
</div>
if not and #qoutebutton is the anchor the css is a follows:
a#quotebutton {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
a#quotebutton:hover {
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
}
html example:
<a id="quotebutton" href="#">quotebutton</a>
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic