i downloaded a plugin in wordpress called WP Hotel Booking using Divi Theme Builder.
This is his actual design in my site:
How can i align these elements side by side like this?
I guess the problem is since its a wordpress theme and i didnt created that one, i can only use css to try do these changes.
This is the actual website if needed to try with console: http://198.199.66.183/ (yep, no domain yet)
These are the css class:
.hb_input_date_check {
/* arrival/departure date*/
}
.entry-content .hotel-booking-search select {
/* adults/children */
}
.entry-content .hotel-booking-search form button {
/* the button */
}
Can someone please help me? Thanks!
Give this a shot:
Inside your custom styles for this respective website, add these styles to the parent wrapper of the form. I've tested this with your current code & theme, and it appears to work:
.hb-form-table {
display: flex;
justify-content: space-between;
}
What this will do is ensure that the items are in a flexible container, not allowing them to go to the next row. Some additional CSS will be required to ensure that the input fields all have the same padding, and height(s). If you're new to flex-box, here's a full guide on how to use it, along with all of it's attributes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I have tried this CSS, But not working, still showing.
.wpnotif_admin_conf .wpnotif_sts_logo {
display: none !important;
}
Now what I can use to hide this Class from the Admin Area?
Use a comma if these are 2 classes.
.wpnotif_admin_conf, .wpnotif_sts_logo {
display: none !important;
}
It depends on where you are adding the CSS. As this is a backend page, adding the CSS on style.css or additional CSS in Customizer won't work.
You need to add a custom CSS for the admin and mention the CSS there. Check admin_enqueue_scripts.
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I am facing header media issues. I don't want that header area on my top of the website. I tried CSS code
.home #wp-custom-header {
display: none;"
}
but it's not working. please check my site for more details hindizone.in
It would be a better solution to change your theme template file so there is no such div container to be hidden. This can normally be found in header.php file of your theme. Delete the div with the class header-bottom.
Another way would be using CSS as you already tried. But you do not have an element with id wp-custom-header so this code is doing nothing. You can find out the right element to target with using the inspector of your browser.
I did this with your code and therefore found the classes you need to address in your css file.
Add following code to your custom css in the theme editor, or inside style.css of your theme:
#site-header.top-header .header-bottom {
display: none !important;
}
With the !important statement you make sure, that the display value is not being overwritten somewhere else in your stylesheet.
#site-header {
display: none;
}
...should work for your site.
i want to remove this area, in checkout page, but every my try was not working. I tryed to insert this CSS:
.avada-myaccount-user-column .username {
display:none;
}
This is product that trying to insert into cart, for testing purposes. Someone to help me ?
.avada-myaccount-user-column.username {
display:none;
}
Use that ^. When you have two classes in a DIV you want to target, you don't have spaces between them to target. If it doesn't work, it's possible to override with custom templates. See https://docs.woocommerce.com/document/template-structure/ for theme overrides. Since you're using a premium theme, their support should be able to help you. If you do theme overrides, you should do them in a child theme so you can update the parent theme gracefully as updates come out.
.avada-myaccount-user-column .username will not work because .username is not a child of .avada-myaccount-user-column.
Change your CSS to:
.avada-myaccount-user-column.username {
display: none;
}
This example means the first class requires the second class for it to be affected.
I am looking for a way to add space between Wordpress posts when using the
popular Toolbox theme.
If anybody could tell me where too put that "margin-bottom" tag I would be very glad!
Thanks a lot!
.post is the class applied to the entire post and it's not included in the default stylesheet for your theme so you'll have to add it.
In this file:
/wp-content/themes/toolbox/style.css
Under the "Content" section, add this class & style:
.post {
margin-bottom: 80px; /* <--- whatever you need */
}
80px is arbitrary... use whatever size/units you'd like.