I am adding custom CSS to my Wordpress theme to add a border to all images - however I need to figure out how to exclude the logo images in the header and the footer so that they don't have a border around them. Any ideas?
I've tried using the :not command in CSS, however I cannot figure out how to add a class to my header logo and my footer logo.
Here's the simple code I am adding to style the images:
img { border-radius: 4px; border: 1px solid #dddddd; padding: 4px; }
The hard part is now figuring out how to stop that CSS from putting a border around the images in the header and the footer.
Here's the page where I am trying to do this:
http://disaprimary.co.za/silikamva/about/staff-and-teachers/
I suggest to add a class to the images in footer and header like this:
<img src="" class= "noborder">
And in your CSS:
img:not(.noborder){
border-radius: 4px; border: 1px solid #dddddd; padding: 4px;
}
simply add the below given css:
a.brand img {
border: none;
}
div#media_image-4 a img {
border: none;
}
It will exclude the border of header and footer logo images.
Related
i am working on a grid view for image gallery
this is what i did so far but there are still vertical spaces between some of the photos
CSS:
#container{
background-color:transparent;
top: 60px;
left:8%;
height:100%;
border:1px solid ;
width: 82.19%;
position:absolute;
outline: 0;
}
.box {
background-color:#3e3e3e;
border:1px solid #bebebe;
margin: 6px 3.5px;
width:362px;
display:block;
float:left;
border-radius:3.6px;
}
.box:nth-child(2n + 0) {
float: right;
}
how i am applying it:
<div id='container'>
<?php
(some php & mysql here)
echo "<div class='box'><img src='pictures/$image' width='360' ></div>";
</div>
?>
i can't figure out the proper css to create a grid view with no extra vertical spaces.
images have varying heights fixed width, the space i m talking is that space which is not letting grid structure to form properly the vertical distance b/w some photos is alot more than it should be
Is there anybody who can help me?
NOTE: Don't suggest any jquery plugins i want to use pure css
Well, I have sidebar but text(in my case tables) inside sidebar are not aligned like I want.
From one .php I call another inside sidebar, like this:
<div id="sidebar2"> <?php include("tiket.php");?></div>
Here is it CSS of sidebar:
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
text-align:justify;
}
An this is how it looks:
How to put text on the left of the sidebar?
It would help a lot if you gave us the complete source code of the sidebar, or told us where it was located.
I think that the reason why the text is not aligned to the left is because you put in text-align:justify;. Remove that line.
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
}
What justify does is spread the text out evenly, which can be unhelpful if you don't have much text.
You can nest with CSS3
#sidebar2 table {
text-align: left;
}
you can read more about it over here
https://www.w3schools.com/css/css_combinators.asp
IF you see the below picture you can see that the input text consists of image as background.But I want to keep a line in between the text and image.Either by applying image border...or any other trick.Im unable to found exact example or tutorial or trick.Because I applying image as background.So Im unable to apply border...
background: url("~/application/modules/User/externals/images/mail.png") no-repeat scroll 10px 11px #FFFFFF;
background-size: 20px 20px;
The solution for the icons in inputs is using a label element with for="" attribute
the for attribute needs to have the id of the input as a value so when you click this element the input get focused
Check this fiddle
you could do
input { background-image: url.jpg; box-shadow: 0 4px 0 4px black; }
this should create a solid 4px black right hand side border. Adjust accordingly
you can place image in span and set its right border only ... you can change the span height according to wish, the tag containing span should be applied with the property of overflow: hidden; in order to work in bit proper way,
or simply you can add line to your image.
In my guessing you can do it by using border-right:1px solid #333 like,
<div>
<span style="border-right:1px solid #333"><img src="path-to-image" alt=""/></span>
<input type="text" />
</div>
Alternatively, you can add a separator or border in you images like,
CSS
img{
border-right:1px solid #333;
}
I've having trouble understanding whats going wrong in the css on this page.
On the left sidebar there a h3 element called testimonials with a 3px green border underneath it.
http://goo.gl/L7Lio
For some reason the border goes right up to the text in the next column next to it.
However on this page which use's exactly the same css it doesn't have that problem everything is aligned in the left sidebar correctly.
http://goo.gl/oL3km
Your CSS class of the content is floatright posts and its width is 500px. The rule is set here:
.single-page-testimonial .posts {
width: 500px;
}
The CSS class of the content of the correct page is post floatright sidebar-exist (with the additional sidebar-exist class) and its width is 490px. The rule is here:
.single-page-no .post.sidebar-exist {
width: 490px;
}
So your main content is wider than the correct one 10px. I think you may miss the class sidebar-exist somewhere.
The content DIV has 490px vs 500px (here it is the space of 10px)
.post h1, .mid-title {
border-bottom: 3px solid #004732;
color: #004732;
font-size: 18px;
line-height: 30px;
margin: 10px 0;
padding: 0;
} this css style is overwriting your h3 style,dude to which your facing that problem.
Solution:
just replace margin: 10px 0; with margin: 10px;. this will solve the problem, i`ve checked in firebug :)
Happy coding :)
Can somebody please help me out on how to increase the size of the rounded button with respect to text. Please check the image:
I want to be able to write any length of text and rounded button will stretch automatically based on text.
Please help me on how to write CSS for to get this working ?
Note: I don't want to use CSS3 border-radius because it does not work in IE and I don't want to use css3pie, etc, that's why i have created the rounded images. Thanks
Use the Sliding Door Principle. http://www.alistapart.com/articles/slidingdoors/.
In sliding doors you have two extreme as images(rounded) between these images is a background. The images move (slide further) based on the length of the text.
ul {
list-style-type: none;
}
ul li {
height: 31px; // height of the background image *reused below
margin: 10px; // width of the left image *reused below
float: left;
background: url(left.png) no-repeat top left;
}
ul li div {
height: 31px;
margin-left: 10px;
padding-right: 10px;
background: url(right.png) no-repeat top right;
}
//used with
<ul>
<li><div>text</div></li>
<li><div>texttexttext</div></li>
<li><div>texttexttexttext</div></li>
</ul>
I would probably opt for creating a div which inherits a css class like the following
<div class="button">TEXT HERE</div>
The CSS would be the following:
.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: blue; }
The above style would allow all browsers (except older IE's) to render the rounded corners rounded which means you will have no need for images