I'm working with modifying a Wordpress theme. The theme is named glare and i would like to do the following. (URL: http://tofsti.no/letsbuzz/)
Remove the background from the menu, so that only text shows. I have tried:
div.row.transparent{
visibility: hidden;
}
#navigation .nav a {
color: #fff;
font-size: 20px;
}
But the visibility:hidden; hide the menu...
What to do?
I would like to push the gallery images up (testgallery url: http://tofsti.no/letsbuzz/?galleries=test ) - a couple of px below the menu.
How to do this? I have tried:
div.row.col-listing{
top: 200px
}
Use the following CSS for the menu and it should work:
header .transparent, #navigation .nav a {
background:none;
}
Everything in your theme that has a class of .normal has a very large margin-top value (232px):
.container .normal {
margin:0; /* or add whatever value works for you */
}
question 1: Since the div contains both the text/links and the background it all disappears when visibility is "hidden".
I'm guessing there is an opacity: setting somewhere, set to something like 0.5.
Does removing the background-color value and setting the opacity to 1 work?
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 am using a bootstrap carousel and want it to look like this
The Problem is, since I am not getting the navigation menu to look like this. Only when I delete the class 'carousel-indicators' it looks pretty much, as I want to, but then if it auto-slides the active-class of the navigation does not work. Do you have any Solution for that?
Here is my code without the class .carousel-indicators: https://jsfiddle.net/7Lta9vra/1/
I've tried like this without success:
.carousel-indicators {
all: initial;
* {
all: unset;
}
}
.carousel-indicators.carousel-indicators li {
text-indent: 0;
border:none;
background-color: transparent;
}
I've been trying to hide everything apart from the main content on the following Facebook post
I've been injecting the following css without luck - can someone please help?
html body * {
display:none;
}
#contentArea {
display:block;
}
Below is a screenshot of what I'm after.
With body * you are hiding every child.
With #contentArea you are showing this block, but still - body * persist for child elements AND parent elements.
You have to specify much more rules to hide everything else.
As mentioned before, you cannot display an element which has a parent that was hidden. Anyway, Facebook's layout is simpler than I thought, all you have to do is hide two elements: the header and sidebar. This of course assumes that a user is not logged in.
Inject this CSS
#pagelet_bluebar, #rightCol {
visibility: hidden;
}
Result:
Result (user logged in):
To hide the chat sidebar, you can add #pagelet_sidebar to the CSS.
#pagelet_bluebar, #rightCol, #pagelet_sidebar {
visibility: hidden;
}
To conclude: Hide the main parts instead of everything, or use jQuery to target all except your element as suggested by #MaVRoSCy.
Thanks everyone - the following seems to be the combination of everyone's answers:
#leftCol, #pagelet_bluebar, #rightCol, #pagelet_bluebar {
visibility: hidden !important;
display: none !important;
}
html ._5vb_.hasLeftCol #contentCol {
border-left: initial !important;
margin-left: initial !important;
padding-left: initial !important;
padding-top: initial !important;
}
._5vb_, ._5vb_ #contentCol {
background: none !important;
}
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}
Hi I'm using wordpress and i am using the gallery shortcode, but the problem is that my images have borders around them.
I set the padding to 0 and i set the border to 0 in css but my thumbnails still have borders around them.
Here is the css ---> https://gist.github.com/mihadaiko/5011743#file-style-css
and here is what it looks like:
you need to use css
img { border: none; }
Try this
a img { border: 0 none; }
Also added your code in jsfiddle here: http://jsfiddle.net/HkTDK/2/ and there are no borders on images, so it might be inherited from somewhere else.
Another solution would be to add:
#gallery-1 a, #gallery-1 img { border:0 none !important; }
If this doesn't work, it means that border is a background image, so just add background: none !important too to the above line
Thanks a lot!
works perfectly for Wordpress if you are using Elementor.
If you are using several galleries (1,2,...,n) u need to add to your Custom CSS:
#gallery-1 a, #gallery-1 img { border:0 none !important; }
#gallery-2 a, #gallery-2 img { border:0 none !important; }
...
#gallery-n a, #gallery-n img { border:0 none !important; }
and so on.