I have a flexdashboard created with Rmarkdown that has a custom span added to the navbar, resulting in the map I have below not being sized problem due to the extra height of the navbar.
The fix in the html is known to me: change the height of the dashboard container by replacing
$("html,body,#dashboard").css("height", "100%");
with
$("html,body,#dashboard").css("height", "calc(100% - 30px)");
However, I have been unable to change the generating Rmarkdown/css code to affect this line in the html document.
The line in context is:
if (_options.resize_reload) {
$(window).on('resize', function() {
if (_options.isMobile !== isMobilePhone() ||
_options.isPortrait !== isPortrait()) {
window.location.reload();
}
});
} else {
// if in desktop mode and resizing to mobile, make sure the heights are 100%
// This enforces what `fillpage.css` does for "wider" pages.
// Since we are not reloading once the page becomes small, we need to force the height to 100%
// This is a new situation introduced when `_options.resize_reload` is `false`
if (! _options.isMobile) {
// only add if `fillpage.css` was added in the first place
if (_options.fillPage) {
// fillpage.css
$("html,body,#dashboard").css("height", "100%");
}
}
}
The referenced fillpage.css in its entirety is:
#media only screen and (min-width: 768px) {
html, body {
height: 100%;
}
#dashboard-container {
height: 100%;
}
}
I have tried the following:
Adding the above fillpage.css code (with the modified height: calc(100% - 30px) to the Rmarkdown document in the css chunk (other css in this chunk is working).
Adding a modified fillpage.css to the css yaml.
In both cases, the generated html referenced above is unaffected.
How can I implement this change in my code so I don't need to manually edit the html document each time I knit?
I am using react-simple-image slider and everything works smoothly but I dont get how to adjust the image to fit to the slider container. The documentation says this:
can customize by className with !important;
.your-app {
.rsis-container {
// do something
}
}
.your-app {
.rsis-image {
background-size: contain !important;
}
}
but I dont understand where to add it in my project (please see files)
files
Now working.
I have a working Chrome Extension that will give me an injected stylesheet on the webpage I want but there are some styles I can not seem to overwrite.
For example, looking at the current Google home page I can inspect the empty area below and see there is no background color set. In the Styles section, if I click the "New Style Rule" button, (large plus sign) it gives me the correct (location?) for the rule ".o3j99.qarstb" when I copy the rule and add it as is to the CSS file it works. I get the injected stylesheet section added to the Styles and the color changes.
.o3j99.qarstb {
background-color: aqua;
}
I can also add this to the CSS and change the "About" and "Store" text size at the top left.
body, input, button {
font-size: 27px !important;
}
I'm trying to do something similar to another webpage but it's CSS or styles are more complex and it's hard to figure out if an injected stylesheet will even work. They do work when I make the change in place in the existing rule.
Here is the existing style rule:
.quixote .qx-grid .editor_grid tbody .input-group input {
width: 100% !important;
}
I added it to the styles.CSS file like this but it seems to be ignored as I can't find an injected stylesheet for it.
.quixote .qx-grid .editor_grid tbody .input-group input {
width: 900px !important;
}
This is the popup.js file. (Adding "allFrames: true" to the end of the insertCSS target got it working.)
$(document).ready(function() {
$('.reset').click(function() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
/*alert("Button Reset");*/
chrome.scripting.removeCSS({
target: { tabId: activeTab.id },
files: ["styles.css"]
});
/*chrome.tabs.sendMessage(activeTab.id, {"buttonclicked": "reset"});*/
});
})
$('.format').click(function() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
/*alert("Button Wider");*/
chrome.scripting.insertCSS({
target: { tabId: activeTab.id, allFrames: true },
files: ["styles.css"]
});
/*chrome.tabs.sendMessage(activeTab.id, {"buttonclicked": "wider"});*/
});
/*alert("Hello");*/
})
})
This is the content.js file. (Not sure why this was added but same code in the popup.js works even with all this commented out.)
/*var copy = $('body').clone()
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if( request.buttonclicked === "reset" ) {
$('body').html($(copy))
}
if( request.buttonclicked === "wider" ) {
chrome.scripting.insertCSS({
target: { tabId: tabId },
files: ["styles.css"]
});
}
})*/
This is the element the above rules are in.
<input class="form-control required" type="text" name="_obj__TIMESHEETITEMS_0_-_obj__PROJECTID" id="_obj__TIMESHEETITEMS_0_-_obj__PROJECTID" autocomplete="off" size="28" placeholder="Project" tabindex="0" style="min-width: 110px;">
It's a secure site so I can't post a link. Here is an example of the Table, I'd like to widen the first two columns.
Here is a pic of the inspect page, showing the element and two rules that I can manually change but can't with the CSS file.
What the "Stylus" extension adds and that works.
I am trying to get my home page to display a random banner every time the site is loaded.
I used the following code in my functions.php file -
add_filter('body_class','random_background_images');
function random_background_images($classes) {
// Generate Random number from 1 to 10.
$background_class = 'background_' . rand(1,10);
$classes[] = $background_class;
return $classes;
}
and then this in my custom.css file -
body.background_1 {
background-image: url("images/home-bg/website-background1.jpg");
}
body.background_2 {
background-image: url("images/home-bg/website-background2.jpg");
}
body.background_3 {
background-image: url("images/home-bg/website-background3.jpg");
}
it seems to work, but puts the image as a background image, not a banner.
Can anyone please help me change this code so it will apply to the banner section?
(The current banner is set from the front end with an uploaded image in the 'home' page setup.
Website is - https://flowersforeveryone.feedmybeta.com/
Thanks! :)
So this would depend on the html for the banner. Assuming the banner has a class of .page-banner, you could change your CSS slightly thusly:
body.background_1 .page-banner {
background-image: url("images/home-bg/website-background1.jpg");
}
body.background_2 .page-banner {
background-image: url("images/home-bg/website-background2.jpg");
}
body.background_3 .page-banner {
background-image: url("images/home-bg/website-background3.jpg");
}
In CSS, the selector that comes after a space is a child of the previous selector.
I am using the ionic starter menubar template. I would like to change the header background color of each page. I currently have:
<ion-view view-title="Search">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
I tried:
<ion-view view-title="Search" class="bar bar-header bar-assertive">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
But it does not work at all (content is not rendered). The header documentation does not help me. What is the correct way to do this?
Some ways to do this:
You could add the ion-nav-bar to each view.
<ion-view view-title="Page 1">
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-content>
...
</ion-content>
</ion-view>
Codepen example
You could also update the background-color (and any other properties) by using ng-style
Main navbar:
<ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
CSS:
.nav-bar-block, .bar {
background-color: inherit !important;
}
Controller:
$scope.$on('$ionicView.beforeEnter', function() {
$rootScope.viewColor = 'green';
});
Codepen example
Could not find a clean solution for this, but one hack might be to use the $stateChangeStart event and set the class name manually.
angular.module('starter')
.run(function ($rootScope) {
var element;
$rootScope.$on('$stateChangeStart', function (event, next) {
if (next.name) {
element = angular.element(document.querySelectorAll('ion-header-bar'));
switch(next.name) {
case 'tab.chats':
element.removeClass('bar-positive');
element.removeClass('bar-balanced');
element.addClass('bar-calm');
break;
case 'tab.dash':
element.removeClass('bar-calm');
element.removeClass('bar-balanced');
element.addClass('bar-positive');
break;
default :
element.removeClass('bar-calm');
element.removeClass('bar-positive');
element.addClass('bar-balanced');
}
}
});
});
fiddle
EDIT
The idea is same for sidebar template,
Updated fiddle
Notice the line
<ion-nav-bar class="bar-positive">
in menu.html template, it denotes the base header color class.
but subsequent changes to pages i.e states header color needs to be changed manually in $stateChangeStart event,
code:
.run(function ($rootScope) {
var element;
$rootScope.$on('$stateChangeStart', function (event, next) {
if (next.name) {
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
console.log(element);
switch(next.name) {
case 'app.search':
element.removeClass('bar-positive');
element.removeClass('bar-energized');
element.removeClass('bar-dark');
element.addClass('bar-assertive');
break;
case 'app.browse':
element.removeClass('bar-calm');
element.removeClass('bar-assertive');
element.removeClass('bar-dark');
element.addClass('bar-energized');
break;
default :
element.removeClass('bar-positive');
element.removeClass('bar-energized');
element.removeClass('bar-assertive');
element.addClass('bar-dark');
}
}
});
});
here the state name is checked to see which page is activating ex. app.search
then according to requirement specific color class is assigned removing other color classes.
ionic color options
hope this helps.
if you are using different states and each state has a different controller than just have a $scope variable like $scope.stateone = "true" etc. Then on your ion-nav-bar use ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}". ng-class takes classes and an expression, whichever expression is true that is the class that is assigned. you can use ng-class with any boolean expression. this is how you can have a different color on each page.
I modified the solution of #shakib to fit my needs, in my case the user sets the theme by clicking the app logo and thus the bar color should change. If this is your case you don't need to do the switch case because you want to change all views
$rootScope.$on("$stateChangeStart", function (event, toState) {
var element;
if (toState.name){
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
if (debugMode) console.log(element);
// I get the bar-class from my localStorage where I keep the user settings
var saved_bar_class = $localStorage.get('bar-class','bar-calm');
element.removeClass('bar-pink');
element.removeClass('bar-calm');
element.addClass(saved_bar_class);
// Here We could use a Switch Case on toState.name to put a different color to each state
}
});
Also when the user clicks the app logo I want to immediately change the bar color in order to give feedback to the user of what that button do. The above code won't do that because we haven't changed state yet, to fix this just add this code to your 'change theme' function
$scope.changeAppTheme = function () {
var element;
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
// some code to select the theme
element.removeClass('bar-pink');
element.removeClass('bar-calm');
element.addClass('bar-pink');
// some other code
};
In this case I just have two colors, the ionic calm and a pink one that I defined
Hope this helps someone
We got it working in CSS with:
.title.title-center.header-item {
background-color: black;
margin: 0px;
}
This means that we just refer to the Angular generated header classes directly with this CSS. Hope this helps!
Try using the following code:
<ion-view>
<ion-header-bar class="bar-assertive">
<h1 class="title">Search</h1>
</ion-header-bar>
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
You can override $bar-stable-text color (taken from _variables.scss from ionic lib)
For example, in your scss change
$bar-stable-text: green !default;
If you want to change the ion-nav-bar this here works like a charm:
1 . Create a main controller to take care of your index page and all views within it.
2. Add this function to the controller:
$scope.setNavColor = function(color){
for(var i =0; i < document.getElementsByTagName("ion-header-bar").length; i++){
classNames = document.getElementsByTagName("ion-header-bar")[i].className;
classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
document.getElementsByTagName("ion-header-bar")[i].className = classNames;
}
}
3 . add on-select to your ion-tab tab so it will call the function whenever your tab is chosen:
<ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>
4 . add on-deselect to you ion-tab too if you want the color to go back to some value when you leave.
5 . Have fun!
//add these lines in your style.css file under /www/css/ yoyr project directory
.title.title-center.header-item {
background-color:#30393A;//#F38023!important; // for bg color
margin:0px!important;
margin-left:0px!important;
color: #ffffff!important;
text-align: center !important;
width: 100%;
}
put these lines in your style.css under /www/css/ directory of your ionic project
.title.title-center.header-item {
background-color:#4a87ee;//#F38023!important; // for bg color
margin:0px!important;
margin-left:0px!important;
color: #ffffff!important;
text-align: center !important;
width: 100%;
}
If you're using scss within your app, you can create your own custom bar class and use ionic's bar mixins in it.
$bar-custom-bg: #ccc;
$bar-custom-border: #eee;
$bar-custom-text: #fff;
$bar-custom-active-border: darken($bar-custom-border, 10%);
$bar-custom-active-bg: darken($bar-custom-bg, 10%);
.bar {
&.bar-custom {
#include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-custom-border, $bar-custom-border 50%, transparent 50%);
}
.button {
#include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text);
#include button-clear(#fff, $bar-title-font-size);
}
}
}
After defining your class, you can use your new custom bar class with ion-nav-bar directive.
<ion-nav-bar class="bar-custom">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>