Currently I'm using Dooplay Theme for Wordpress.
How to disable video source scrolling bar? So It will show all sources?
Here's the source code
<div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-minimal-dark mCSB_scrollTools_vertical" style="display: block;">
<div class="mCSB_draggerContainer">
<div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 50px; display: block; height: 113px; max-height: 150px; top: 17px;" oncontextmenu="return false;">
<div class="mCSB_dragger_bar" style="line-height: 50px;">
</div>
</div>
<div class="mCSB_draggerRail">
</div>
</div>
</div>
https://pastebin.com/dl/C2GNRcD6 (css code)
Thank you.
Found the solution
#playeroptions {
max-height: 100%;
}
.dooplay_player .options {
height: auto;
}
Related
I'm trying to display the Instagram feed on a website, but the column breakpoint is not working.
When in a small device all the columns on the other sections stacks like they are supposed to, but for this part the feed part it is no stacking. They still side by side even in a small screen device.
I didn't do any customization for the bootstrap.
The custom css for the images is listed below.
I'm suspecting that my css is interfering with it somehow, but i didn't find a solution. Can you help me?
<div class="container">
<div class="row" id="instagram-feed">
{loop="$feed"}
<div class="col-md-4 col-sm-12 instagram-image">
<a
href="{$value.permalink}"
target="_blank"
style="background-image: url('{$value.media_url}')"
></a>
</div>
{/loop}
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 gallery-link" >
<p>
xpto
<a
href="https://www.instagram.com/xpto/"
target="_blank"
rel="noopener noreferrer"
>instagram</a
>
</p>
</div>
</div>
</div>
i'm using rain/tpl to loop the values.
Rendered result:
<div class="col-md-4 col-sm-12 instagram-image">
<a
href="https://www.instagram.com/p/Ce3K0vtqwWg/"
target="_blank"
rel="noopener"
style="
background-image: url('https://scontent-frx5-1.cdninstagram.com/v/t51.2885-15/288042510_360927436108874_1443195410220397807_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=8ae9d6&_nc_ohc=BcBzX46rui8AX9LhNfW&_nc_ht=scontent-frx5-1.cdninstagram.com&edm=ANQ71j8EAAAA&oh=00_AT-UQWOTJQXMvRivbpb7IAutNaT6D2_1ws1WdzhSNMARWA&oe=62B4FE5D');"
>
</a>
</div>
The css i added for this part:
.instagram-image a:before {
content: "";
display: flex;
font-family: "Font Awesome 5 Brands";
font-size: 50px;
color: var(--primary);
background-color: #73a2a9;
opacity: 0;
text-align: center;
transition: all 0.5s;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.instagram-image a:hover:before {
opacity: 0.5;
}
#instagram-feed {
width: 100%;
float: left;
display: flex;
justify-content: space-around;
}
I have a 1 page site with full screen scrolling sections.
Each section displays correctly on desktop, but on mobile the 'team' section has a white block top and bottom.
I have made another section for teams ('team2test') for use only on mobile - with HTML to try to make the section full height but the background image is not full screen
Please assist in either why the 'team' section has a gap top and bottom - or why my background image is not full screen in 'team2test'
Code for 'team2Test':
body,
html {
height: 100%;
margin: 0;
}
.team-images-mobile {
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 200px;
height: 200px;
}
.team-section {
background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">
<div class="team-images-mobile">
<img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
<img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
<img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
</div>
</div>
Link to site
Your problem comes from:
why the 'team' section has a gap top and bottom
That comes from your padding in
.team-images-mobile {
padding: 10px;
}
why my background image is not full screen
This come from the height: 100vh you set in .team-section
body,
html {
height: 100%;
margin: 0;
}
.team-images-mobile {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.team-section {
background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.team-section img {
width: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">
<div class="team-images-mobile">
<img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
<img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
<img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
</div>
</div>
The HTML of your "Team section" looks like this now:
<div class="grve-column wpb_column grve-column-1">
<div class="grve-column-wrapper">
<div class="grve-element grve-text">
<h2 style="text-align: center;">Team</h2>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<div class="team-section">
<div class="team-images-mobile">
...
</div>
</div>
</div>
</div>
<div class="grve-empty-space grve-height-1x" style=""></div>
</div>
</div>
If you check in your browser inspector, you'd find that the .grve-element (the heading text "Team") is taking up space before the actual .team-section in your code. And that element has a white background.
So it doesn't really matter with your .team-section style. It's more of an HTML structure issue.
There are 2 direction to solve this:
If you can control the overall HTML, simply move your .team-section background css settings to the .grve-column level; or
Make .grve-element height 0 by setting it as "position: absolute; width: 100%;". You'd need to give .team-images-mobile some padding so they won't overlap with "Team".
I want to make a watermark on a specific page on my project.
I write this in app.css
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("../images/SystemLogo.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
and this is my blade
#extends('layouts1.index')
#section('content')
<div class="container">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="watermarked">
<div class="text-center">
<h2 class="text-center"> Appri=oval report </h2>
<form method="post" action="/student/share-approval/{{$approval->uniid}}">
#csrf
<p lang="ar" dir="rtl">
// here is the approval report
</p>
<button type="submit" class="btn btn-primary">share the report </button>
</div>
</div>
</body>
</form>
</div>
#endsection
The problem is not showing the watermark as the image I want .. the result is a default background. How can I show the image as a background?
I think your HTML is formatted incorrectly. The ending form tag and div is below the body tag.
Try this:
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("https://en.opensuse.org/images/4/49/Amarok-logo-small.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
<div class="watermarked">
<div class="text-center">
<h2 class="text-center">Stuff here</h2>
<form method="post" action="/#">
<p>
A Form here
</p>
<button type="submit" class="btn btn-primary">Button</button>
</form>
</div>
</div>
I'm currently building a site on Wordpress using the html5blank as the parent theme. I've built all the front-end text pages on HTMl/CSS. When I've transferred all the files over a lot of the styling has broken - I've fixed the majority of it but there's one section that I cannot fix. This is how it should look -
And this is how it looks in the Wordpress site -
When I've inspected the site via developer tools it seems as though these rules are not being applied -
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
Also, the row in the front-end site is applying a height rule but not in the wordpress site. I've looked at applying specificity rules and !important but nothing (this also disrupts other styling rules on other parts of the site). I'm really stuck on this and would appreciate any assistance.
Here's the full code for the section -
section#products {
height: 800px;
max-width: 100%
}
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 70px;
height: 70px;
position: relative;
line-height: 1;
top: 50%;
}
figure {
text-align: center;
display: inline-block;
max-width: 80px;
height: 100px;
vertical-align: top;
margin: 5px;
font-size: 9px;
margin-bottom: 60px;
}
figure img {
padding-bottom: 5px;
}
.four {
padding: 0;
margin: 0;
border: 0;
}
.images {
margin-top: 30px;
border-bottom: 10px;
}
.images img {
margin-left: 20px;
padding: 10px;
}
.chevron {
height: 150px;
}
.chevron figcaption {
margin-top: 20px;
font-size: 13px;
color: #d3d3d3;
}
hr.hragency {
display: block;
width: 250px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="2k4kproduction.html">
<figure>
<img src="images/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="postproduction.html">
<figure>
<img src="images/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="2d3danimation.html">
<figure>
<img src="images/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="adhoc.html"><figure>
<img src="images/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="interactive.html">
<figure>
<img src="images/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="tvadverts.html">
<figure>
<img src="images/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="360video.html"><figure>
<img src="images/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
<hr class="hragency">
<div class="row">
<div class="images">
<div class="four columns">
<img src="images/VIDEO.jpg" alt="Video">
<img src="images/blog.jpg" alt="blog">
</div>
<div class="four columns">
<img src="images/faq.jpg" alt="FAQ">
<img src="images/VIDEO.jpg" alt="Video">
</div>
<div class="four columns">
<img src="images/blog.jpg" alt="blog">
<img src="images/faq.jpg" alt="FAQ">
</div>
</div>
</div>
</div>
</section>
<section class="chevron">
<div class="container">
<div class="row">
<figure>
<figcaption>SEE MORE</figcaption>
<i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i>
</figure>
</div>
</div>
</section>
Try this:
.agencyproducts{
width:100%;
text-align:center;
}
.agencyproducts a{
display:inline-block;
}
Because container .agencyproducts need to have text-align:center and first childs of it must be displayed as inline-block ... then they will display properly. You only set child of a tag as display:inline-block but do not tell CSS how it should treat it parent.
With what I understood try appending !important to your custom css properties so as to override any pre-existing style properties.
height: 150px !important;
This is my HTML code
<div>
<div class="text-center col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-md-3 col-sm-3 animate-box">
<div class="team-section-grid" style="background-image: url(assets/img/image-bg.jpg);">
<div class="overlay-section">
<div class="desc">
<i class="icon icon-wallet2"></i> Buy Now
</div>
</div>
</div>
<div class="text-center add-cart">
<a href="" title="">
<i class="icon icon-cart"></i> Add To Cart
</a>
<a href="" title="">
<i class="icon icon-heart" style="margin-left: 10px;"></i> Add To Wishlist
</a>
</div>
</div>
View More..
</div>
What i am trying to achieve through JQUery is whenever click the view more.. or whenever the focus is on that button I want the following div appended to the current div so that I can dynamically load products from the DB and append it.
Can anyone help me with that code? Thanks in advance..
Did you tried: http://api.jquery.com/append/ ?
A very simple example:
jQuery('.wrapper a').on('click', function(e){
e.preventDefault;
jQuery('.wrapper').append('<div class="item"></div>');
});
.wrapper{
position: relative;
background: #e6e6e6;
padding: 10px 10px 50px 10px;
}
.wrapper a{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 0;
background: #aaa;
color: white;
text-align: center;
border-top: 3px solid #fff;
}
.item{
display: block;
width: 100%;
height: 20px;
background: #ccc;
margin: 0 0 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
show more
<div class="item"></div>
</div>
Instead of append('<div class="item"></div>') you can append html-templates, too. It could be more comfortable to use a template engine here ...