I'd like to reduce the current height of 182px of my 'footer-widget-container' (I'm using Wordpress theme Press Coders).
However, I can't find the relevant file to edit
(have tried footer.php, black.css and style.css, anyone know which file I need to edit?
Please see the site at:
http://www.oxfordlifestylecentre.co.uk/
add this to your style.css file
.footer-widget-container {
height: 125px;
}
what height you want to just change it.
Your css code for Footer is in Style.ccs.
Open it and find
.footer-widget-container {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
And then just adjust height
.footer-widget-container {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
height:200px; /***Your Desired Height**/
}
Related
Greetings I have problem. How get rid of border-bottom on calendar view(see image 1)?
This appears if using this css.
.fc-scrollgrid-section-body > td {
border-bottom: 1px solid gray;
}
What happens if you change border-bottom to border and sets to 0px then? Well calendar loses completely its bottom row(see image 2) It also did not showing in dayView and monthView.
I tried add another custom styles to css(before that setting .fc-scrollgrid-section-body > td its border to 0px )
1)I know what (investigated in inspector) what days have fc-day style(see image 3)
I added this styles to CSS but it also not working it completely not showing red border
.fc .fc-timegrid-col{
.fc-day{
border-bottom: 1px solid red;
}
}
//and
.fc-day{
border-bottom: 1px solid red;
}
another try
.fc .fc-timegrid-cols{
.fc-day,
.fc-timegrid-col{
border-bottom: 1px solid red;
}
}
using role tag to achieve same result
[role=gridcell] {
.fc-timegrid-col
.fc-day {
border-bottom: 1px solid red;
}
}
What I want is to have day columns bottom line and grid axe do not have one.
I found solution for dayGrid and WeekGrid not for month yet.
.fc-day .fc-timegrid-col-frame {
border-bottom: 1px solid $pitch-black-100;
}
UPDATE after 3+ hours of investigating
to add line for gridView month need to add this thing to styles
.fc-daygrid-body {
border-bottom: 1px solid $pitch-black-100;
}
I have a problem with the chrome browser. When I make custom "hr" tag with a "div" and top and bottom border, there is a white 1px line between the borders ...
IE and Firefox do well.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
I try different thing (overflow, height 0px) but with no success.
My Chrome Browser is up to date (Version 62.0.3202.94)
Thank you
Simon
Actually that is not a white space, you used light-grey color to bottom and both border top and bottom attached and it's illusion like there is white space. If you want shadow for bottom of your custom hr then you can use following css for it -
.nav_links_container_line {
border-top: 1px solid #096ebd;
box-shadow: 0px 2px 10px #000;
}
What about using a real <hr/>? With that, I don't have the rendering issue you encountered, and it actually makes more sense to use hr in its own role.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
border-left: none;
border-right: none;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
<hr class="nav_links_container_line"/>
I have two css IDs on different files, and I have to change the file with another only when the Program executes in Internet Explorer.
I have this file called "custom.css":
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: initial;
}
I need (I must not modify custom.css) to set "height" to "auto". But only if the page is rendered on IE. So I created a second css file called "customie.css":
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: auto;
}
After that I wrote this Conditional Comment in the <head> of my MasterPage .cshtml.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="customie.css" />
<![endif]-->
Problem is this: Conditional Comment doesn't work and the customie.css file overwrites the custom.css(which annuls itself) .
How can I apply height: auto only for IE pages?
Thank you,
Angelo
No idea why the conditional isn't working, but you can achieve the desired effect using the CSS below. IE doesn't support initial, so it will fall back to auto instead.
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: auto;
height: initial;
}
I want to change the border colors surrounding my header tables from the default grey given by the packageHTMLTable to black. I cannot figure this out for some reason. I've tried the following:
htmlTable(data, css.table = "margin-top: 0.5px; margin-bottom: 0.5px; border: 1.5px solid black;", css.cgroup="border-bottom: 1px solid black; border-top: 1.5px solid black; text-align: center;", file = "data.html")
I've also changed css.cgroup to css.rgroup but nothing happens. Help would be much appreciated!
There must be a better way to do this using the HTMLTable package, but this will do the trick:
mytableout <-htmlTable(data)
sink("data.html")
cat("<style>th {border-bottom: 1px solid black !important;border-top: 2px solid black !important;}</style>")
print(mytableout,type="html",useViewer=TRUE)
sink()
Black:
Grey:
So, I am doing my mothers small business website to save her money and learning quite a bit of CSS in the process. I'm having a small problem though, I am making a Gallery page that link to 2 different pages, I want the text at http://area25dallas.com/s/gallery.htm that is sitting next to each image (showroom and staging) (also I know the images are the same, waiting on more from the momma). I want these to be on top but when I add an a{} to the following CSS controlling the image rollover effect it screws up all my other links on the website.
.imagedropshadow {
margin:30px;
padding: 10px;
border: solid 1px #EFEFEF;
}
a:hover img.imagedropshadow {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
box-shadow: 1px 1px 10px #999;
}
Is there a way I can make an a{} and a:hover{} specific to these links and images without messing the whole CSS of the site up? Thanks
To create CSS for a specific element there are several approaches you can take:
Create a specific class for the element. <a class="image-link"></a>
a.image-link{
//styles go here
}
You can refer to the unique context of the link. For example if it is located inside a div with ID content. <div id="content"><a></a></div>
#content a{
//styles go here
}
or if it is the only a that can be directly inside a p element <p><a></a></p>
p > a{
//styles go here
}
When adding styles to your html it is often good to consider the scope of the CSS. Note that you can declare styles multiple times for a element. So you can could make CSS for every a element inside your HTML and CSS for a elements within a specific scope.
More on CSS Selectors:
Sitepoint
Quirksmode
Net Tuts
Smashing Magazine
Have you tried this code?
img.imagedropshadow:hover {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
box-shadow: 1px 1px 10px #999;
}
#content .imagedropshadow {
margin:30px;
padding: 10px;
border: solid 1px #EFEFEF;
}
#content a{
}
#content a:hover img.imagedropshadow {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
box-shadow: 1px 1px 10px #999;
}
Ideally you should put a div around your images with a class or ID and use that ID/class value to select the anchor (a{}) tags you need. I just picked the ID of the container DIV
Remember, When you are making your selectors really specific, such as #Content .myDiv a.link instead of #Content a.link, the more specific overrules the less-specific.
Just a tip