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.
*/
}
Related
Hopelessly novice, but dedicated.
Using Wordpress.
I'd like to be able to do this:
http://www.ericryananderson.com/
On hover, the images turn greyscale and captions appear.
All is smooth.
My initial hopes of finding a easy plugin that switches images upon hover has been crushed.
All help is greatly appreciated.
Arvid
If you can simply add plain CSS and HTML code to your site, then this is the structure:
HTML:
<div class="cool-card">
<img src="whatever.png">
<h2>Whatever text you want to show</h2>
</div>
And then, in CSS:
.cool-card {
/* Add here any custom style (width, height, etc.) to the card */
}
.cool-card > img {
width: 100%;
height: 100%;
}
.cool-card:hover > img {
filter: saturate(0); /* Makes the image black and white, by setting saturation to 0 */
}
.cool-card > h2 {
/* If you want to change the look of the text, do it here */
display: none;
}
.cool-card:hover > h2 {
display: block;
}
If you can't, I'm sorry, but I've tried :)
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 */
}
I currently am styling my social sharing buttons using groupings (all Facebook buttons have a set style, all Twitter buttons do, etc.). Currently, I achieve this using a massive grouping of YUI's for each button type - this makes creating new sharing buttons extremely tedious, as I have to inspect each button to find its ID. Below is the code that stylizes my Facebook share buttons. The format is identical for my other button types, just with different YUIs - woefully lengthy. However, my code is functional as is:
#block-yui_3_17_2_1_1486492076694_136568, #block-yui_3_17_2_1_1486492076694_229456, #block-yui_3_17_2_1_1486492076694_301518, #block-yui_3_17_2_1_1486492076694_346464, #block-yui_3_17_2_1_1486492076694_390386, #block-yui_3_17_2_1_1486497764071_38998, #block-yui_3_17_2_1_1486497764071_84939, #block-yui_3_17_2_1_1486497764071_127888, #block-yui_3_17_2_1_1486497764071_167750, #block-yui_3_17_2_1_1486497764071_210706, #block-yui_3_17_2_1_1486762828716_16671, #block-yui_3_17_2_1_1487613145787_165402, #block-yui_3_17_2_1_1488578082993_168899, #block-yui_3_17_2_1_1489175439402_256947, #block-yui_3_17_2_1_1489873739917_158023, #block-yui_3_17_2_1_1490053051323_201623, #block-yui_3_17_2_1_1490837162453_152647, #block-yui_3_17_2_1_1491429139219_249912, #block-yui_3_17_2_1_1491948942477_176351 {
display: inline-block;
padding-bottom: 0;
padding-top: 0;
}
Ideally, I'd like to target each button type using their respective classes to REALLY consolidate the amount of code I have written (and make future additions much more efficient). I've tried everything I could think of, but nothing seems to work.
I'm currently working on the Squarespace platform.
Your problem might be because of Squarespace's default styles. When targeting elements, CSS prefers the more precise selector:
.social-icon {
background-color: red;
/* Less preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* More preferred */
}
You can override this by using !important:
.social-icon {
background-color: red !important;
/* More preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* Less preferred */
}
so when you style your social icons, use !important to override Squarespace's default styles.
.social-icon {
display: inline-block !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
Hope this helps!
I'm creating a custom style for Facebook with the Firefox plugin Stylish. I'm trying to get the top blue bar flat, but I cannot. I use the CSS code:
#blueBar {
background-color: transparent !important;
}
But it has no affect on it. Why is this?
#BrockAdams - I tried that, still nothing so I just used:
#blueBar {
background-image: url("http://i.imgur.com/vUnrU8x.png") !important;
}
Try to use change id #blueBarHolder background. like:
.hasSmurfbar #blueBarHolder, .hasSmurfbar #blueBarHolder.slim,
.hasSmurfbar #blueBarHolder #pageHead,
.hasSmurfbar #blueBarHolder #headNav,
.hasSmurfbar #blueBarHolder #blueBar {
background: transparent !important;
}
Hope it will works.
The recaptcha i'm using have a built-in css of
#recaptcha_area, #recaptcha_table {
width: 318px !important;
}
I see this when I use firebug.
My problem is
how can I override the built-in width? I've tried to place css code on my stylesheet like
#recaptcha_area, #recaptcha_table {
width: 207px !important;
}
but it doesn't work. Is there other way to override?
You should avoid using !important to override things.
You can't tell the recaptcha what it's width should be; however, you can specify a maximum width instead:
#recaptcha_area, #recaptcha_table {
max-width: 207px;
}
Note thought this might break the recaptcha area.