I am just starting out to learn how to implement a DotNetNuke website. I have installed everything and got the starter-site up and running and have started off by attempting to change a few bits and pieces to get a feel of how it works.
I've added a menu item to the existing menu (Admin --> Page Management --> Add Page (and then added 8 sub-pages underneath)
Under the Appearance of the new menu item I've given it a Skin of "Host: DarkKnight - 3-Column-Mega-Menu"
The sub-pages or submenu now appears on mouse-over no problem, however the font-size of the submenu items is way to big and I cannot for the life of me figure out where / how to change this.
I am using the latest download of DNN (which I think is version 6)
Appreciate any guidance.
You need to modify the dnnmega.css file in /portal/Portals/_default/Skins/DarkKnight/DNNMega.
in this line change font-size value:
ul.dnnmega li.category a span{display:block;font-size:18px;color:#686868;border-bottom:1px solid #e5e4e4;margin:0 14px 0 18px;padding:0;}
You test other modifies and see.
For change the number of coloumns (if there are more submenus) and other behaviours you need to edit the jquery.dnnmega.debug.js ( and jquery.dnnmega.js )
Related
I’m learning Drupal 8, HTML and CSS.
I recently migrated our Drupal 7 site to a Drupal 8 site.
https://eerr.org.uk/ (Drupal 7 site)
http://d8-dev.eerr.org.uk/ (Drupal 8 site)
I’m having problems getting simple things like the text to line up. Some things seemed to be controlled in Drupal (Appearance > Settings ). Others I guess I need to change the CSS files.
I’m using a barrio theme based on bootstrap 4.
I’d like to get the Logo left justified with the other headings (as it is on the original site), can someone help me out explaining how to do this ?
I think it needs to be within the div with the container class but I don’t see how to easily change that.
I was able to to put the nav bar in the container in Drupal settings:
Appearance > Settings > Components > Navbar Structure
Tick: Navbar width container
Check if navbar width will be inside container or fluid width.
Mark
Getting started with Eclipse Neon.
Pleasantly surprised to see that we can now recapture nearly all wasted space from the UI with little effort.
For example, Gtk 3.20 (on Linux) streamlines scrollbars and gutters to the point where there's no longer a need to create a custom plugin to hide space-wasting elements. To hide entire toolbar row, just a click away: Window > Appearance > Hide ToolBar. Bottom status bar? Just define override attribs and import custom css file into target theme a la #import('custom_gtk.css'):
#org-eclipse-ui-trim-status,
#org-eclipse-ui-trim-vertical2,
#org-eclipse-ui-main-toolbar {
visibility: hidden;
}
There is, however, one issue I have been unable to workaround via custom css: in split editor layouts a separate top row appears with min/max buttons. The row serves no purpose since max button is not attached to any editor panel file (i.e. clicking max button does nothing). The end result is 20-30px of wasted vertical space.
Have tried various override incantations using CSS Spy, but none have worked. Would love to find a solution to this problem as out of the box space preserving VIM-like editing is nearly at hand in Neon.
Here's E4 Bugzilla tracker issue (generally not much activity there so trying SO in hopes of finding a solution or possible workarounds).
This is a bit heavy handed but does the trick. In my eclipse plugins/org.eclipse.ui.theme.../css directory I have a custom_gtk.css file with, among other overrides, the following:
CTabFolder {
swt-maximize-visible: false;
swt-minimize-visible: false
}
Hides all min/max elements and the extraenous row in which the elements are defined (if editor tabs exist then the row remains, only min/max buttons are hidden).
I am having a problem with displaying my navbar within my Joomla 3 website when resized to a tablet/mobile size.
For some reason I have a grey nav button appearing on the left and when i click this a blue nav bar appears on the right hand side with the menu then dropping down.
How can i make it so that I have either the grey or blue box and then when clicked the dropdown appears but all from one side.
I am confused as to why both are appearing.
When checking with firebug, I can see that one is navbar pull-left class and the other class is nav-collapse.
There are several variables to deal in this matter.
First, make sure version of bootstrap want to use and what you're really using.
Second, if you want to use the bootstrap version 3, make sure it is not charging well, version 2, which is the default Joomla brings. This will you manage in your template.
Third, you may also need an override of template for the code generated by joomla, run right.
I leave part of the code that you need for all this.
Get bootstrap 3 in joomla template. Copy js and css files to directorys and...
$doc->addScript($tpath.'/js/bootstrap.min.js');
$doc->addStyleSheet($tpath.'/css/bootstrap_3.css');
To avoid conflicts, how not to load js files it is as follows:
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
In this case, we remove the bootstrap.min.js joomla file loaded by default.
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
Which is the best way to convert/change an existing drupal site to a responsive pattern? I have searched lot, but not getting any right direction or guideline. My current site is running with drupal 7 and zen theme. Do I need to change the theme to responsive one like bootstrap or there have any other better solution.
I think you got the answer in your question! I used the Bootstrap theme for Drupal to make my websites responsive. It works perfectly. You can find it here:
Bootstrap project for Drupal
The theme is shipped with sub-theme starter kit you can use to pimp your own theme safely.
You don't convert the Drupal site but the HTML output, to responsive.
How the HTMl is generated (the Drupal theme) is not relevant.
Regardless of what theme you are using, something that I found useful is just open your website in Chrome, and using Developer tools, I add media queries as required to a new CSS, fixing only what looks too cluttered or small in the simulated device.
Some steps include:
Add a new folder to workspace (Sources tab)
Add a local (initially empty) css link to the drupal header (to work with the actual site, or you'll have to take the task to generate an off-line version of your site, fixing all the links to point to your local computer, or to setup that theme in a local server, as MAMP)
replace all the WIDTHs from container that prevent the site to be reduced with the browser's viewport (as you reduce the window size) with MAX-WIDTHs (same value), and set a new WIDTH to 100%. Now your design will be flexible under the original width.
hide, float, or change the position of divs to flow nicer with the new viewport width.
A trick I use a lot with big marketing elements (not article content with lots of text) is to make them elastic, so they look always the same relatively to the viewport. To accomplish that: re-define font-sizes AND all dimensions in em. Then and add "font-size: 1vw;" to the first parent that can be proportional to the viewport's width or matches the full viewport, and when your viewport resizes, all the elements will scale as well.
setup a few classes as .mobile-hidden or .desktop-only to hide/show redundant elements in mobile view.
(Obvious) make texts bigger and add give enough padding to small elements to be easily touchable.
Then just upload your CSS to the theme and change the url in the link you created before in the header.
Voilá: responsive theme.
Note: Keep in mind many scripts these days modify the DOM and new elements might need to be styled later, once you run some cart, or functionality which generates/changes elements and their styles.
Good luck.