The default footer widget in the responsive theme is 1/3 of the total screen width. How can I make it wider to 100%?
you can find footer.php file inside http://domain.com/wp-content/themes/yourtheme directory.
in it you can find similar lines beginning with
<!--start footer-->
<footer id="footer">
there you'll find <div class="something"> tags.
If you know what you're doing, change the class of the div.
Always keep a backup :)
Adding the following to the CSS style in the theme options solved it for me:
#home_widget_1.col-300 {
width: 100%;
margin: 0;
}
Related
I'm trying to add a slider to Wordpress (Flickity's slider: https://flickity.metafizzy.co) but am unable to figure out how to add it as it doesn't follow the typical external plugin format where I can add a zip folder.
Tried adding code into the text section of a post.
Tried setting up a custom css but not too sure I applied it correctly. Don't really know where to begin.
There are many slider plugins around already, you can use them to get inspiration. Look e.g. at gutenslider that implements a slider block or at older plugins, e.g. slide anything. As all wordpress plugins in the plugin dir must follow a GPL license, you can look at their source code.
That said, you can write your own plugin with flickity. You would have to give users a way to select which images they want to slide and then include the flickty stylesheets and javascript and make php create the needed Document Model for the slider.
You can create a template and call js and css using the wp_enqueue_script and wp_enqueue_style which is used Flickity's slider.And create html like this
HTML
<div class="main-carousel">
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
...
</div>
Put jquery code in your template like below
$(document.ready(function()
{
$('.main-carousel').flickity({
cellAlign: 'left',
contain: true
});
}
This is because this is not a WordPress plugin. You do not need it to be one either. Place the files you have downloaded somewhere in the theme folder and then use wp_enqueue_script to load the JS files and wp_enqueue_style to load the CSS files.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
If you are not using a child-theme, then it is recommended that you do. But here is what you will have to do: you need to edit files - such as header.php, footer.php, styles.css and the file where you would like you slider to go (page.php)
Add this to your header, just above styles.css:
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
Add this code to your footer.php (I have also included jquery, you may not need to):
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<script>
$('.main-carousel').flickity({
cellAlign: 'left',
contain: true
});
</script
This goes at the bottom of your styles.css:
.carousel-cell {
width: 100%; /* full width */
height: 300px;
background: #222;
/* center images in cells with flexbox */
display: flex;
align-items: center;
justify-content: center;
}
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
And finally this is what displays your slider (this goes wherever you would like your slider to display - with link to the images you would like to use):
div class="main-carousel">
<div class="carousel-cell"><img src="https://source.unsplash.com/random/1197x458"></div>
<div class="carousel-cell"><img src="https://source.unsplash.com/random/1198x457"></div>
<div class="carousel-cell"><img src="https://source.unsplash.com/random/1199x456"></div>
</div>
You can see the slider in effect here
I'm developing a Wordpress-theme with a theme-options page. In these options, a max-width for the website can be set, but I'm having some difficulties with the content-area.
When the max-width is filled in, the header- and footer-area get the max-width and a margin: O auto;.
The content-pages will be created using the Gutenberg Builder and I want to be able to add background-attributes to the blocks I use and display them full-width, but the content to fall into the max-width which was defined before.
HTML:
<header class="site-header">
<div class="header-wrapper"></div>
</header>
<main class="site-content">
<article class="post-10">
<header></header>
<div></div>
<footer></footer
</article>
</main>
<footer class="site-footer">
<div class="header-wrapper"></div>
</footer
CSS:
.header-wrapper,
.footer-wrapper,
article {
max-width: 1366px;
margin: 0 auto;
}
I get this:
I want my background to be full-width, but my content to have the same with as the content of my header and footer.
Is there a possibility to set the same max-width for the header-, content- and footer-section of the page, and make sure the background in the content-area is still full-width?
You can activate "wide alignment" and "full alignment" by adding add_theme_support( 'align-wide' );
to your functions.php file. The user then has the option to align images across the whole viewport width.
See also https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#opt-in-features
But that's for images, not for backgrounds.
For background areas/images you could try to create regular blocks (100% of the content area) which have margin settings like margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); (same as in full-width Gutenberg blocks) and padding-left/padding-right calc(50vw - 50%);: That way the block would span the whole viewport width, but the content area would have the width of the content area (full width minus padding). You also would have to add the regular padding you want to use inside your content column to those values.
If I understand then your css should look like this:
.header-wrapper,
.footer-wrapper,
article header, article div, article footer {
max-width: 1366px;
margin: 0 auto;
}
article{
width: 100%;
background: blue;
}
but only if max-width is setted for those 3 divs inside article
Does content-block is represented by article ?
Update
I recreated codepen from https://css-tricks.com/full-width-containers-limited-width-parents/
https://codepen.io/anon/pen/eaJyqV
If this is possible you could put image with position: absolute and then put text with position: absolute on top of it but I guess your content-block doesnt work that way ;/
I'd like some help with my responsive bootstrap theme that I customized myself.
The problem is, there is some white part below my footer after the light-blue jumbotron.
I'd like my footer to be so that it goes on top of the jumbotron and not after the white part.
You can view here: enfriend.tk
Try adding this to your page...
<style type="text/css">
.jumbotron
{
margin-bottom:0;
}
</style>
Looks like the .jumbotron class has a 30px margin on the bottom. If you override the class, it should fix.
Also, you have bootstrap.css and bootstrap.min.css. You only need one or the other. Use the "min" version for production...the other can be used while debugging.
Please help me fix or solve a problem regarding the positioning of the sidebar. I have a Wordpress with the Constructor theme in a one right sidebar layout. The webpage can be seen in the following links. (One has a tall head menu the other has a short. The height of the side menu is varied too.)
http://salvavita.hu/web_2012/
http://salvavita.hu/web_2012/?page_id=119
The html structure is as follows:
<div class="wrapper" id="wrapcontent">
<div class="box shadow opacity layout-right" id="content">
<div id="container">
content stuff
</div><!-- id='container' -->
<aside id="sidebar">
sidebar stuff
</aside>
</div><!-- id='content' -->
</div><!-- id='wrapcontent' -->
For some reason the side menu is broken to a new line and pressed to the left, outside the container. You can see it on top of the footer. How can I force the sidebar to be rendered in the same line as the content? (So it sticks to the bottom of the top red part of the site.)
Pure css would be preferred. At this point, it is OK if it spills out of the content to the right. (Position fixed is no good, because there are two types of header heights, and it has to work with a restored down window too.)
In theory, the layout is:
Width: 968px
Sidebar width:220px
Extra sidebar width:120px (not used)
Header height: 518px (has a custom coded short variant)
Thank you for the help,
Sziro
Alan Jenkins is right, if you change the width of #sidebar from 216px to 208px then the sidebar works Ok. What you've done with the big righthand margin on the main container and the negative lefthand margin on sidebar seems a bit weird to me. If it was me I'd probably do something more like;
.layout-right #container {
/* (Line 197 remove the following rule) */
margin-right: 220px
}
.layout-right #sidebar {
/* (Line 202 remove the following rule) */
margin-left: -220px;
}
#sidebar {
/* (Line 208 reduce the width slightly and change the float from left to right) */
width: 208px;
float: right;
}
I'm using a jquery plugin to create an image slider with thumbnails underneath.
My goal is to have the main image's background be bg.png, with the thumbnail section background be wood.png.
I've changed the CSS to what I believe to be correct(see below), but the background of the thumbnail section isn't extending the full 961px, it's restricted to the 921px width I've established with the main image. I have a feeling this might be due to nesting within the plugin's php/jquery, I'm just not sure how to go about altering it to work. If that is the case, how do I fix it? If it's something else, how do I determine what it is/how to fix it?
thethe-image-slider.php
timthumb.php
live site
Thanks.
CSS
.thethe_image_slider.white-square-1{
background: url('../images/bg.png');
}
.white-square-1 .thethe-image-slider-thumbnails{
background: url('../images/wood.png');
margin-top: 20px;
margin-bottom: 40px;
width: 961px;
}
find this line
<div class="thethe_image_slider white-square-1" id="thethe_image_slider323" style="width:921px;"><div class="thethe_image_slider_inner" style="width:921px; height:392px;">
and change to this
<div class="thethe_image_slider white-square-1" id="thethe_image_slider323" style="width:961px;"><div class="thethe_image_slider_inner" style="width:921px; height:392px;margin:0 auto;">
in your code
Move your thethe-image-slider-thumbnails div out of your thethe_image_slider white-square-1 div but inside the gallery div. Works fine for me then.