I have my own design for a Twitter feed and I want to style the default feed using my own design. Is there a way to do that?
The issue is that you can't use the CSS selectors because it appears only after the loading the page.
Please check this pic to give you more idea about what I need
Thanks,
Well, You can customize Your twitter widget by doing something like this:
Default Code
<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID">Tweets by #Test</a>
To remove Header footer, Just add data-chrome="nofooter transparent noheader transparent" and it will look something like this:
<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID" data-chrome="nofooter transparent noheader transparent">Tweets by #Test</a>
For more customization like link color, Borders etc refer to this article. https://dev.twitter.com/docs/embedded-timelines#customization
I hope this helps :)
1# Getting a fully customisable timeline like suggested earlier (by using the API), would require that you fetch the timeline as a json file (https://api.twitter.com/1.1/statuses/home_timeline.json) and manually loop them in your display. More details here https://dev.twitter.com/rest/reference/get/statuses/home_timeline
2# This is as close as I could come with your design #shadeed9. Most of the restrictions are here https://dev.twitter.com/overview/terms/display-requirements
3# This JS snippet will let you add custom CSS styles to the Twitter embed widget: https://github.com/kevinburke/customize-twitter-1.1 by Kevin Burke
If this solves your question, kindly accept it!
If by twitter widget you mean the embedded timelines, then see the "client side options" section of the docs https://dev.twitter.com/docs/embedded-timelines for options that you can set.
If you want totally customised output using CSS, then you'll need to write your own solution using the API to spit out content that can be styled.
Related
I have the following design:
UI Design
I want an input field like this i.e. having a text like Shipper Name or Contact Number on top of the input field. How can I achieve this in HTML ? I am not able to find it on the internet.
Thank you
you can use material-ui to access these kind of components without having to code it from scratch.
Their TextField looks exactly the same in the image you provided:
https://mui.com/material-ui/react-text-field/
Their documentation you can follow to integrate their library on your project:
https://mui.com/material-ui/getting-started/installation/
Use fieldset and legend
<fieldset><legend>Shipper Name</legend><input type="text"></fieldset>
I want to bold some contents in the popup. But is not interpreted instead is being displayed among the content
Is there any other way, leaving matToolTip to provide popup over hover in Angular
<button [matTooltip]="help|translate" type="button" mat-button class="button-save" [disabled]="!isInfoAvailable">
<mat-icon>help_outline</mat-icon>
</button>
Expected output
firstname mike
lastname ross
Actual output
<b>firstname <\b> mike <\n>
<b>lastname <\b> ross
I think native Angular Material Tooltips don't allow HTML code, so I suggest you to use an other provider for the Tooltips, there are a lot of those who allows HTML code like ng-bootstrap or tippy.js
I personally suggest you to use Tippy.js, here's the link where you can see how use HTML code on it.
https://atomiks.github.io/tippyjs/#html-content
Hope it helps you.
If you need simple customization (changing background-color, color, font-size...) for the whole tooltip you can read this post otherwise you can read this answer ⬇️
A similar post already exists: Angular 2 Material tooltip with HTML content in angular
What you are looking for is a Popover. And as said, it doesn't exist now and it's not possible with tooltips.
Answer from #jelbourn, Angular member team:
When designing the tooltip we deliberately decided not to support
this. The Material Design spec is rather prescriptive about only text
appearing in tooltips. Rich content also presents a challenge for
a11y.
Source: https://github.com/angular/components/issues/5440#issuecomment-313740211
You can find the feature request for popover here.
Until an official release from Material team you can use an alternative. Here are some examples:
https://github.com/joejordanbrown/popover (documentation here)
https://github.com/ncstate-sat/popover
https://github.com/maxisam/ngx-mat-popover (using Material Menu)
https://ng.ant.design/components/popover/en (ng-zorro lib)
I'm using HTML examples on my website (using Crayon) and want to show output as well.
But I want the output to show as pure as it would have without any of my website's own stylesheets.
I can of course do this with an iframe, but that seems tedious. Is there perhaps another trick or library that anyone is aware of?
Thanks
Ended up doing this. Works well...
$('.crayon-title').click(function() {
var content = $(this).parent().siblings('.crayon-plain-wrap').children('textarea').text();
var x=window.open();
x.document.open();
x.document.write(content);
x.document.close();
})
While creating graphs using vis.js we can specify how the nodes can be displayed using the options.
var options = {
width: '400px',
height: '400px',
edges:{
style:'arrow'
},
nodes:{
shape:'icon'
}
};
by using 'icon' for style we use either bootstrap or fontawesome glyph icons. The documentation talks about using unicodes.
Created a Plunker and the Icons are not showing up.
http://plnkr.co/edit/DFYz26SOxGY9IvMqSuKm?p=preview
Not sure what i am doing wrong.
Thanks
I took a look at your plunker and I fixed it here:
http://plnkr.co/edit/NQarGkQSYeg3Cl0SdBGy?p=preview
I'm one of the devs of vis.js and I'd like to explain what went wrong here. First, you will need to include the css of fontawesome so vis knows where to find the glyphs. So we add:
< link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Second, going by your plunker, you set the shape of the nodes to 'circle'. That means the nodes will not care about the icon options. In your question you have set the node shape to 'icon'. This means, the node will use the additional icon options for configuring the icons.
So we added (to the global nodes options):
iconFontFace:'FontAwesome',
iconSize:50
Now for the unicode. You will need to specify which icon vis is supposed to show you. This is done by the icon option. So where do we find the unicode? Lets look at this example: http://fortawesome.github.io/Font-Awesome/icon/coffee/
and we find: fa-coffee · Unicode: f0f4 · Created: v3.0 · Categories: Web Application Icons
So the unicode is f0f4 and in javascript we write this as \uf0f4
From your problem I noticed there are no default settings for the icons, which will be fixed with the 4.0 release.
For further reference you can take a look at the docs: http://visjs.org/docs/network.html#Nodes_configuration
a working example with multiple icons from fontawesome and Ionicons:
http://visjs.org/examples/network/38_node_as_icon.html
To wrap up, next time you have an issue, please post it in our Github page, we try to collect all the questions there :)
https://github.com/almende/vis/issues
Good luck!
I have a page (http://www.gardensandhomesdirect.co.uk/newhomepage)
I want to make the center column (#content-column) 930px for this page only, which will eventually become the homepage.
The CMS used is NetSuite, and is notoriously difficult to work with.
What is the best way to do this? Is it possible with just CSS/HTML commands or JavaScript?
Since it's a CMS you probably cannot add markup easily so I'm thinking some jQuery would be a simple solution here...
$(function () {
var path = location.pathname.substring(1);
if (path) {
var regex = new RegExp('newhomepage$', 'gi');
if (regex.test(path)) $('#content-column').addClass('yourClass');
}
});
This should add "yourClass" to the element just on that page.
Then you can add to your external CSS...
.yourClass {
width: 930px !important;
}
I feel your pain
I have used Netsuite extensively and found )after many hours of hair pulling and expletives) that the best solution (for us) has been to create the home page and any unique landing pages as Hard coded Hosted pages (hosted on Netsuite) and reserve Netsuite's CMS system for item pages where you need the add to cart functionality.
Take it from me in the long run it'll save you hours of frustration :-)
Of course you can use Netsuite tags all over the place as long as you host the pages in your "site" folder
I have no experience with Netsuite so please take this as is..
I would try to add a custom style tag to the document like this:
<style>
#content-column{
width:930px !important;
}
</style>
If you only have access to the HTML of that page, then put an inline style attribute in the center column's HTML. Example:
<div id="content-column" style="width: 930px;">