I'm hoping to find a nice way to edit the css on this page:
http://carbonbi.com/build/?page_id=46
I'm using the wordpress layout shortcodes to create three separate columns. I'd like to add a border in between the first and the second column and the second and the third.
I realize using the built in shortcode might not be the best way to do this, and may require creating my own class to handle this, but if anyone has any effective ways to work on this it would be nice to see.
Thank you in advance.
Just a general tip: by using plugins like "Web Developer" for Firefox (my favorite) or simply left clicking an element and choosing "inspect element" (Firebug is a good choice, although most browsers have their own, firefox actually has a spacy 3d one that can come in handy) you can get the names of classes and id's used by plugins and the like, and then add them to your style.css and edit away!
Bonus Tip: Firebug let's you edit the CSS in real time to preview what it would look like without having to refresh the page.
Add the following CSS to your stylesheet.css:
body .three_col {
margin-right: 2%;
border-right: 1px solid #CCCCCC;
padding-right: 1.75%;
}
body .last {
padding-right: 0px !important;
border-right: none !important;
}
This will add a 1px solid gray border in-between the columns.
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;
Hello to the StackOverflow community!
Last month I was working on this HTML/CSS Project for a Codecademy Intensive course. Here is a link to the page on GitHub.
Look down on the page and you will see the visible borders (in a faint, razor-thin grey color) around the items that read "Orientation date", "Our campus", and "Our guest lecture". How can I get rid of them and make the items blend in nicely with the light blue background behind it?
BTW, you can find my project files here.
Thanks for your help.
A.L.
Try removing border-top: 1px solid lightgrey; from your css styling for .column-right .item {.
Perhaps, you meant to void the entire border
with :
.column-right .item {border: 0}
Looks good either way though
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;
I have changed the font size on my Kendo grid to 11 and by doing so, the calendar icon on a datepicker textbox gets cut off at the bottom. I was able to move the icon up using margin-top when you hover over it with the following code, however I am not able to figure out how to get it moved up in just its normal state.
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar{
background-position:-48px -176px; margin-top: -6px;
}
See example: http://jsbin.com/ufimom/592/edit
Try this,
.k-i-calendar {
background-position: -32px -176px;
margin-top: -6px !important;
}
Demo : http://jsbin.com/ufimom/596/edit
I have a highly personalized Kendo stuff. Custom styling is one of the biggest problems of kendo (along with million other issues that you will find once you start using kendo at a big scale). To minimize the size of the stylesheets they have combined a lot of styling of different controls into few files. Although its a good thing but it makes the custom styling (and then updating in the future) a nightmare. Knowing how ":not", ">", ":first", ":first-of-type", etc. work in css will really help you with styling of the grids and other controls.
I usually write separate stylesheets to override kendo styling (by using a lot of !important keyword in my override css). It helps when I update kendo.
Without seeing your html and background image in context, I'm just taking a guess here. Try appending the normal state of the calender icon to your css rule like this,
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar, .k-i-calendar { background-position:-48px -176px; margin-top: -6px; }
DEMO
EDIT: As the previous poster mentioned, !important is likely the best solution here, in order to override the Kendo settings. Example:
.k-i-calendar {
margin-top: 0px !important;
}
DEMO here: http://jsbin.com/ufimom/598/
Hey stack over flow I have been getting into styling my fire fox browser and have run into a bit of a bump. When I try and re-color my search bar there seems to be a border or something andcant find out what it is that's making that edge white if any one can help me it would be much appreciated.
here is the code I have put in at the moment
input#gbqfif
{
color: #AADA2C !important;
background: #262626;
border: 0px;
}
here is an image of what i'm going for and what is wrong
http://i.imgur.com/dNVxv1A.png
I hope you guys can help and thanks!
That thing, sir, is a div-beast:
I found in my browser it's id = "gs_tti0" what you want to modify. So you should do:
#gs_tti0 {
background-color: #262626;
}
However, it looks like it might be dynamically generated. Just right click in the search bar, inspect element and change that background. If it doesn't work, go one level up (the parent). Keep doing so until you find the one you want.