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.
Related
I want change the main menu of Avada Wordpress Theme in the header to be left-aligned not right,
it is like this:
and I want it to be like this:
How can I do that in the CSS?
Notes:
I did that using the CSS, but the problem that it is not working in all screen sizes when I tested it, I did that with this code:
.fusion-main-menu {
position:static;
text-align:left;
margin-left: 0px;
margin-right: 30%;
margin-top:4px;
}
but it is not made it fixed aligned to the left with the same space in all screen sizes :(
Avada has option of create "Layout Builder".
With this option, you can create global header with avada page editor as per your need. And keep button out side of navigation to maintain left right position.
Using CSS Only :
Use .fusion-main-menu { float: left; padding-left: 50px; } and use JS to get last button to out of nav tag. and apply float:right to that buttton.
jQuery( ".fusion-main-menu li:last-child" ).wrap("<div class='cst_btn'></div>"); jQuery(".cst_btn").insertAfter(".fusion-main-menu"); Make sure you have menu with ".fusion-main-menu" class only once on page else use diff class or ID.
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 was trying to change the colour of the bar below (https://www.milnerbrowne.com/manufacturing-solutions/)
Breadcrumb navbar
How do I change the colour to say yellow?
I tried editing header file but it doesnt work... any ideas?
style.css line:5854
.breadcrumbs {
padding: 16px 0;
background: #92278f; <-- change this.
color: #fff;
font-size: 0.875em;
}
NOTE. I'm not sure if your theme uses SASS, but if it does you'll need to change the SASS file rather than the compiled CSS.
If you're looking to update the styles in PHP you will have to use inline styling to achieve the colour change. This isn't recommended as you'll end up in a whole world of hurt if you try to change it in the CSS in future.
You will need to find where your breadcrumb nav code lives in your code and then add something like this:
<div class="breadcrumbs" style="background-color: yellow;">
A much safer way to change the background colour would be to use CSS, as #alex-thomas has mentioned.
.breadcrumbs {
background-color: yellow;
...
}
add_action('wp_head', 'wh_BreadcrumbsCSS');
function wh_BreadcrumbsCSS()
{
?>
<style type="text/css">
.breadcrumbs {
background: #d6df23;
}
</style>
<?php
}
Code goes in function.php file of your active child theme (or theme). Or also in any plugin php files.
Hope this helps!
I am in the process of creating my first wordpress template.
I have a top nav that is however pushed down by
html {
margin-top: 32px !important;
}
I found that this particular style is in the admin-bar.php file that came when I downloaded wordpress on my local machine.
I could just take the lines out of that file but that doesn't do the job because I want to create a template that can be bundled and uploaded to anyones wordpress.
Is there a way I can overwrite the above styling through my own template?
I hope this makes sense
Thank you so much
With css you can just do the following
html {
margin-top: 0px !important;
}
and it'll automatically override it.
But I can't tell exactly what you are trying to do.
You could enqueue a css file to the bottom of the page and overwrite the above with:
html{
margin-top: 0px !important;
}
It has to be the last CSS file to be linked.
I'm adding this for future reference because previous answers respond to the CSS question, but the issue here is not the CSS part, in fact html { margin-top: 32px !important; } is added by Wordpress for the toolbar.
As the reference says:
Note: If you have turned the Toolbar on in your profile settings, but still don't see it on the front end of your site, it may be that your theme does not call wp_footer() in its footer.php file, or the Toolbar may be disabled by a plugin.
I have wordpress sidebar with:
<h3 class="widget-title">TITLE OF SIDEBAR</h3>
and I need show small icon before "TITLE OF SIDEBAR. Can I do with CSS?
Or I must manually add image into code? like:
<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>
Pseudo elements will do what you want. Using the :before pseudo element, your CSS would look like this:
h3.widget-title:before {
content: url('/path/to/image');
}
This will place an image before the text content of the <h3>, however this won't change the DOM at all which is important to note.
A good explanation of how pseudo elements work can be found here, on CSS Tricks.
If your image is 10px wide, you could try this:
.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}
Keep your h3 tag without including img tag, and do the following:
h3.widget-title {
position: relative;
padding-left: <width of the icon image>;
}
h3.widget-title:before {
content: '';
width: <width value>;
height: <height value>;
position: absolute;
left: 0;
display: block;
background: url(<path of the icon image>) no-repeat;
}
.widget-title:before {
content: url(path/to/image.png);
}
You can find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/content.
h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}
Sample http://jsfiddle.net/KCXVM/
Yes, you can do it in CSS.
Simply use the :before pseudo-selector, like this:
widget-title:before {
content:url('imagename.png');
}
Or, of course, use h3:before { ... } for it to apply to all h3 elements.
Here's a working example for you
Browser compatibility: This works in all common browsers, except IE7 or earlier.
Why not simply apply the image as a background?
.widget-title {
background: url(...) no-repeat 50% 0;
padding-left: 20px;
}
So, at first, I thought a <span> thing would work.
Then, I tried this, and it worked seamlessly:
h3:before{
content: url('your url');
}
You can add icon before each h3 heading in CSS by following these ways below (via OIW Blog):
- Use Glyphicons of Bootstrap
If you are using Bootstrap then you can use Glyphicons to add icons to the desired title or text.
Bootstrap contains a diverse set of icons, to pick up a suitable icon you can take a look at here: https://getbootstrap.com/docs/3.3/components/. Once choosing a desired icon, adding it to theme is a piece of cake. You just need to add the card after the location that you want your icon to be displayed
<span class="glyphicon glyphicon-ok"></span>
Notice that the icon I added is “ok” so its class shall be “glyphicon-ok”. Each icon (in the list I mentioned above) is compatible to a different class.
- Use icons of existing Cheatsheet of the currently used Font or third party
If your website don’t use Bootstrap or the current set of icons of Bootstrap doesn’t meet your need (despite containing a lot) (Glyphicons of bootstrap has displaying errors on IE10 of Window Phone OS). After that you can check what font of the website you are using is and find out if it has an icons Cheatsheet library or not. For example: Elusiveicons, Fontisto, Material Design… are some of the fonts that have icons Cheatsheet which are for immediate use.
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons.
To use this set of cons, you need to add this code to the head section in your website:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
<i class="fa fa-edit"></i>
– If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property):
span.last-updated-time::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}
Notice: the code of content is hexadecimal code. You can find and replace it with the code of the currently used icon. With “Font Awesome Icons” you can find it here: https://fontawesome.com/cheatsheet