How can I achieve changing backgrounds in Yii2? I am new to Yii2.
Here is something similar: codepen.io
Do I need to do it via CSS or should i do it via any Extensions ?
In view file make html structure like in your link, next you need to load css and js code. You can do it in few ways, but most simple is add it in the same view file like below:
<?php $cssContent = 'put css content here';
$this->registerCss($cssContent);
$jsContent = 'put your javascript content here';
$this->registerJs($jsContent);
?>
<div id="change-bg-image"></div>
<div id="change-bg-color">
</div>
You can do it via javascript, just change wrapper or document.body style.
The variable is for example there:
document.body.style.backgroundImage
Happy coding.
(you can declare array of links to images and do setInterval, also you can despite of document.body use for example document.getElementById("background") )
Related
Is it possible to insert -- dynamically generated -- content with CSS into the same website a second time, let's say a div-container like this: <div id="duplicate-me">dynamically generated content</div>
CSS is used to style content that exists or will eventually exist on a page. It can't load or insert dynamic content to a page. It can control showing/hiding content on a page, but the content needs to be placed there first (with the exception of psuedo-classes, but that's not really "dynamic"). As others have mentioned, Javascript/jQuery is what you are needing to use to achieve what you are wanting.
Using pseudo element's in CSS we can kind of create an element and style it in CSS. But then this has it's own limitations.
Javascript is what will essentially help you achieve this using document.createElement() method and other methods line appendChild() etc
CSS cannot be used for duplicating, but you can use javascript to duplicate div,p or any other element. We do it like
In the html file
<head>
<!--all other stuff-->
<script src='sketch.js'></script>
</head>
in the sketch.js file
var dupElem = document.createElement('div');
dupElem.id = "duplicate-me";
document.body.appendChild(dupElem);
//to manipulate the text content we do
dupElem.textContent = "some lorem ipsum"
//or else you can do a for loop
for (let i = 0;i < 3;i++){
document.body.appendChild(dupElem);
}
It is possible to make a copy of a node element but you need Javascript to do that.
<div class="duplicate-me">dynamically generated content</div>
In your Javascript:
let nodeToClone = document.getElementsByClassName("duplicate-me")[0];
let newClone = nodeToClone.cloneNode(true);
document.body.appendChild(newClone);
Please note that id needs to be unique in the document. That is why I used class.
Here you can learn more about clone.
O.K., JavaScript then. I'll look into it. Thank you for the answers. :-)
I used add_theme_option('custom-background') in my wordpress functions.php file. And it is working but when i set background image i have not got the image. In the page style it is showing [site_url] in the url. But i need to show localhost/wordpress instead of [site_url].The style line is given below:
background-image: url("http://[site_url]/wp-content/uploads/2019/02/pexels-photo-958168.jpeg");
I got an alternative solutions. The problem is with the theme. Other theme is working correctly. For this theme i did this:
<body <?php body_class();?> style="background-image: url('<?php echo substr(get_background_image(),11);?>')">
Now it is returning- "wp-content/uploads/2019/02/bg.jpeg". And i will get background image dynamically.
You probably mean add_theme_support(), not add_theme_option().
Don't know why it's happening, but a workaround would be to tweak #Emma's suggestion a bit. Something like
<?php $url = parse_url(get_background_image(), PHP_URL_PATH); ?>
<div
class="myClass"
style="background-image: url(<?php echo $url?>)">
</div>
(Probably also need to test if the initial image URL is empty or not.)
(And of course this assumes the WordPress install is at the site root. Some further changes might be needed otherwise, and it might end being more like Emma's. I might also add that you could instead use jquery on the client side the fix the problematic URL.)
super css noob here.
I'm using a wordpress plugin called visual composer which allows you to name a Row (it's like a block element) with a Row ID or a Class name. I'm trying to have it so when a user hovers over this row and when they click it, this clicking will simply take them to another page within my website.
It allows for an area to have the css for this class or ID that I can associate with the tag, but after searching I'm either searching the wrong thing or can't find it but I am looking for the css that would allow me to do this!
You can't only use css to link to other page, you need javascript. For example the class name is linkPage:
document.getElementsByClassName('linkPage')[0].onclick = function(){
location.href= 'some url...'
}
<div class="linkPage">linkPage</div>
You'd need to inject a bit of JS into the theme that listens on window for a click with the desired ID or class, then call window.location.href = URL or something of that nature.
CSS doesn't have the power to cause browser location changes.
CSS
CSS (Cascading Style Sheet), as its name states, defines a set of rules and properties for an HTML page you wish to style (stuff like colors, size, asf); and user interaction (even as minor as pointing to an URL) are not part of its scope.
Basic
Talking about a giant like WordPress and a strong plugin such as Visual Composer, extremely old and standard features like link/image/table asf are always to be found. You may have a look at visual composer's "Raw HTML" feature (https://vc.wpbakery.com/features/content-elements/) in combination with a regular "a" tag (http://www.w3schools.com/tags/tag_a.asp).
Editable
Asking how page linking can be achieved through editing of a CSS file, then you might as well look into different editable content types of the plugin - such as HTML or JS.
Click on table row
Best approach to have table cells/rows clickable would be by the use of JavaScript; see Adding an onclick event to a table row
Link using jQuery and Javascript (easier method):
$(".link").click(function(){
window.location.replace('https://www.example.com');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
Link using pure Javascript (harder method):
x = document.querySelectorAll('.link').length;
y = 1;
while (x => y) {
document.getElementsByClassName("link")[y].onclick = function() {
window.location.replace("https://www.example.com");
};
y++;
}
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
I've added a set of border stylings to my media attachment page using Advanced Custom Fields. What I want is to be able to select one of these options and add the relevant style as a class to the attached image.
For example: a blogger can create a post and mix and match different stylings to the images without knowing any CSS or HTML. I've attached a screenshot of the attachment page.
I've been investigating this and it seems like it has to do with attachment_fields_to_edit or attachment_fields_to_save filters, but I can't put it all together.
http://imgur.com/XW42bLo
So ideally, if I were to select the Green Border option the image in the post would have a "green-border" class.
Apologies if I'm misunderstanding the question, but could you not just do:
<?php
$style = get_field('border_options');
?>
<div class="<?php echo $style . '-border'; ?>">
Content
</div>
?
I'm new here, this is my fist question, but I've performed research and can't find the answer.
I'm developing a Wordpress site and hacking a template that uses masonry with summaries and thumbnails on a grid on the index page. When you click on an image you're directed to the post content. This is the theme: http://jinsonathemes.com/fabs/?themedemo=Vasiliki
What I'd like to implement is this:
When the user clicks on the thumbnail, the content is revealed and expanded on the same page. Here's an example from Up Magazine: http://upmagazine-tap.com
I looked at the JQuery script on this very cool Fiddle (#FS34t). The boxes expand and collapse content on click, but that's not quite what I have in mind for this site. Will definitely implement on another.
I thought it would be an easy show /hide function, but each image is linked to a specific post using the same "content" div. How would I use an image in a masonry grid as the trigger for an expand/collapse of content of the respective post -- as in the Up Magazine sample?
Thank you for reading.
I would add the_content to the post div in its own child div. Then hide that div in the css.
Then I would create a function that opens up that div [I'd use jQuery slideDown()]. The function would also include the masonry reload method [.masonry( 'reload' )] in that function.
I would then bind that function to a click on the div, or perhaps the post thumbnail.
Very roughly:
html
<div class="post">
<?php the_post_thumbnail() ?>
<div class="excerpt"><?php the_excerpt() ?></div>
<div class="post-content"><?php the_content() ?></div>
</div>
the css
div.post-content {
display: none;
}
js
$('.classofpostthumbnail').click(function() {
$(this).siblings('.excerpt').slideUp();
$(this).siblings('.post-content').slideDown();
$('.masonrycontainer').masonry('reload');
});
However my js could definitely be improved. [For starters chain the slides with their callbacks so that all the animations run after each other. And of course your html and css will probably be a lot more complicated.
Well ... UpMagazine does not have hidden content on div's we load content into the container with AJAX sending requests to /wp-admin/admin-ajax.php (see: http://core.trac.wordpress.org/browser/trunk/wp-admin/admin-ajax.php ).
Glad you liked the website.