I have a page I'm working on where I an API sending information back to the page and updating the information on the page. But I wan't the information to be displayed in a certain way, i.e I want a boarder around the container. I've tried altering the .css and the .js files associated as well as other attributes like the background color and for the life of me, I can't make a border appear.
Here is a link to the part of my code I can't get o work.
http://www.bootply.com/VejUDSbYRa
.resultWrapper{
background-color: #061A1B;
border: 1px #8EA7AE solid;
}
If you don't specify style of the border, how will it know what to make?
Related
I'm working on page in Word press. The theme buttons aren't what i was looking for so i decided to make a custom ones. I thought it would be simple:
<button type="button" class="btn menu-button">BUY</button>
and css:
.btn{
font-size: large;
background: transparent;
border: solid;
}
So here is where my problem occur.
Some of the css code is working just fine (font-size for example) but the borders won't show up no matter what. I thought that the problem lies in the button tag itself but after futher investigations i noticed that it happens for every html element on my page, no matter div, p, H - the border stylization is not working neither color choice nor size, style etc.
So please help me, how can i make not only some but every css line work.
Im using WP 5.5.3 with customify theme. I've put The css from above into the custom css tab.
Borders usually require the border-style in order to have any of the other border styling properties to work. Try replacing with:
border-style:solid;
Alternatively, you can add them all to one line allowing you to omit the border-style by adding something along the lines of:
border: 1px solid black;
I have a website, which you can see here: Minutify.
The website is based on wordpress, and I have installed a number of widgets. One of them is for visitors to enter their email. You can see it on the right hand of the main page in a box that is called "SUBSCRIBE TO MINUTIFY".
As it can be seen, the box to enter the email is narrower than the outer white box. You can see that there are two vertical border lines in the middle of the white box (SUBSCRIBE TO MINUTIFY), which is visually unpleasant.
As I don't have any experience with we the website design, and css, html, etc. I am wondering what is a good way to find what file/s control the visual effects of the webpage, for example the box that I am talking about and how to fix the issue I am talking about in the files.
For example, if I write click on the page and choose "View page source" (in chrome) can I get a clue on what files should I look at and where?
As others have said, it's fairly easy to inspect the element and see what CSS is applied. In this case, there is no explicit width set--the browser's default is in effect. It appears as though the CSS for the site is being combined and cached, so the inspector may not be reporting the file you'd edit to make changes. Look for a CSS file in your template directory.
I'd apply a width to that element with the following CSS, included in almost any CSS file that's available to you:
.sml_emailinput {
width: 100%;
box-sizing: border-box;
border: none;
}
This makes the input element the full width of the available space, resulting in a more integrated appearance.
To give that widget an appearance resembling that of the search box above, try this:
p.sml_email {
background: #d0d0d0;
padding-bottom: 20px !important;
}
input.sml_emailinput {
width: 93%;
}
You can use Firebug or inspector Element.
right click on the element you want to see the Style and choose inspector element or Firebug tool(which you can get from internet free)
as i can see you can easily hide it using editing http://www.minutify.com/wp-content/themes/Zoren/A.style.css,qver=4.1.pagespeed.cf.aQXaS7GeSC.css file
input[type="text"], input[type="email"], textarea{
edit border: 1px solid #ccc; into border: 1px solid #fff;
The site I'm modifying is: www.fashiontogo.ca
Please view the source code via Google Chrome's ability to view source as I can't provide the HTML or the CSS directly here. It isn't my site, and I didn't develop it from scratch. Look at the profile picture in the top right, or any of the images on the page. You'll see a 1px left border (there is a margin associated with the profile picture, but not the others). That needs to be removed.
The CSS file I've been provided for the site does not contain anything causing this. I've tried removing all instances in the CSS that are either "border" or "border-left" and nothing has changed. The only possible thing that I've been able to do is to remove the surrounding div element for the images (named .img_container). A hack fix (that I'd rather avoid) would be to use jQuery to dynamically remove all the img_container divs at load time, but I'd much rather find some CSS fix to this.
Any suggestions or ideas? Any help would be appreciated.
There is a rule
.img_container::after {
...
background-color: rgba(0, 0, 0, 0.2);
}
You have to remove that BG color
I'm having a problem adding styles to a clicked link - it's an image and I want it to have a shadow once it's clicked but I can't get that to happen, neither shadow nor box-shadow seem to do anything.
I managed to get it working on jsFiddle:
http://jsfiddle.net/4GgBe/
But it won't work on my page:
http://jovansfreelance.com/booklist/list/man/Best-Stand-Alone-Fantasy-Books
You can see the link when you lick the green '1 reranks' button (it's the one with the little colored bars on it). I even tried copying the entire CSS from the page to jsFiddle, and it still worked on jsFiddle but not on the page. Can someone spot the problem?
The class on your link does not match your CSS. The class assigned to the link is "showeranks" but the CSS rule is assigned to "shower".
You just need to edit your live CSS to look like this:
a.showeranks:active{
box-shadow: 2px 2px 2px 2px blue;
}
I've got an embedded widget from The Weather Channel and everything is working fine except that they've got a <tr> with a 1px height image that is expanding to a height equal to the other rows.
It's shifting the rest of the content down. Because it's just an embed, there is only so much of the styling I can control. But I figured it must be inheriting something from my stylesheet since it had inherited some line-height that I had to correct.
If you visit http://www.scwd.com and scroll to the bottom you'll see the weather widget. The row with the grey td below #weather.com is the issue. It should only be 1px in height. I've used multiple debuggers to see if I could find the inherit and I cannot. Any help would be great.
-- UPDATE --
Not the most elegant solution considering variable within the widget and out of my control may change in the future. But as David suggested, I solved it with the following.
<script type="text/javascript">
var x = $("img[src$='blank.gif']");
$(x).closest('tr').css('display', 'none');
</script>
Best I can find is:
Inherited from div#wx_module_6107.wow_container
.wow_container {
line-height: 14px;
}
Are you hosting this or pulling the HTML from a foreign source? I suspect you can't control the HTML that's being rendered or the CSS that it's using?
I'm no CSS expert, so thus far nothing I've tried in FireBug have made a difference without affecting the rest of the table elements in the widget.
Unless someone can give a CSS solution, maybe some JavaScript can get the job done? You should be able to, on document ready, find that img element (maybe by its src?) and from there (using something like .closest() in jQuery) find its parent td and parent tr and with those element references explicitly set their styles.
The image is in a td which has a line height of 14 according to your css:
.wow_container { line-height: 14px; }
I would give it a line-height of 1px and set the background-color to transparent. That makes things look nice for me. Is this widget coming from a wordpress plugin? If so which plugin? You may be able to edit the plugin code yourself.
I think the problem occurs because the font-size of the body. My suggestion is to add font:1px Verdana,Arial,Helvetica,sans-serif for the td that is the grey row.