I am playing around with a wordpress site as I'd like to switch from Wix. It is being hosted here: https://globalstudyukbeta2.000webhostapp.com/
I am wondering how I can reduce the space between each section, as there is a lot of empty space. I tried using the CSS editor and looking at the stylesheet but to no avail.
Thanks!
James
Add this css in your active theme style.css
.bg-secondary {
padding: 30px 0;
}
.widget.shapely_home_parallax {
height: 335px;
}
Related
I want to change the logo and main menu in the header on this page only:
https://www.maisondefemmes.com/galentines-day/
I've tried updating the css and only managed to edit the search and cart colours.
I've tried using both content and background-image, as well as using logoimg bg--dark rather than #logo but to no avail.
.page-id-3055 #logo {
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
}
I want the logo and main menu to be #b50c3f but they don't budge. I've managed to change Search and Cart.
The Logo is a html img tag and you can't change it that way. The content attribute only works for pseudo elements. One solution would be the following:
.page-id-3055 .logolink > img {
display: none;
}
.page-id-3055 .logolink:before {
display: inline-bloc;
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
width: 100%;
height: 50px;
}
You can detect url with jquery and then change logo and menu by jquery css
if (window.location.href.indexOf("galentines-day") > -1) {
// do something
}
I'm trying to personalize my portfolio homepage, which is password protected and has been built in Wordpress with the Salient theme (http://federicaaradelli.com/).
I've only managed to add some margins and paddings to the password-form but I can't change the page background color or add a background image.
That's what I've written in the personalized CSS:
.post-password-form {
margin-top: 20%;
}
.post-password-form {
padding:10px;
background-color: white;
}
I've also tried to inspect the page/elements but it didn't really get me anywhere.
Does anyone know how to solve this problem?
Thanks!
Federica
Add this to your CSS:
.container-wrap {
background-color: yellow !important; /* Generally, you don't need
to use "!important" in
your CSS, but currently
there is some overwriting
in your code and I use
"!important" as a quick
fix.
*/
background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
/* Optionally: */
background-repeat: no-repeat;
background-size: 100%; /* Sometimes it would be better to
use "cover" instead of "100%",
but in your case "100%" is the
best option.
*/
}
I'm using oceanwp theme,
I want to have topbar that disappears when scrolling and the menu will jump to the topbar place (with opacity) i was trying this code
#site-header {
position: fixed;
left: auto;
width: 100%;
z-index: 2000;
opacity: 0.9;
}
and that not working,
the menu is stick in his place and there is a hole in the topbar place,
someone know how to fix it?
Can you send to us link to your site, this gonna make everything more easy. If, this 'sticky' menu is creating with jquery or vanilla js then your css fixes doesn't change anything. Just check your js files for ".scroll(" and you should find this snippet.
//Sorry for my english skills :/
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop < 50) {
document.getElementById("site-header").style.top='auto';
} else{
document.getElementById("site-header").style.top=0;
}
}
I know it's not the best semantic solution, but its should work for your site. Add this to custom js, or another js file.
I checked on your site and its working :)
Just add this code to your custom CSS/js in the theme customizer section and vuala!
#site-header {position: stuck; left: auto;
width: 100% z-index: 2000;opacity: 0.9;
}
This one worked for me
#site-header {
position:fixed !important;
z-index:1000;
top:0;
width: 100%;
}
#main {
margin-top: 70px !important; /* 70px - width of the header. This can be changed from the theme customizer */
}
Can someone maybe help me with a few lines of css code?
I would like to my search section on my page:
http://www.virtual-forms.com/docs/
To look something like this:
https://docs.wedevs.com/
I'm new to CSS and Wordpress
Thanks, Davor 🤗
EDIT:
My latest try was with this:
/*Header search weDocs*/
.wedocs input[type="submit"],
.wedocs input[type="search"]
{
background-color: #fff !important;
color: #000;
width: 50%;
}
But no luck.
you should get on with applying correct CSS by inspecting the elements in your web browser (right-click element on site > Inspect) to find their correct classes. inspecting linked site virtual-forms.com shows that the whole search form has a parent form element with class="search-form wedocs-search-form", with child divs with classes "wedocs-search-input" for input, "wedocs-search-in" for dropdown and "search-submit" for submit-button.
I would put display: flex; on the parent element:
.wedocs-search-form {
display: flex;
}
use classes to style each individual element there
.wedocs-search-input { }
.wedocs-search-in { }
.search-submit { }
Using those classes should get you closer to getting the correct style to those elements. read up on the flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would use flex-grow on input to make it bigger for example. Hope this gets you along.
I am helping out producing a website for a friend but the header isn't fixed at the top, it overlaps the slideshow at the moment. However if I collapse the screen to 'ipad' width the header is fixed at the top.
This is the site at the moment: http://www.testing-30-10-1993.com/
I don't want to risk editing code in case it messes up. I purchased this theme from Template Monster. I just really want the header/nav to be fixed like if you drag the website width to ipad size.
Can anyone help? Alternatively does anyone know anyone/website where I can pay someone to do this? Cheers & appreciate all help. I would add in code but I'm not even sure what section of the code I should copy.
x
If you are not afraid to edit a line of code, go to line 844 of the main-style.css file in the folder to find this declaration:
.page-template-page-home-php .header > .container > div {
position: absolute;
}
Change it to this:
.page-template-page-home-php .header > .container > div {
position: relative;
}
Otherwise, if you'd prefer not to mess with the theme's files, install a plugin for adding custom CSS and paste in the following code:
#media (min-width: 1200px) {
body.page-template-page-home-php .header > .container > div {
position: relative;
}
}
Good luck!