I have a strange situation. I have a DNN instance with more than one portal running on it. I started up a new portal and when I add a 2sxc content app, the icons for the built in actions like add and edit are missing. However, the other portals in the DNN instance have the icons.
You can see the blue action buttons but no icons in the following image from the site:
I have checked the rendered html on both sites and the icon button contains the same html:
<div><i class="icon-sxc-pencil" aria-hidden="true"></i></div>
Removing aria-hidden="true" does not make the icon appear. I think that I must be missing an icon font on the site that is missing the icons, but I am not sure which one to use.
EDIT 1
I noticed that font-awesome was not being loaded so i added the following to the header of the site:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?cdv=607" type="text/css" rel="stylesheet">
But the icons are still missing
Anyone have some thoughts on why this icon is missing?
thanks
I believe something is messing with the CSS which maps the icons to the buttons.
First just up-count the client-dependency number, my guess is it would fix everything.
Otherwise debug more using inspect-element to see how the other toolbars get their icon, and what is different with this instance.
Related
I have setup my react.js eairler, everytime I import bootstrap related thing (Container, Row, Col, etc) and than put it on the application, the screen turns out to be white.
HTML and CSS get to be completely disabled, web page turn into completely white. What do you think the solution for this problem?
Have you followed the setup guide from react-bootstrap?
https://react-bootstrap.github.io/getting-started/introduction
Also, maybe your browser javascript is disabled, try another browser, and when you inspect the page, do you can see the bootstrap elements?
I'm working with Tutorial App of 2sxc ;"Tutorial Custom Icon Font and Picker",and using font awesome.
The icon picker shows lots of fonts but one particular one "fa-graduation-cap" is just not showing up
http://fontawesome.io/icon/graduation-cap/
I've looked into the fontawesome css file and its mentioned there, but in font picker search it just doesn't show up.
Can you help me guide to a particular file so it starts showing?
Thanks in advance
There seems to be a bug, after looking into FontAwesome CSS file if multiple classes are defined for an icon then the Icon Picker will only get the first css class.
Example in terms of Graduation Cap icon in the css it was listed as
.fa-mortar-board:before,
.fa-graduation-cap:before {
content: "\f19d";
}
Hence the icon picker was only listing the icon with Mortar Board name and skipping Graduation cap.
2sxc can you kindly fix this in your angular js code so search picks up all the class names?
Ok. Starting over with this. I see that the SocialBoo theme has something similar in what I want to achieve. If I find that I can work and improve. I Added a new socialboo theme and created blank GUI. Assumed it would be a Commandbehavior but that didnt do the trick, so did adding tabs. Seems like those components are not for that specific bar... However did notice another issue.
How do I get the social actionbar as displayed in the socialboo theme? (Screen shot). Assuming those images etc are part of the default theme, right.
Also, If I create a TouchCommand = bar, title or native. It displays fine in Gingerbread but not ICS. DO you know why is that? (screen shot)
Thanks, in advance.
Those images aren't a part of the theme, they are a part of the specific demo. If you add a Tabs component to the center of the border layout UI you will get thee tabs where the "icon" property will allow you to customize the unselected icon and you can customize the selected icon as well. You can see the full source/resource file of the social boo demo in the docs and demos zip in the download section.
Generally customizing commands is a bit complex because of platform specific constraints, when running on an Actual Android 4 device we use the native ActionBar by default to provide the experience Android users are used to. This is hard for us to simulate so you will only see this properly in the device build. I suggest not relying on commands, it seems that what you are trying to achieve is easily doable with tabs and its possible that's why you had difficulties in your other question.
If someone can help me with this I will be eternally grateful. Recently I have started an on-line magazine using virb.com to host the site. I have done some basic css alterations to their theme but run into a problem when the theme automatically re-sizes itself for mobiles or even if the browser window is shrunken down. The content goes all whack, probably because of my css alterations. Is there a way that I can disable the responsive theme from resizing or fix my css so it doesn't discombobulate or even just have different page display for mobile users that says something like 'not available for mobile'??
Thanks,
Patrick
we need to set the page links as image in the DotNetNuke(dnn), mean the home page link should be image not text and contact us separate image, about us separate image, and the drop down are to be separate images, how i can do this?
DotNetNuke.
There isn't an easy way through the UI in DNN to do this, but if you are creating a custom skin and using the DNNMenu skin object you can target the specific items in the navigate with a CSS class, doing this would allow you to change each menu item with an image.
For example for the "HOME" link on my website (www.chrishammond.com) I could provide CSS like .id36{background-image:url('http://www/someimage.jpg');} though I would also want to be sure to hide the text, and provide a height/width