Although I want to use the default blue crystal theme but just want to hide the blue branding bar because I am using native navigation header and network indicator bar in mobile app.
The network indicator bar overlaps with this blue 4px high bar. Any help please?
/* Remove branding bar by changing its height to zero and page header top width to zero */
.sapMShellBrandingBar {
height: 0px;
}
.sapMPageHeader::before {
border-top-width: 0rem;
}
The bar is set with CSS, you can override it with
.sapMPageHeader::before {
border: none;
}
It's probably too late but still: here is a solution without using custom CSS →
in XML:
<Shell class="sapMBrandingBar-CTX">
or in JS:
new Shell({/*...*/}).addStyleClass("sapMBrandingBar-CTX");
or in index.html:
<body id="content" class="sapUiBody sapMBrandingBar-CTX">
Advantages
Simple: apply sapMBrandingBar-CTX to either Shell directly or to one of its parent elements. No custom CSS needed.
Compatibility: the availability of sapMBrandingBar-CTX is covered by the framework's Unit test so that there is no regression after migrating to future UI5 releases.
Classes with the suffix -CTX (context) are markers and can be used appropriately anywhere in your app. sapMBrandingBar-CTX is available as of v1.28 (commit:1a19dbc).
This "sapMBrandingBar-CTX" CSS class can be set by any container control that comes with its own branding bar, so any shell inside will not display its branding bar
Related
Following the guide at https://www.youtube.com/watch?v=fJSUs0bTPMc I can add a "red-text" class to the text side of the block and, using the Customize --> Additional CSS page watch the changes applied live.
This does not work, however, for the image. I just want to apply rounded corners, which should be as simple as .my-rounded-image { border-radius: 30px; }, but it is not.
More specifically:
Add "red-text" to Advanced --> Additional CSS Classes for one of the paragraph blocks on the text side.
Add "my-rounded-image" to Advanced --> Additional CSS Classes for the image side
Publish page, View page, Customize Page
Go to Additional CSS in Customize view
Add .red-text { color:red; } and see it updated on the paragraph previously modified
???? Cannot get anything applied to image
I have tried this with a normal image block without success as well.
You need to add overflow: hidden; as well:
.wp-block-media-text__media {
border-radius: 30px;
overflow: hidden;
}
I'm designing a site using a simple worpress theme and customising a few elements with the Simple Custom CSS plugin.
I'm trying to change the colour of the footer and I've used
.site-footer {
background: #4E5754;
color: #f29e0f;
}
This is coming though as it is changing the text colour but not the background - the new background colour is showing up when I inspect the page source but not changing on the actual page.
What might be overriding the CSS?
You can use this style for this.
.site-footer {
background: #4E5754 !important;
color: #f29e0f;
}
Or put your style under the default stylesheet.
After a bit of trial and error I realised that the two colours were actually being controlled by different elements - site.footer and footer.inner
Thanks for the help everyone!
New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.
Currently I am working on RadCalendar. My requirement is Calendar has to be started from current month and we should have only NEXT navigation button. When user navigates to next month, then the PREV navigation icon had to be displayed along with NEXT navigation icon.
How can I achieve this????
For test purpose I created a TelerikStyle.css and placed the below code:
BODY
{
margin: 0px;
padding-left: 0px;
font-size: 32px;
font-family: Arial;
}
.MyRadCalendar .rcTitlebar a.rcPrev
.MyRadCalendar .rcTitlebar a.rcFastPrev,
.MyRadCalendar .rcTitlebar a.rcNext,
.MyRadCalendar .rcTitlebar a.rcFastNext
{
visibility: hidden;
}
And I am creating this Radcalendar dynamically. So I tried to attach to apply this CSS Styles to Radcalender through below way.
_myCalendar.CssFile = "~/stylesheets/TelerikStyle.css";
_myCalendar.TitleStyle.CssClass = "rcTitlebar";
But my navigation buttons are not hiding. So please tell me how to apply CSS Styles for Radcalender dynamically. And How to achieve my above requirement?
Each of the Telerik Skins actually have a minimum height and width setting for the RadCalendar in order to ensure that the visual styles of the control are not broken.
As you can imagine modifying the width and height to arbitrary settings could skew the look and feel of the control quite a bit.
What you can do, however, is either modify one of the existing skins or create your own.
This section http://www.telerik.com/help/aspnet-ajax/calendar-custom-skin.html in their online documentation covers how to change the appearance, and the specific article covers how to create a custom skin.
Thanks
AB
I need to change the scroll bar color in Firefox. Using CSS I am able to change scroll bar color in IE. It works fine. But I cannot see the change in Firefox.
I dont want any custom scroll bars. I want to apply the color to the default scroll bar only.
Not all browsers will let you control the styling for their scrollbars.
You can fake scroll bars with plugins like this, which claims to be cross-browser compatible:
http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/
You can't do this for the default scroll bar.
Use a custom scroll bar using javascript and CSS and lots of plugins will be available.
Unfortunately, this is not doable without custom scroll bars.
Using jScrollPane will solve the scroll color cross browsers.
The usage is simple like: $("#someDivId").jScrollPane();
I tested under FireFox/IE/Chrome and got same UI result.
Also used jScrollBar, but it require several divs before use jScrollBar, instead of one div.
You simply can't without jQuery. Its because of bug #77790.
Bug 77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)
The only way is to use a jQuery plugin. I have links for you!
• http://plugins.jquery.com/custom-scrollbar/ - jQuery Custom Scrollbar
• http://jscrollpane.kelvinluck.com/ - jScrollPane
• https://www.google.ca/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=jquery%20scrollbar - Google search
for Firefox or cross browser you can use :
jQuery custom content scroller
more simple and easy to use
Github : https://github.com/malihu/malihu-custom-scrollbar-plugin
How to use :
Download the source from the web or Github.
Include jquery.mCustomScrollbar.concat.min.js and jquery.mCustomScrollbar.css on your header. Add the class mCustomScrollbar to any element you want to add custom scrollbar(s) with default options. Example of mine : <div class="long40 right reviews-frame mCustomScrollbar">
Call mCustomScrollbar function on the element selector you want to add the scrollbar(s). I call in bottom of my phtml page (list.phtml) like this :
....
</div>
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
Other setting and documentation you read on their web.
Sample I used it in Magento : i.imgur.com/3OwGQld.png
The following example of a scrollbar color css code that I modified :
#mCSB_1_dragger_vertical {
height: 130px !important; /* height of the scrollbar */
}
.mCSB_dragger_bar {
background-color: #ececec !important; /* color of the dragger bar */
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 10px !important; /* width of the dragger bar */
}
.mCSB_scrollTools .mCSB_draggerRail {
background-color: #888888 !important; /* color of the rail */
width: 10px !important; /* width of the rail for dragger bar */
}