Styling AngularJS ui-router navigation tabs - css

I am rewriting an app using AngularJS. The tabs have a certain styling that I don't want to change. But upon using ui-router, specifically replacing "href" with "ui-sref", the look of navigation tabs gets messed up because I think the JavaScript and CSS is defined for "href".
I tried replacing all instances of href with ui-sref but that didn't work.
I've looked into Bootstrap but I need to render new pages upon clicking the tabs, not display data already on the page but hidden. Like Bootstrap does.
Can someone please suggest me what to do? How to modify the current styling or maybe suggest some other css template that I can use only for the navigation tabs? Thanks in advance!

Related

Angular4 - Bootstrap Line Tabs

https://bootsnipp.com/snippets/featured/bootstrap-line-tabs-by-keenthemes
I'm new to Angular and so my work has set me a beginner's challenge to modify their basic navbar menu.
I've chosen the menu in the link provided. However, the difference with my menu is that the pages linked are separate HTML files which Angular displays
in the router-outlet below.
When you click a tab the correct page displays but the active tab does not change (the first tab remains highlighted.)
Is this problem caused by my lack of knowledge of Angular or CSS??
Is it possible to get the navbar properly working within this Angular environment?
All feedback much appreciated. Thanks.

Burger menu from wordpress template

I'm just starting my programming but I need help.
I built my site from wordpress template. Made a lot of customization on my own but I have trouble by creating BURGER MENU on mobile devices.
I'm not sure how I can rewrite chosen template navigation bar menu to burger. Let me know if anyone could help me.
You could do it a few different ways, but personally, it's easier to place it with javascript and hide it with css...
Usually, you would create an element with javascript and attach it to a location on your page. For the burger itself, you've got the option of using drop-shadows, three divs or the unicode character for it. You can read more about those options here: https://css-tricks.com/three-line-menu-navicon/
Finally, if you want to add animation to your menu items (for opening / closing ) here's something that you can read to understand how it's possible to achieve: https://jonsuh.com/hamburgers/

Styling/customizing a twitter widget?

Twitter seems to have removed most of the ability to styling the widgets. But thing is I keep seeing websites with custom widgets. Is there any way to still do it? I saw a tutorial on taking the JS and the CSS and placing it on your own server. It doesn't seem to work that way anymore, though. Does anyone have a clue on how to do this? I need my widget to fit the theme of my website perfectly.
I'm talking about like removing the widget header, hide pictures from the feed, etc.
This JS snippet will let you add custom CSS styles to the Twitter embed widget: https://github.com/kevinburke/customize-twitter-1.1

Styling the content of Lightbox2 popups

I'm using Lightbox2 to display a node within a Lightbox iframe popup (using rel="lightframe" within a link).
Is there a way to pipe CSS into this iframe so I can style the contents the way I want them?
(I actually don't understand why using a rule like iframe body {font-size:1em} doesn't work, but that's just me being stupid... :-/)
I'm guessing I need to run a JavaScript function after the Lightbox has loaded that will add the CSS. Will that work?
To begin with styling an iframe is a little headache, or at-least that is what my designer told me ;)
The easiest solution would be to add the styles directly in the template of the node type that you are trying to display in lightbox. This would work if you lightbox is the only place where you are displaying that node.
This is a working solution but not an elegant one. Would appreciate if somebody can come with a more elegant solution.

Change theme dynamically without page refresh in ASP.NET

You must have noticed one link in yahoo.com, msn.com or other popular websites named "Page Options". When you click this link you get a popup displaying different small several color icons. After clicking one of these icons your page theme changes without entire page refresh. Now you are able to see the same page with different look and feel.
How does it happen and what it takes to do it? Is this possible in ASP.NET? If yes, how to do it?
Show me some syntax.
Here is an example of how to change CSS stylesheets on the fly using jQuery.

Resources