I've a page which is old asp.net page also non bootstrap. Its only 1 page among 100s of pages under a master page file. But I have to update the page in some extend and been asked to make the buttons and inputs look like bootstrap style.
I linked bootstrap css to the page alone which is also working using a huge css file from the master file. This is bootstrap css I used.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
But as expected the page breaks in lots of places. So what my problem is how can I make the inputs and buttons on a noon bootstrap page looks like bootstrap way. Only the buttons and inputs.
Sure thing!
Go over to bootstrap customize and then tick off everything but the buttons, add the button classes to your buttons and you're done!
I faced a very similar problem recently, I found you can actually download the components individually without using the whole framework.
Customize and download bootstrap
Hope this helps, let me know how you get on
Sorry, don't have the rep to simply comment.
But for the input fields you will also want to select forms too.
Then you can go through the CSS file that is downloaded and pick those you want.
Or an example styling class to start work with:
.example
{
padding: 5px 10px 5px 10px;
background: #ff671d;
border-radius: 10px;
color: #fff;
}
You will need to play around with the properties to get what you want.
Related
Im editing this jekyll theme with github pages and im trying to add buymeacoffee generated button in menu bar.
It works but for some reason it gets the theme colors, i tried to debug it hours now but it didn't work.
The button should look like this:
https://i.imgur.com/RSYrOx6.png
But now:
https://i.imgur.com/KzwqCml.png
I added it in _includes/navbar.html in the end of the file. I tried to placed it in other files too, outside divs inside divs with custom css classes nothing worked.
Looks like it gets a "general" color, i tried to find this setting but i couldn't, can any of you help me to figure it out? thank you!
you can selector level of custom css in _dark.scss.
Example, you can change with this.
body[data-theme="dark"] .bmc-btn-container > a.bmc-btn:hover {
color: black;
}
I am working on a project where I need to update the external CSS files for a webpage.
The problem is that I need to use a Marketo token to dictate what the new CSS style will be. Tokens do not work in external CSS files; I've tried.
I've been able to do most of this work myself, however, I am stuck at one element: a slider. I want to modify the color of the slider buttons to be determined by the Marketo tokens. I have tried "rebuilding" the slider section in the webpage html code, but so far no luck.
Any ideas?
This is a time-sensitive project, too.
Your help is greatly appreciated!
I understand you are trying to override previous css codes. Have you tried the following?
background-color: red !important;
Putting the link of the css file you want to be valid at the bottom.
deleting all the classes of the button related to javascript and adding new classes to style them.
.color{
color: red;
color: blue !important;
}
<div class="color">Color</div>
document.querySelector('.js-a').classList.add('js-b');
document.querySelector('.js-a').classList.remove('js-a');
.js-b{
color:blue;
}
.js-a{
color:red;
}
<div class="js-a">Javascript</div>
I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!
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/
I know this can be done with custom CSS, but I can't figure out the right way to do it.
I think I can figure it out for all of them if you show me how to do it with just the title.
For example, this is the element I want to remove: <h1 class="page-title entry-title">
I know that {display: none} is the CSS to hide an item, but how can I do it for only a specific page?
the website is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Use h1.page-title { display: none; } to hide the title, this will affect ALL pages that use the same template.
If you want to do it specifically to this post use the following:
#post-28 h1.page-title { display: none; } the post number will lock it to that page only.
Based on that page, the body has classes
<body class="wordpress... singular-page singular-page-28 layout-1c"
28 is the page id of that page, so if you just want a CSS fix for this, you can use the code below
.singular-page-28 h1.page-title{
display:none;
}
note, if you move the wordpress to another webhost, via export/import, you'll need to look at the page_id again if it changed
See this fiddle, if this is the way you want it.
http://jsfiddle.net/Qj4Us/
It simply looks for the targetted URL like "http://myinneryoga.com/strange-exotic-fruit-supplement/" and if found, hides the h1 with class=page-title
Instead of modifying CSS which will affect all pages we can make use of simple plugin. Below are the steps :
Click on Plugins > Add New.
Now search for Hide Title.
Install and activate the plugin.
Now click on Pages > All Pages.
Now edit the particular page where you want to hide the title.
Now, In the right panel you can see an option to Hide title. Check that and publish your changes.